【プロゲート】HTML & CSS 中級編の学習内容まとめ
ここではオンライン学習サイト「プロゲート」の学習内容をまとめていきます。
HTML & CSS 中級編
1.目標物を確認しよう
HTML中級編
・このレッスンではよりモダンなWebページを作ることを目指す
２.全体のレイアウトを作ろう
<header>と<footer>
・<div class="header">と<div class="footer">のような、ヘッダーとフッターのためのタグは非常によく使われるので、HTMLには<header>と<footer>というタグが用意されている
・<header>, <footer>を使う方が一般的なので、こちらを使う
3.トップ部分のレイアウトを作ろう
背景画像を指定する
・トップ部分の背景には画像を表示する
・CSSで背景画像を指定するにはbackground-imageプロパティ
・background-image: url(画像のURL);のように使う
背景画像の大きさを指定する
・background-imageで指定された背景画像は表示範囲を埋め尽くすまで、繰り返し表示される性質がある
・background-size: cover;を指定すると、1枚の画像で表示範囲を埋め尽くすように画像の大きさが拡大縮小する
要素を中央に配置する
・containerクラスを中央に寄せるためにはmarginの左右にautoを指定する
・marginにautoを指定するときは、必ずwidthを併せて指定する
・上下のmarginにautoを指定することはできない
４.透明度、文字の間隔を調整しよう
要素を透過させる
・opacityプロパティで要素を透明にできる
・透明度は0.0(完全に透明) ~ 1.0(完全に不透明)の数値で指定する
文字の間隔を指定する
・letter-spacingプロパティで文字の間隔を指定できる
5.ボタンを作ろう
ボタン部分を作ろう
・ボタンは<a>タグで指定するが、<a>タグはインライン要素であり、インライン要素にはwidthやheightが指定できないなど不便な点がある
これを解決する方法を学びましょう
インラインブロック
・ブロック要素とインライン要素の特徴を併せ持つインラインブロック要素というものがある
・インラインブロック要素はインライン要素と同様に横に並ぶが、ブロック要素のように幅や高さをもつ
display
・<a>タグは初期状態でインライン要素になっているが、displayプロパティを使うと、インラインブロック要素に変更できる
・displayプロパティはblock（ブロック要素）, inline-block（インラインブロック要素）, inline（インライン要素）を指定できる
複数クラスの指定
・ボタンのように共通の部分があるが、それぞれ小さい変化をつけたい時にはクラスの名前を複数指定すると便利
・半角スペースで区切って複数のクラスを指定できる
６.レイアウトを整えよう
:hover
・カーソルが乗ったときの状態をhoverと言う
・CSSでセレクタ:hoverとするとカーソルが乗ったときのCSSを指定できる
border-radius
・角を丸めるにはborder-radiusプロパティ
・数字が大きいほど角が丸くなる
text-align
・text-alignプロパティでテキスト、インライン要素、インラインブロック要素の配置を指定できる
・leftで左寄せ、centerで中央揃え、rightで右寄せに設定するできる
「margin: 0 auto」と「text-align: center」
・要素を中央寄せにする方法として、margin: 0 autoとtext-align: centerを学んだが、それらの違いを整理しましょう
・containerクラスのように、広い範囲を囲うようなブロック要素の場合はmargin
・テキストやボタンのようなインライン要素・インラインブロック要素の場合はtext-alignを使う
７.アイコンを使おう
Font Awesomeとは？
・アイコンを表示するにはFont Awesomeを使うと便利
・たくさんのアイコンが用意されており、自分の気に入ったアイコンを簡単に使うことができる
・https://fontawesome.com に詳しい使い方やアイコンの一覧が載っている
Font Awesomeの使い方
・Font Awesomeは、以下の手順で簡単にアイコンを表示できる
①Font AwesomeのCSSファイルを読み込む
②<span>タグにfaクラスとfa-アイコン名クラスを指定する
（Font Awesomeのサイトにアイコンごとのクラス名が載っている）
8.ヘッダーのレイアウトを作ろう
opacityとrgba
・opacityには要素の中身全てを透明にする性質がある
・背景色のみを透明にするには、rgbaを使う
rgb
・rgbaを学ぶには、まずrgbを理解する必要がある
・rgbは色の指定の仕方の1つで3つの値の組み合わせで表示する色を決める
・色の指定は#ffffffのような記法を使ってもrgbを使っても良い
rgba
・色を透明にしたいときは色をrgbaで指定する
・rgbaは4つの値をコンマ（,）区切りで入れる
・4つ目の値が透明度合いで0 ~ 1の数値で指定する
（値が小さいほど透明になる）
・opacityプロパティは要素全体を透過させるが、rgbaを使うとその色だけを透明にすることができる
9.ログインリンクを作ろう
・次はログインリンク部分を作っていく
10.ログインリンクを完成させよう
transition
・transitionを使うとアニメーションをつけられる
・「変化の対象」や、「変化にかかる時間」などを指定できる
・「変化の対象」にはcolorなどのプロパティを指定するが、allを指定すると全てのプロパティに適用できる
・transitionは多くの場合hoverと組み合わせて使う
行間を指定する
・line-heightプロパティを使うと、行の高さを指定できる
・値が大きいほど行間が大きくなる
line-heightと縦の中央寄せ
・line-heightプロパティは本来行間を調整するためのプロパティだが、要素の縦方向の中央に文字を配置するのにも使える
・line-heightプロパティの高さの中心に文字が配置されるため、要素の高さとline-heightプロパティを同じ値にすると文字がちょうど中央に配置される
<a>タグをクリックできる範囲
・<a>タグはインライン要素のため中身のテキストの部分しか大きさを持たず、<a>タグをクリックできる範囲はテキストの部分だけになってしまう
・<a>タグをブロック要素にすると大きさが親要素いっぱいに広がるので全体をクリックできるようになる
11.レッスン一覧のレイアウトを作ろう
文字の太さを指定する
・font-weightプロパティを用いると文字の太さを変更できる
・normalまたはboldを指定する
・<h1>~<h6>の要素は初期状態でfont-weight: bold;となっているので、font-weight: normal;と指定すれば文字が細くなる
12.レッスンを並べよう
相対的な大きさの指定
・ボックスのwidthやheightをpxではなく%で指定すると親要素に対してどのくらいの幅や高さを持つかを指定できる
13.レイアウトを整えよう
レッスン紹介部分を作ろう
・通常、HTMLでは要素同士が重なって表示されることはないがCSSを用いて要素同士を重ねることができる
position: absolute;
・position: absolute;を使うと、要素同士を重ねて表示できる
・サイト全体の左上部分を基準としてそこからの位置をtopとleftを用いて指定する
・またrightやbottomを併用することも可能
基準位置の変更
・position: absolute;の基準位置はサイト全体の左上部分だが、この基準位置は変更することができる
・基準としたい親要素にposition: relative;と指定すると、その要素の左上部分が基準位置となる
14.メッセージ部分のレイアウトを作ろう
・次はメッセージ部分を作っていく
15.立体的なボタンを作ろう
影をつけよう
・ボックスに影を付けるにはbox-shadowプロパティ
・「影の位置」と「影の色」を指定する
cursor
・cursorプロパティでマウスのカーソルが要素に乗ったときのカーソルの形を変えることができる
・タグによってはcursorが初期状態で設定されているものもあり、例えば<a>タグは初期状態でpointerが設定されている
16.クリック時に変化をつけよう
ボタンを押したらへこむようにしよう
・ボタンを押したときに影を消し、ボタンの位置を影の分だけ下げるとへこんで見えるようになる
:active
・セレクタにactiveを用いると要素がクリックされている間だけCSSを適用できる
・セレクタ:activeというように指定する
CSSを打ち消そう
・box-shadow: none;とすると、影を消すことができる
・多くのプロパティはnoneを指定することによって消すことができる
position: relative;による位置の変更
・position: relative;はposition: absolute;の基準位置を決めるために使うが、要素の位置を変更するためにも使える
・position: relative;をtopやleftと併用すると、その要素を本来の位置からずらすことができる
ボタンをへこませよう
・クリック時に以下の処理をすることによってボタンがへこんで見える
・box-shadowをnoneにする
・position: relative;とtopによって影の分だけ位置を下げる
17.フッターを作ろう
・次はフッターを作っていく
18.ヘッダーを固定しよう
画面上に要素を固定する
・position: fixed;を使うと要素を常に画面上の指定した位置に固定できる
・位置は、top、left、right、bottomを使って指定する
要素の重なり順
・positionを使用すると要素の重なりが生じる
・重なり順を指定してヘッダーが上に表示されるようにしましょう
要素の重なりの順序を指定する
・z-indexプロパティは要素の重なりの順序を指定する際に使用する
・z-indexは整数値で指定し値が大きいほど上に表示される
・z-indexプロパティは必ずpositionプロパティと併用する必要がある