
ここのデザインをこんなふうにしたい。
そんな時に、便利なcss指定をまとめてみました。
デザイン調整に使ってみてください。
役立ちそうになかったら、忘れましょう。
※をつけた文章の先頭の文字を揃える
※や★などの記号をつけて文章を開始する時の、頭文字を揃える方法です。
text-indentとpadding-leftを使う
補足書きする時に記号を使うと、改行された際に先頭の文字が揃わなくなります。
<p>※注目ポイント!<br>
セール商品が多数<br>
お買い得な品も豊富<br>
</p>
p{
background-color: aliceblue; /* うすい青 */
boder: solid 1px #e5e5e5;
}
※注目ポイント!
セール商品が多数
お買い得な品も豊富
<p>に背景色と境界線をつけています。
これを解消するためにtext-indent
を使います。
ふつうは1行目の文字を下げるために用いるのものですが。
こんなふうに。
p{
text-indent: 1em;
}
※注目ポイント!
セール商品が多数
お買い得な品も豊富
1emは1文字ぶんなので、text-indent: 16px
でも同じです。
text-indentとpadding-leftを使って、先頭の文字を揃える
text-indent
はマイナス値も指定できるので、先ほどとは逆に-1em
とすれば先頭の文字は揃います。
p{
text-indent: -1em;
}
※注目ポイント!
セール商品が多数
お買い得な品も豊富
揃ったんですが、※が<p>からはみ出ていますね。
そこで、枠の中へ収めるためにpadding-left
を使います。
p{
text-indent: -1em;
padding-left: 1em;
}
※注目ポイント!
セール商品が多数
お買い得な品も豊富
※が<p>の中に入り、先頭の文字も揃いました。
記号ではなく画像などの時
先頭が記号ではなく画像などの場合は、幅の大きさによってtext-indent
とpadding-left
の数値を調整しましょう。
<p><img src="cat" alt="猫">注目ポイント!<br>
セール商品が多数<br>
お買い得な品も豊富<br>
</p>
img {
width: 30px;
}
p{
text-indent: -2em;
padding-left: 2em;
}
注目ポイント!
セール商品が多数
お買い得な品も豊富
文章を中央に置きつつ左揃えにする
タイトルだけ聞いても、分かりにくいですね。
というわけで、さっそく解説にいきましょう。
指定方法
text-align: center
で文章は真ん中になりますが、左端は揃いません。
<p>1行目テキスト<br>
2行目2行目テキスト<br>
3行目テキスト<br>
4行目4行目テキスト<br>
5行目テキスト
</p>
p{
text-align: center;
background-color: aliceblue;
}
1行目テキスト
2行目2行目テキスト
3行目テキスト
4行目4行目テキスト
5行目テキスト
<p>にうすい青の背景色をつけています。
中央配置で左揃えにする
こういう場合は<div>で<p>を囲い、親子関係を作ってあげます。
そのうえで指定していくんですが、先にコードと結果を見てみましょう。
<div>
<p>1行目テキスト<br>
2行目2行目テキスト<br>
3行目テキスト<br>
4行目4行目テキスト<br>
5行目テキスト
</p>
</div>
div{
text-align: center;
border: solid 1px #3e3e3e;
}
p{
display: inline-block;
text-align: left;
background-color: aliceblue;
}
1行目テキスト
2行目2行目テキスト
3行目テキスト
4行目4行目テキスト
5行目テキスト
解説
<div>は境界線に囲まれたエリア、<p>の範囲はうすい青です。
<p>をinline-block
にすると幅が中身のテキストの大きさになります。


なので、<div>のtext-align
が効いて<p>が中央に位置します。
かつ<p>の中ではtext-align: left
が効き、テキストが左揃えになるのです。
おまけてきなもの
また、こんなふうにもできます。
<div>
<p>1行目テキスト<br>
2行目2行目テキスト<br>
3行目テキスト<br>
4行目4行目のテキスト<br>
5行目テキスト
</p>
</div>
div{
text-align: right;
}
p{
display: inline-block;
text-align: left;
background-color: aliceblue;
}
1行目テキスト
2行目2行目テキスト
3行目テキスト
4行目4行目テキスト
5行目テキスト
文章を右に置きつつ、左端が揃っています。
先ほどとの違いは、<div>をtext-align: right
に変えただけです。
使う場面は、もしかしたらあるかもしれません…
高さのある、要素の中の文字を下に置く
高さのある要素の中で、テキストを下に配置させる方法です。
さっそく解説していきますね。
inline-flex
例えばこんなコードがあったとします。
<p>テキスト</p>
p{
height: 100px;
border: solid 1px #e5e5e5;
}
テキスト
高さは100pxで、境界線が<p>のエリアです。
通常なら、このように文字は上に位置します。
ここから「テキスト」を下にするため、inline-flex
を使います。
p{
display: inline-flex;
align-items: flex-end;
}
テキスト
inline-flex
は、横並びさせるflex
と同じような特徴を持っているものです。
これにalign-items: flex-end
を加えれば、要素の中の文字が下になります。
ご覧のように、幅の長さは<p>要素の中身ぶんにしかならなくなるので、width
の指定で調整してください。
そして、もう終わりです。
あまりにあっさり過ぎるので、少し遊んでみましょう。
底から少しだけ浮かせたい
この場合は、padding-bottom
を使いましょう。
p{
display: inline-flex;
align-items: flex-end;
padding-bottom: 10px;
}
テキスト
微妙な調整にいいかもです。
横の真ん中にしたい
幅を200pxとして、その真ん中に文字を置いてみます。
inline-flex
を使うとtext-align
は効かなくなるので、justify-content: center
を指定しましょう。
p{
width: 200px;
display: inline-flex;
align-items: flex-end;
justify-content: center;
}
テキスト
無事、中央になりましたね。
(注)を大きな文字の高さに合わせる
タイトルだけではピンとこないかもしれませんね。
ですので、さっそく解説です。
vertical-align
やろうとしてるのは、
サーバー(注)を契約し…
みたいなことです。
もうお分かりかもしれませんが、こういう時はvertical-align
を使います。
vertical-align
は行の高さを基準にして、小さな文字を置く場所を決めます。

高さではなく、行の高さ(line-height
)というのがポイントです。
text-align
似たようなのにtext-align
がありますね。
テキストテキストテキスト
これは横幅の中で、テキストを左右か中央に置くものですね。
なので、仮に高さ100pxを設定して文字を下にしようと思ってもできないんです。
テキスト
ちなみに、昨日書いた記事でこれを実現しています→要素の中の文字を下に置く
小さな文字に指定する
話を戻して、もう少し具体的な例を見ていきましょう。
<p>今年の合格者数100<span>名</span></p>
span{
font-size: 12px;
}
今年の合格者数100名
vertical-align
を指定しないと、小さな文字は下に位置します。
ですが、これはこのままでよさそうですね。
次は、冒頭に出した文章です。
<p>ホームページをアップするには、サーバー<span>(注)</span>を契約し…
</p>
span{
font-size: 12px;
color: red;
vertical-align: top;
}
ホームページをアップするには、サーバー(注)を契約し…
この時にvertical-align
を使って、(注)の高さを決めてあげましょう。
小さな画像を差し込む場合
アイコンなんかを使う場合なども有効です。
<p><img src="hobohobo.png" alt="ほぼほぼ">テキスト</p>
img{
width: 30px;
vertical-align: top;
}
テキスト
一応、上の線が行の高さです。
要素の中身に幅を合わせる
こちらは、ブロック要素に関する話です。
さっそく解説していきます。
fit-content
例えば、以下のようなコードで背景色をつけた場合。
<h2>見出し</h2>
h2 {
background-color: aliceblue;
}
見出し
背景色は横いっぱいに広がります。
で、width: 100px
などにしてもいいんですが、文字だけに背景色をつけたい場合は、fit-content
というのを使いましょう。
<h2>見出し</h2>
h2 {
width: fit-content;
}
見出し
「見出し」のみ、背景色が入りました。
要するにこれは、インライン要素と同じ幅のとり方です。
背景色ではなく、下線にしてみる
線なんかを引いて真ん中にすると見出し感が出るかもしれません。
<h2>見出し</h2>
h2 {
border-bottom: solid 1px #333;
margin: auto;
}
見出し
言うほど出なかったですね。
なので、左右のpadding
をつけ足して長さを調整しましょう。
<h2>見出し</h2>
h2 {
padding: 0 5px;
}
見出し
さっきよりはそれっぽくなったんじゃないでしょうか。
fit-content
がいいのは、文字サイズをvw
などで変化させても、背景色や下線が中身のテキストちょうどになるってところかもしれません。

という感じで、無理やり使いどころを考えてみました。
画像の高さに文字を合わせる
画像と文字が並ぶような指定をやっていきます。
使いどころがあるか分かりませんが…
さっそく解説です。
vertical-alignを使う
例えば、以下のようなコードだと、文字は下の方に位置します。
<p>朝食<img src="breakfast.png" alt="朝食">
p {
background-color: aliceblue;
line-height:1.5;
}
朝食
<p>のエリアはうすい青色です。
ここで、「朝食」を画像の高さに合わせようとするにはvertical-align
を使います。
ついさっきも出てきたばかりですが…
<p>朝食<img src="breakfast.png" alt="朝食">
img {
vertical-align: top;
}
朝食
ポイントと言うほどでもないんですが、vertical-align
は<p>ではなく<img>に指定しています。
vertical-align = 行の高さ(line-height)の中で文字の位置を決める
こうなる理由は、画像が文字の行高の1番上に合わせるからです。

行の高さはline-height:1.5
としています。
画像の高さの真ん中に文字を置く
なので、これを利用すると画像の高さの真ん中に文字を置いたりもできます。
<p>朝食<img src="breakfast.png" alt="朝食">
img {
vertical-align: middle;
}
朝食
vertical-align: middle
は、行の高さの真ん中ということです。

ちなみにこれは、<p>にinline-flex
とalign-items
を指定しても実現できます→要素の中の文字を下に置く
参考サイト
この記事は、CSS3をもとに書きました。
CSS3はcssのルールブックみたいなもので、その最新版です。