今さら聞けないHTML　2022年04月28日

【備忘録・HTML】Font Awesomeでアイコンを表示する方法

## はじめに

こんにちは、だいごです。
今回はFont Awesomeを用いて表示する方法をまとめていきます。
よかったらご覧ください。

## Font Awesomeとは

アイコンを文字として扱うことを可能にしたツール。
画像ではなく文字なので、大きさや色などを変更することが可能。

[Font Awesome](https://fontawesome.com/)

## アイコンを表示させる方法

ここからは簡単なコードを書きながらアイコンを表示させていきます。
完成イメージとしてはこんな感じになります。
まずは以下のコードをHTMLのheadの部分に記述します。

“`html 100日後くらいに個人開発するぞ！day010

## 今日はレイアウトを作ってみた！

## 今日のアウトプット

## 今日の学び

### カーソルを乗せた時に色を変える方法
– カーソルが乗った状態をhoberという
– セレクタ:hoberでカーソルが乗った状態のCSSを指定できる
– 例：ボタンにカーソルが乗った時赤くするCSS
– `.button :hober{background-color:red;}`

### ボタンを角丸にする方法
– 要素の角を丸めるにはbroder-radiusプロパティを

img.onerror発生時にimgをdivに置き換える方法

`img.onerror`発生時に、`img.src`を書き換えて代替画像を表示したり、`img.style.display = ‘none’`を設定してDOMから``を削除するという方法があります。
– [How to replace HTML img broken by missing or erroring image src](https://stackoverflow.com/a/64610546/7947548)
– [How to hide image broken Icon using only CSS/HTML?](https://stackoverflow.com/a/22051972/7947548)

私の場合は、`img`の代わりに適当な`div`を表示したかったのですが、Google検索しても見つからず・・・。実験してみたところ、`img.outerHTML`を設定すれば`div`に置き換えられると分かりました。

border-widthにpx値を小数で指定した場合、要素の境界線の幅はどうなる？

CSSで`border-width`プロパティの値に0.3pxとか1.7pxみたいに小数を指定した場合、表示される要素の境界線の線幅にどれくらい違いが現れるのか以前から気になってたので、サンプルのコードを書いて各ブラウザーで確認してみました。

サンプルのコードはこちら： https://codepen.io/kaz_hashimoto/pen/VwyVqzN

細い境界線を１本引いただけでは差がわかりにくいため、複数本並べて表示してみます。Chromeで表示するとこうなりました。
ピンク色と白のストライプの１本１本が境界線です。境界線の幅は0.1pxから2pxまで0.1px刻みに、そして並べる本数は1本から10本まで変化させています。
セルの右側の数式は、boxの幅100pxを**内法**と境界線の**ストライプの幅**の和に分解

class属性とid属性

# 目次
1. class, idとは何か
1. 違いと使い分け
1. 参考

## 1. class, idとは
どちらもHTMLにおいて用いられる属性である。
CSSのセレクタとして、`h1`や`p`要素を用いることもできるが、同一要素の中でもさらに特定のものを指定したいときにこれらの属性を用いるのが一般的である。

## 2. 違いと使い分け
ひとつのWebページ内において、class属性は複数回用いることが可能な一方、id属性は重複して複数回用いることができないという違いがある。
一見、class属性を用いれば問題が無いようにも思えるが、使い分けをすることにより大規模なソースに対しても何がどこに適用されるのかを読み取りやすくなるというメリットがある。

使い分けの基準は簡単で、その装飾を複数箇所にあてたいのならclass、単一箇所でよいのならidというものである。(ほかの考え方も勿論あり、各人さまざまであることに注意。)
例として、classを使えるようなものとしては段落ごとの章の名前、本文など。id属性を使えるようなものとしてはヘッダー、フッターなどがある。

## 参考
h