もしかしたら役立つかもなのcss指定

ここのデザインをこんなふうにしたい。

そんな時に、便利なcss指定をまとめてみました。

デザイン調整に使ってみてください。

役立ちそうになかったら、忘れましょう。

html/css初心者の人はこちらもどうぞ↓↓

【html/css初心者】仕事へ就く前にサーバーを経験すべき理由

htm/cssを勉強中の方へ。この記事では、サイト制作を始めた人がサーバーを借りてファイルをアップする経験を早く積んだ方がいい理由を解説していきます。

yoncoichi.com

※をつけた文章の先頭の文字を揃える

※や★などの記号をつけて文章を開始する時の、頭文字を揃える方法です。

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>１行目テキスト<br>
     ２行目２行目テキスト<br>
     ３行目テキスト<br>
     ４行目４行目テキスト<br>
     ５行目テキスト
  </p>

p{
  text-align: center;
  background-color: aliceblue;
}

<p>にうすい青の背景色をつけています。

中央配置で左揃えにする

こういう場合は<div>で<p>を囲い、親子関係を作ってあげます。

そのうえで指定していくんですが、先にコードと結果を見てみましょう。

<div>
  <p>１行目テキスト<br>
     ２行目２行目テキスト<br>
     ３行目テキスト<br>
     ４行目４行目テキスト<br>
     ５行目テキスト
  </p>
</div>

div{
  text-align: center;
  border: solid 1px #3e3e3e;
}
p{
  display: inline-block;
  text-align: left;
  background-color: aliceblue;
}

解説

<div>は境界線に囲まれたエリア、<p>の範囲はうすい青です。

<p>をinline-blockにすると幅が中身のテキストの大きさになります。

なので、<div>のtext-alignが効いて<p>が中央に位置します。

かつ<p>の中ではtext-align: leftが効き、テキストが左揃えになるのです。

おまけてきなもの

また、こんなふうにもできます。

<div>
  <p>１行目テキスト<br>
     ２行目２行目テキスト<br>
     ３行目テキスト<br>
     ４行目４行目のテキスト<br>
     ５行目テキスト
  </p>
</div>

div{
  text-align: right;
}
p{
  display: inline-block;
  text-align: left;
  background-color: aliceblue;
}

文章を右に置きつつ、左端が揃っています。

先ほどとの違いは、<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;
}

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のルールブックみたいなもので、その最新版です。

• text-indent｜MDN Web Docs
• vertical-align｜MDN Web Docs
• fit-content｜MDN Web Docs