CSSのdisplayはいつ使う？リンクをボタンにして理解した使い方

# CSSのdisplayはいつ使う？リンクをボタンにして理解した使い方

職業訓練の授業で、Webページの見た目を整えるCSSについて学びました。

今回学習したのは、ボックスに影を付けるbox-shadow、リンクの下線などを指定するtext-decoration、リンクの状態に応じてデザインを変える疑似クラス、透明度を指定するopacity、要素の表示方法を変えるdisplayです。

なかでも特に印象に残ったのが、displayプロパティでした。

授業で説明を聞いたときは使い道が今ひとつ理解できませんでしたが、自分で使用例を調べたことで、少しずつ役割が分かってきました。

CSS display 使い方｜職業訓練で学んだCSSの基本

まずは、同じ授業で学んだ4つのプロパティを振り返ります。

box-shadowでボックスに影を付ける

box-shadowは、要素の周囲に影を付けるためのプロパティです。

カード型のデザインやボタンなどに影を付けると、要素が少し浮き上がったように見えます。

影の位置やぼかし具合、色などを調整できるため、Webページに立体感を出したいときに役立ちます。

text-decorationでリンクの下線を指定する

text-decorationは、文字の装飾を指定するプロパティです。

リンクを作るaタグには、通常、下線が表示されます。text-decoration: none;を指定すると、その下線を消すことができます。

ただし、下線を消すとリンクであることが分かりにくくなる場合があります。

文字色を変えたり、マウスを重ねたときに見た目を変えたりして、クリックできる場所だと伝える工夫も必要です。

疑似クラスでリンクの状態を変える

疑似クラスを使うと、リンクの状態に応じてデザインを変更できます。

リンクには、訪問前、訪問後、マウスを重ねたとき、クリックしている間など、それぞれの状態に対応する疑似クラスがあります。

今回の授業では、マウスを重ねたときに使う:hoverについて学びました。

.button-link:hover {
  background-color: #388e3c;
}

このように指定すると、リンクにマウスを重ねたときに背景色が変わります。

利用者に「ここはクリックできる場所です」と伝えやすくなるため、見た目だけでなく使いやすさにも関係する設定だと感じました。

opacityで透明度を指定する

opacityは、要素の透明度を指定するプロパティです。

1にすると完全に表示され、数値を小さくするほど透明に近づきます。

.sample {
  opacity: 0.5;
}

ただし、opacityを指定すると、その要素だけでなく、中にある文字や画像もまとめて透明になります。

例えば、背景だけを半透明にしたい場合にopacityを使うと、背景の上にある文字まで薄くなってしまいます。

背景色だけを透かしたい場合は、次のように透明度を含んだ色を指定する方法があります。

.sample {
  background-color: rgba(0, 0, 0, 0.5);
}

rgbaの最後の数値が透明度を表します。

用途に応じて、opacityと透明度を含んだ色指定を使い分けることが大切だと分かりました。

CSS display 使い方｜授業だけでは使い道が分からなかった

今回学んだなかで、特に使い道が分からなかったのがdisplayでした。

HTMLタグには、リストやリンク、見出しなど、それぞれに意味や役割があります。

例えば、aタグは別のページや場所へ移動するためのリンクを表すタグです。

HTMLではタグの意味を大切にしながら、CSSを使って見た目や配置を整えていきます。

そのときに便利なのがdisplayプロパティです。

displayを使うと、要素がどのように表示されるか、横に並ぶか、前後で改行されるか、幅や高さを指定できるかといった性質を変更できます。

ただ、授業で説明を聞いただけでは、実際にどのような場面で使うのかをイメージできませんでした。

リンク ボタン CSS｜aタグをボタンにする方法とclassの指定

リンクをボタンのように見せる場面で使われていた、具体的な書き方をまとめます。

リンクをボタンにする例を調べて納得

そこでインターネットで使用例を調べてみると、aタグをボタンのように見せるときにdisplayが使われることを知りました。

aタグは、初期状態ではインライン要素として表示されます。

インライン要素は文章の一部のように横に並びますが、幅や高さを思ったように指定できないことがあります。

そのようなときに、display: inline-block;を指定します。

まず、HTMLでボタンにしたいリンクだけに専用のclassを付けます。

<a href="#" class="button-link">詳しく見る</a>

次に、CSSで見た目を整えます。

.button-link {
  display: inline-block;
  width: 200px;
  padding: 10px;
  background-color: #4caf50;
  color: white;
  text-align: center;
  text-decoration: none;
}

display: inline-block;を指定することで、文章やほかの要素と横に並べながら、幅や余白を調整できるようになります。

この使い方を知り、「displayはこういうときに使うのか」と納得できました。

背景色でボタンらしさを出す部分は、border・background-color・colorの使い方に書きました。

aタグではなくclassを指定する理由

CSSを次のように書くと、ページ内にあるすべてのaタグに同じデザインが適用されます。

a {
  display: inline-block;
}

この指定では、ボタンにしたいリンクだけでなく、文章中のリンクやメニューのリンクまで変わってしまう可能性があります。

そのため、ボタンとして表示したいリンクにだけbutton-linkなどのclassを付ける方が安全です。

.button-link {
  display: inline-block;
}

classを使うことで、目的に合った要素だけにCSSを適用できます。

CSSを書くときは、見た目だけでなく、ほかの部分に影響しないかを考えることも大切だと感じました。

classとidの違いについては、CSS初心者がclassとidの違いを学んで気づいたことでも触れています。

リンク ボタン CSS｜blockとinline-blockの使い分け

リンクをボタンのように表示する場合は、blockとinline-blockのどちらも使えますが、表示のされ方に違いがあります。

display: block;を指定した要素は、基本的に前後で改行され、横方向の領域を広く使う性質があります。

ただし、width: 200px;のように幅を指定した場合、必ず画面いっぱいの幅になるわけではありません。

大きなリンクや、縦に並べたいメニューなどではblockが使いやすい場合があります。

一方、display: inline-block;は、幅や高さ、余白を指定しながら、ほかの要素と横に並べられます。

そのため、一般的なボタンのようなリンクには、inline-blockの方が自然な場合が多いようです。

目的に合わせて考えると、次のように使い分けられます。

横方向に広いリンクや、前後で改行して配置したい場合はblock。

一般的なボタンのように表示し、ほかの要素と横に並べたい場合はinline-block。

実際に両方を試して、表示の違いを確認することが理解につながると思いました。

CSS display 使い方｜分からないことを具体例で理解するコツ

分からないプロパティとの向き合い方をまとめます。

分からないものを具体例で調べる

今回の学習で特に印象に残ったのは、プロパティの書き方よりも、分からないものをどのように理解したかということです。

授業でdisplayについて学んだときは、使い道が分かりませんでした。

そこで、自分で使用例を調べました。

さらに、リンクをボタンにするコードを見たことで、displayの役割を具体的にイメージできるようになりました。

CSSは、プロパティ名と書き方だけを覚えても、実際の使い方が分からないことがあります。

そのようなときは、具体的な使用例を調べ、自分でコードを書いて表示を確認することが大切だと感じました。

CSS初心者へのアドバイス

CSSを学び始めたばかりのときは、一度にすべてのプロパティを覚えようとしなくてもよいと思います。

まずは短いコードを書き、指定する前と指定した後で、画面がどのように変化するかを確認すると理解しやすくなります。

例えば、同じリンクに次の指定を順番に試すと、displayの違いが見えやすくなります。

display: inline;
display: block;
display: inline-block;

試すときは、次の点を比べてみます。

• 幅や高さを指定できるか
• 前後で改行されるか
• ほかの要素と横に並ぶか
• 余白がどのように反映されるか

コードを書き写すだけでなく、「なぜこの指定を使うのか」を考えることも大切です。

分からないときは、使用例を調べ、自分のコードで試してみると理解が深まります。

幅や高さがうまく指定できないときにブロックとインラインを見直した話は、CSSのwidth・heightが効かない原因は？ブロックとインラインの違いを解説にまとめました。

職業訓練の通学生活そのものについては、職業訓練は50代にきついか｜片道2時間・月18日の5ヶ月で振り返っています。

まとめ

今回の職業訓練では、box-shadow、text-decoration、疑似クラス、opacity、displayなど、CSSの基本的なプロパティを学びました。

なかでも、使い道が分からなかったdisplayについて自分で調べ、リンクをボタンにする例を通して理解できたことが大きな学びでした。

ボタンとして使いたいリンクには専用のclassを付けること、一般的なボタンではinline-blockが使いやすいこと、opacityは中の文字や画像にも影響することも分かりました。

CSSは、書き方を覚えるだけでなく、実際の使用場面と結び付けることで理解しやすくなります。

気になるプロパティが見つかったら、短いコードを書き、表示の変化を自分の目で確かめてみてください。