はじめに
HTML＆CSS初級編の続きになります。
勉強ついでに、学習したことを備忘録としてまとめようと思います。
環境
OS：macOS
エディタ：VSCode
ブラウザ：Google Chrome
受講コース：HTML & CSS 中級編
1 本コース中に使用したHTMLのタグとCSSのプロパティ
コース学習中に登場したHTMLタグとCSSのプロパティ、それらの使用用途を簡単にまとめました。
学習中にMDNを確認しているので、コース中では使われていない用途が書かれているかもしれません。
興味がある方は、調べてみてください。
https://developer.mozilla.org/ja/docs/Web/HTML/Element
HTMLで使用したタグ
タグ（要素）
使用用途
header
ページのヘッダーを表す要素
footer
ページのフッターを表す要素
CSSで使用したプロパティ
プロパティ
使用用途
text-decoration
background-image
背景画像を指定する指定方法 background-image: url(画像のURL);
background-size
背景画像の寸法を指定する「cover」を指定すると、１枚の画像で表示範囲を埋め尽くす
opacity
要素の透明度を指定する0.0~1.0(0.0で完全に透明、1.0で完全に不透明）で値を指定する
letter-spacing
文字の間隔を指定する
display
要素をブロック要素、インラインブロック要素、インライン要素いずれかに変更できる
border-radius
要素の角を丸める数字が大きいほど角が丸くなる
text-align
インライン要素やインラインブロック要素の配置を指定するleftで左寄せ、centerで中央揃え、rightで右寄せになる
rgba
要素の色と透明度を指定するr,g,b(各0~255の256段階),透明度で色を指定する
transition
アニメーションをつける変化の対象（プロパティ名）、時間を指定する
line-height
行の高さを指定する要素の高さと同じ値を指定すると、文字が縦方向の中央に配置される
font-weight
文字の太さを変更するnormalまたはboldを指定する
position
要素の位置を指定する基準位置からの位置をtopやleftなどを用いて指定する
box-shadow
ボックスに影をつける影をつけたい水平方向、垂直方向、影の色を指定する
cursor
要素にカーソルが乗った時のカーソルの形を指定する
z-index
要素の重なり順序を指定する値が大きいほど、重なったときに上部に表示される
CSSの類似クラス
類似クラス
使用用途
hover
要素にカーソルが乗った時のCSSを指定する
active
要素をクリックしているときのCSSを指定する
2 ブロック要素とインライン要素
ブロック要素の中には、他のブロック要素やインライン要素を配置できる。一方、インライン要素の中には、テキストデータや他のインライン要素を配置できるが、ブロック要素を配置することはできない。
また、ブロック要素とインライン要素の両方の特徴を持つインラインブロック要素というものもある。displayプロパティで指定することができる。
・ブロック要素：前後で改行が入り、親要素の幅一杯に広がる要素（例：div、h1、pなど）
・インラインブロック要素：ブロック要素とインライン要素の両方の特徴を併せ持った要素
・インライン要素：改行されない要素（例：span、aなど）
ブロック要素
インラインブロック要素
インライン要素
width,height
指定できる
指定できる
指定できない
margin,padding
指定できる
指定できる
左右のみ指定できる
配置
縦並び
横並び
横並び
3 Font Awesomeについて
webページにアイコンを表示させたい場合、「Font Awesome」を使用すると良い。
ほとんどのサービスを無料で使用できる。
アイコンの一覧や詳しい使用方法については、下記ページに記載されています。
https://fontawesome.com/
Font Awesomeの導入
head要素内でCSSを読み込みます。読み込みたいバージョンを指定します。
（注：ver5.9以降を利用するには、メールアドレスを登録してアカウントを作成する必要があるようです）
*省略
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v○.○.○/css/all.css">
<!--v○.○.○には使用したいバージョンの情報を入力する -->
</head>
*省略
アイコンを表示させる方法
spanタグにfaクラスとfa-アイコン名クラスを指定する。
（表示させたいアイコンを公式ページで検索すると、指定すべきクラス名が出てきます）
test.html
*省略
<div class="test1">
<h3>ハート<span class="fa fa-heart"></span></h3>
<h3>スター<span class="fa fa-star"></span></h3>
<h3>amazon<span class="fab fa-amazon"></span></h3>
</div>
*省略
4 その他の学びや注意点について
・文字や要素の中央寄せについて
ブロック要素：marginの左右をautoに指定する（必ずwidthを併せて指定する）
インライン要素、インラインブロック要素：text-alignをcenterに指定する
・class名は1つのタグに対して複数指定でき、半角スペースでclass名を区切る 例：(class="a b")
・ボックス要素のwidthやheightをpxではなく%で指定すると、 親要素に対しての幅や大きさを指定できる。
・positionによる基準位置の指定について
absolute：サイト全体の左上部分が基準位置となる。
relative：その要素の左上部分が基準位置となる。基準としたい親要素に指定すると、親要素の位置に対する子要素の位置を指定できる。
fixed：常に要素を画面上の指定の位置に固定させる。
最後に
続いて、上級編を学習していきます。
内容の誤りや補足等ありましたら、コメントにて教えていただけますと助かります。
↧