edo1z blog

プログラミングなどに関するブログです

CSS

CSS - 横幅が固定ではないときに中央揃えにする方法(微妙だった)

CSS

横幅が固定であれば中央揃えにする方法は下記です。 div.hoge { width: 800px; margin: 0 auto; } 横のマージンをautoにするだけです。 しかし、横幅が可変の場合はどうしたらよいのでしょうか? 参考サイト tanihiro.hatenablog.com 上記によると、inline-b…

既存のvueアプリに適用しやすいcssフレームワークはなんですか?

Quasarを使おうと思ってたのですが、quasar-cliも、vue-cliも使えない状況で、使おうと思ったら、やり方が書いてなかった。下記によるとデフォルトのquasarに既存vueを統合してよみたいな感じに書いてあるので、Quasarは今回はやめることにした。 https://fo…

IEでみるとスクロールバーと画面のコンテンツが重なっている

参考:IE でスクロールバーがコンテンツに重なる問題を解決する viewportが原因だそうです。今viewportの設定は、となってますが、IE11とかは、device-widthが入ってるとスクロールバーも含めてしまうらしい。CSSに下記のように書けばいいらしい。 @-ms-view…

cordova + onsen ui + reactの開発環境

cordova + onsen ui + reactの開発環境を作成してみます。cordovaのテンプレートにして、メンテしていければと思います。環境は、windows10、npm3.10.8です。エディタは、visual studio code1.6.1を使ってます。 プロジェクトを作る npmはインストール済みで…

HTML5 - 一部だけ横スクロールさせる

横スクロールは、overflow-x: scrollを設定したdivで囲むだけで簡単にできた。固定させたい部分の幅を明記する必要があるのではないかと思ったが不要だった。 https://github.com/endoyuta/yoko

画面の高さに画像サイズを合わせる

トップページのでっかい画像を画面の高さに合わせることで、スマホでもPCでも最初の表示は画面全体に画像が表示されるようにしたい。 画面の高さは、$(window).height()なんじゃないかと思っている。だから最初に、$('#top_img').height($(window).height())…

スマホでfixedをサポートするのはめんどくさい

参考: iPhone、Android position:fixed 対応状況と対応方法 Fixed固定ナビゲーションを設置するときに気をつけたい4つのこと user-scalable=noを使う理由と弊害(スマホのviewportを見直す) スマホではfixedがサポートされていないのがある。ios5から対応…

いい感じにくっつけたフッターとヘッダーの間にあるコンテンツの背景を白く塗りつぶしたい

ヘッダーとフッターの間にあるコンテンツ空間はコンテンツ量によって高さが変動しますので、普通にbackgroundの背景色を設定しても、コンテンツ量が少ない場合、余白が出来てしまいます。この余白をださずに背景色で埋めたいです。 display: flexってやつが…

Androidで背景画像が固定できない!!

CSS

これでPCだと問題なく固定できますし、iPhoneでも問題なく固定されます。しかしながらAndroidだと固定されません!!! body{ background:url('../img/img.jpg') no-repeat center center fixed; background-size:cover; } PC/スマートフォンで背景画像を固…

フッターをいい感じに下にくっつける

CSS

今まで僕はフッターをいい感じに下にくっつけたことがありませんでした。本日ついにいい感じに下にくっつけることが出来るようになりました。height:auto !importantというのはIE対策だそうですのでIE考えないなら不要です。wrapにcontentsとfooterを入れて…

CSS リストの頭に画像をずれないように表示する

CSS

ul{ list-style-type:none; line-height:180%; margin:0px; padding:0; } li{ background:url(../img/hoge.png) left no-repeat; padding:0 40px; }

twitter bootstrapの吹き出し

参考:http://getbootstrap.com/2.3.2/javascript.html#popovers 静的に吹き出しを使いたい場合は、下記のような感じでやります。 <div class="popover right show" style="position:relative; max-width:100%;"> <div class="arrow"></div> <h3 class="popover-title"> タイトル </h3> <div class="popover-content"> <p> 内容 </p> </div> </div>

CSS3 ボタンつくってみた

/************* ボタン ***************/ .btn { background: -moz-linear-gradient(top,#DFE9F5, #1D25F7 50%,#0020A3 50%,#0039FE); background: -webkit-gradient(linear, left top, left bottom, from(#DFE9F5), color-stop(0.5,#1D25F7), color-stop(0.…

CSS Button Generator

http://css-button-generator.com/ よさそう。 うーむ色によってはうまく表示されない。。

CSS tableの各行のbottomにだけborderをつける

CSS

table{border-collapse: collapse;} td,th{border-bottom:solid 1px #abc;} collapseというのを知らなかった。。。

CSSセレクタ20個

CSS

意外と知らない!?CSSセレクタ20個のおさらい CSS3になってからほんと色々なことができるようになってるんだな。便利だ。

HTMLの印刷時の注意

IEでは幅649pxまでしか印刷できないのでそれ以内にする必要がある。あるいはwidth:autoにする。 media="print"設定のスタイルシートをつくって、display: none;を設定することで印刷時に不要な箇所を削除できる。 背景画像・背景色はデフォルトでは印刷され…

ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」を使ってみる

ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」で知った、gmaps.jsを使ってみます。 まずここで、ダウンロードします。ソースコードをコピペしてgmaps.jsを作成しました。ところで、google map APIはあまり使ったことがないので、とりあえず…

CSS - jQueryで垂直中央に配置する

jQueryを使ってボタンを親要素の高さの真ん中に配置したいと思います。単純なことですが、ちょっとはまったので、切り出して試しました。cssでheightを100%にするの忘れてたり、jQueryでtopを設定するときに'px'の2文字を入れ忘れたりしていただけでしたが…

jQuery+CSS3サンプル

jQueryとCSS3を使ったサイトのサンプルを作ってみました。 jQueryをちょっとばかにしてたけどかなり色々できて面白い。スマホだとIE対応等の為に重くなっているらしいので、もっと軽いjQueryみたいなやつが沢山でているそうです。同じような使い方であること…

Css - あふれた文字を「...」に変換する

CSS

下記のように、divの中に、長い文字列があるが、divの幅を固定したい場合、下記のようなcss設定によってあふれた文字を「...」に変換することができる。これによって、div幅を固定しながら文字列が続くことも表現できる為、スマートである。 divの例 <div id=&quot;afuretamoji&quot;>あああ</div>…

jQuery - メニューをマウスオーバーしたら色変える

非常に簡単な話ですがメモ。大体jQueryも分かってきたのですが、cssの設定方法などもいくつかパターンがあるようで、あとbackground-colorという記載が通常のcssの表記法だと思うのですが、jQueryの場合は、backgroundColorだったりしてなんかややこしい。多…