<!DOCTYPE html> <html> <head> <title> Wrapping an Image with the text </title> <style> body { margin: 20px; text-align: center; } h1 { color: green; } img { float: left; margin: 10px; padding-bottom: 2px; width: 250px; } p { text-align: justify; font-size: 25px; }...
画像にテキストを回り込ませたいときが1番使うと思われるこのようなレイアウトを組むときにfloatが使えます。 以下に簡略化したコードを載せておきます。<body> <h1 class="title">floatをあえて使うなら</h1> <div class="container -left"> <img src="https://picsum.photos/160?random=...
Note::z-indexの値の影響範囲は相対的なstacking contextのみです。異なるstacking contextに属している場合、z-indexの値が高い要素が、値の低い要素よりも後ろになることがあります。8. マルチメディア<img>タグや<video>タグを使って画像や動画をWebページに挿入すると、デフォルトではインラ...
<img src="img/example.jpg" srcset="img/example.jpg 1x, img/example@2x.jpg 2x" alt="Example"> srcsetに対応してないものは、srcの画像が使われ、 通常デバイスであればsrcsetの1x、Retinaであれば、srcsetの2xが使われます。レイアウト系コンテンツ数とか繰り返すものが増えても大丈夫?コ...
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldse...
同レベルのスタイルを示すために CSS ブロックを繰り返す必要がある場合、個人的にはかなりストレスを感じます。典型的な例を次に示します。 XML #container h1 { ... } #container p { ... } #container p a { ... } #container img { ... } ...
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldse...
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, d...
小さい画面では縦並び(stack)、より大きい画面では横並びとなるマーケティングページのコンポーネントの例を示す: <div class="md:flex"> <div class="md:flex-shrink-0"> <img class="rounded-lg md:w-56" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2...
thumbnail : 'http://placehold.jp/eeeeee/cccccc/160x120.png?text=No%20Image' </script> <div class="grid grid-cols-1 gap-2 md:grid-cols-3"> <div class="cente"> <img class="h-72 w-auto mx-auto" {src} alt="thumnail"> </div> <div class="bg-white shadow overflow-hidden sm...