サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
blog.raizzenet.com
html <div class="sample"> <p class="text"> あいうえおかきくけこ<br/> さしすせそ<br/> たちつてとなにぬねのはひふへほ </p> </div> css .sample { margin: 16px auto; text-align: center; display: block; border: 1px solid #000; } .sample .text { text-align: left; display: inline-block; } 親要素であるsampleのtext-alignはcenterで、子要素のtextをtext-align:leftにしています。しかしこれだけでは親要素の設定が消されてしまい単なる左寄せになってしまいます。ここで重要なのはdisplayをinline-blockを指定しているところです。これにより
1.左から右へ下線を引く li a:afterでwidth:0として、li a:hover:afterでwidth:100%にして左から右に下線が伸びているようにしています。 TEST 01 TEST 02 TEST 03 TEST 04 TEST 05 HTML <div class="nav1"> <ul> <li><a href="#">TEST 01</a></li> <li><a href="#">TEST 02</a></li> <li><a href="#">TEST 03</a></li> <li><a href="#">TEST 04</a></li> <li><a href="#">TEST 05</a></li> </ul> </div> CSS .nav1 ul { font-size: 0; box-sizing: border-box; width: 100%;
2.transform:scaleでサイズを変える 一番最初の試したのが、scaleでサイズを変える方法でした。 .chkbox input[type=checkbox] { width: 24px; height: 24px; -moz-transform: scale(1.4); -webkit-transform: scale(1.4); transform: scale(1.4); } この方法でもサイズを変えることはできましたが、ブラウザによってはボックスの絵が荒くなってしまう場合があり、使用するのをやめました。 3.独自にチェックボックスのスタイルを作る 色々調べたところ、元からあるチェックボックスを表示しないようにして、CSSでチェックボックスのスタイルを作成する方法があり、これならばサイズも大きくできることができます。自分でチェックボックスのスタイルを作成するので色や形を自
html <div class="sample1"> <img src="./fruit.jpg" alt="フルーツ寄せ集め" /> <div class="mask"> <div class="caption">It's fresh !</div> </div> </div> css .sample1 { width: 280px; height: 188px; overflow: hidden; margin: 10px 8px 10px 16px; position: relative; /* 相対位置指定 */ } .sample1 .caption { font-size: 130%; text-align: center; padding-top: 80px; color: #fff; } .sample1 .mask { width: 100%; height: 100%;
普通によく見かけるホバーエフェクトです。 HTML <div class="sample01"> <a href="#"> <img src="./image/sample01.jpg" /> <h2>サンプル 01</h2> </a> <p>サムネイルにマウスを重ねると半透明になり、タイトルにマウスを重ねると色を赤に変えてます</p> </div> CSS .sample01 { margin: 10px 8px; width: 300px; height: 400px; border-radius: 6px; box-shadow: 0px 2px 4px #aaa; display: inline-block; } .sample01 img { width: 300px; height: 200px; border-radius: 6px 6px 0 0; } .sample01
画像の表示にいつもお世話になっているLightbox。Lightboxとはブラウザに表示している画像をモーダルウィンドウとして表示するjQueryプラグインです。 それを2.8にバージョンアップしたところ、動かなくなってしまいました。HTMLのソースを調べたりしたが、誤字・脱字はないしどうしたものかと悩んでいて、公式ページのGetting startedを見たところ、そこに変更がありました。 今までは、<head>タグ内でlightbox.jsを読み込んでいましたが、2.8では、</body>タグの前に読み込むみたいです。修正後、正常に動いてめでたしめでたし。それでは、使用方法の説明をします。 1.ダウンロード 公式ページからダウンロードしてください。 ダウンロード完了すると「lightbox2-master.zip」が取得できます。 2.必要なファイル 「lightbox2-master
このプラグインは、wordpress用でよく使われているsimpleLightboxとは別物です。とても軽量でレスポンシブなところが気に入っています。 それとスワイプで画像を切り替えることもできるのでスマフォやタブレットからでも使用できます。 1.デモ デモを作成しましたのでよろしかったら、ここをクリック 公式ページのデモは、こちらをクリック 2.ダウンロード 公式ページに行って、ダウンロードしてください。 ダウンロード完了し解凍すると「simplelightbox-master」フォルダーができます。 3.必要なファイル distフォルダーの中身を自分のフォルダーにコピーします。 simplelightbox.min.css simple-lightbox.min.js 4.CSSの編集 画像の下にテキストも表示できるので、色を設定した方が良いです。 .gallery { color:
このページを最初にブックマークしてみませんか?
『いつか誰かの役に立つかもしれないweb制作屋の備忘録 – web制作のRaizze net』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く