[CSS]半透明のパネルを使って、画像にキャプションをかっこよく表示する12種類のスタイルシート -InContent

テクノロジーカテゴリーの変更を依頼記事元:

coliss.com

354users がブックマークコメント

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

<iframe marginwidth="0" marginheight="0" src="https://b.hatena.ne.jp/entry.parts?url=https%3A%2F%2Fproxy.goincop1.workers.dev%3A443%2Fhttps%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fcss%2Fcss-incontent.html" scrolling="no" frameborder="0" height="230" width="500"><div class="hatena-bookmark-detail-info"><a href="https://coliss.com/articles/build-websites/operation/css/css-incontent.html">[CSS]半透明のパネルを使って、画像にキャプションをかっこよく表示する12種類のスタイルシート -InContent</a><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/css-incontent.html">はてなブックマーク - [CSS]半透明のパネルを使って、画像にキャプションをかっこよく表示する12種類のスタイルシート -InContent</a></div></iframe>

プレビュー

規約違反を報告

[CSS]半透明のパネルを使って、画像にキャプションをかっこよく表示する12種類のスタイルシート -InContent

InContentの使い方実装はとても簡単です。 Step 1: 外部ファイル当スタイルシートをhead内に配置しま... InContentの使い方実装はとても簡単です。 Step 1: 外部ファイル当スタイルシートをhead内に配置します。 <head> ... <link rel="stylesheet" href="css/incontent.css" type="text/css" /> </head> Step 2: HTML 画像のimg要素とキャプションのspan要素をdivで包みます。 <div class="pic"> <img src="img/01.jpg" class="pic-image" alt="Pic"/> <span class="pic-caption bottom-to-top"> <h1 class="pic-title">Pic Title</h1> <p>Some description or text.</p> </span> </div> 用意されているcl