サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
参議院選挙2025
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
スマートフォンなどではデフォルトサイズのチェックボックスだと押しにくいです。試行錯誤した結果なんとかサイズを変えられるようになりました。 1.チェックボックス名を押してオン・オフさせる 大きさを変える前にチェックボックスの右側にある文字列を押した時もオン・オフできるようにします。これにより押せる範囲も広がります。labelタグを使った方法で、２つのパターンがあります。 inputタグをlabelタグではさむ方法 <label><input type="checkbox" name="chkbox1" value="1" />チェックボックス</label>
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ページを開く
