CSSのみで実装するキャプションエフェクト 20 - NxWorld
自分用にひと通りの動きを一覧化したものが欲しかったので備忘録です。 画像ホバー時にエフェクト付きでキャプションを表示させる動きをCSSのみで実装する方法です。 キャプションとはしていますが、例えばブログであればリンク付きのアイキャッチに実装してマウスオーバー時に「もっと見る」のような文言を表示させたりといった用途にも使えます。 共通のHTML・CSS 一部をのぞき、今回はサンプルとして基本的に下記のようなHTMLを使用しています。 <figure> <img src="image.jpg" /> <figcaption> <h3>Caption Title</h3> <p>caption text here ...</p> </figcaption> </figure> CSSに関してはそれぞれ動きに関係する部分のみ記述しており、figcaption内にあるh3とpの見栄えに関するフォント
横並びのリストタグの高さを揃える
CSSだけで横並びのリストタグの高さを揃える方法をご紹介いたします。 リストタグの横並びは「float」プロパティが思い浮かぶと思います。ここでは横並びに関しては、「display: inline-block;」を使用します。 2行目の「display: inline-block;」で横並びにし、4行目の「vertical-align: top; 」でli要素を上端揃えにします。これでFirefoxやSafariなどのブラウザに対しては高さを揃えることができます。 IE6とIE7は「display: inline-block;」に対応していませんので、CSSハックで代替プロパティを指定します。12行目から13行目、18行目から19行目が各プロパティになります。 IE6とIE7は「display: inline;」で横並びにします。「zoom: 1;」はli要素のマージンやパディングの指定が
第2回 特定の要素（タグ）を削除したい
今回は、要素（タグ）や特定のコードを削除することをテーマにご紹介します。 シチュエーション： 任されたサイトは、90年代後半に作られたテーブルレイアウトのサイト。ある意味、テキストだけ書き出して、再度コーディングした方が早いともいえますが、テキスト内にはリンクが設定されている箇所がたくさんあり、できれば使い回したい。それにしても要らないコードがたくさんある。これを検索/置換技を駆使して料理していきましょう。 ■まずはリンク画像の「border="0"」を削除 Dreamweaverでは、画像に対してリンクを設定すると、自動的に「border="0"」が付加されます。しかし画像周囲のボーダーを消すためにはCSSで一行「img { border: none; }」と書いておく方法もとれます。そうすればサイト内に記述されている「border="0"」を根こそぎ削除できるので、かなりのソースが節約
てくにかるむ
てくにかるむ 「エラーをなくすことは非常に有益で時には新しい真実や事実を作り上げるよりも勝る」 ー チャールズ・ダーウィン WebBrowserコンポーネントを .NET Framework であれこれ料理したときのいろいろ。 » ActivePerl 本体は実行インストーラで何時でもインストールできるが、ppm や cpan で組み込む追加モジュールはオンライン構築が前提になっている。だが世間から断絶された秘匿ネットワークや、そもそもインターネットに接続するという概念のない PCやサーバに納品したり、機材リプレースで開発環境を再構築しなければならない場面では、USBメモリや DVD-Rからのオフラインインストールが出来なければ話にならない。そもそもバージョンが数世代古くなるとダウンロード元の ppmレポジトリが有料プラン専用に切り替えられて、いつもで気軽に再ダウンロードすることができなく
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3だけで作るボタンデザインいろいろ
[Think IT] HTML+CSSチャンネル
初心者向きのｊａｖａScript＆HTMLタグ・CSS集 
