CSSで1行目の見出し項目をぶら下げインデントする｜web bibo
注意書きや箇条書きなど段落の1行目に見出し項目がある文章で、項目を目立たせるために、2行目以降を字下げすることがあります。これを簡単に実現する方法です。 注意書きとか箇条書きなど、非常に使う場面が多いと思うのでので、かなり役立つテクニックです。ていうか、このテクニック皆さん知ってますよね。。。一応、CSS初心者の方向けということで載せておきます。 HTMLコード <ul> <li>※ああああああああああああああああああああああああああああああああああああ</li> <li>※いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</li> <li>※うううううううううううううううううううううううううううううううううううううううう</li> </ul> CSSコード ul { list-style: none; width: 250px; font-size: 0.8em; lin
CSSでボックスの内容物を上下中央揃えにする方法3種。｜web bibo
↑CSSだけでこんな感じに上下中央揃えを実現させるテクニックです。下記の3つの方法を紹介します。 ・1行のみのテキストを中央揃えにする場合 ・2行以上のテキストまたは画像を中央揃えにする場合 ・高さが決まっていない要素を中央揃えにする場合 1行のみのテキストを中央揃えにする場合 <!-- HTML --> <div> <p>1行のみのテキストに有用</p> </div> /* CSS */ div{ width: 200px; height: 100px; background: #DDDDFF; text-align: center; } p{ line-height: 100px; } →1行のみのテキストを中央揃えにするサンプル line-heightは行間のスペースを制御するプロパティです。なので、2行以上の文などには利用できません。1行だけの場合には簡単に実装できる有用な方法です
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
