HTMLを学ぼう②

アイコンを使おう

下図のように、ボタンにアイコンをつけましょう。

Font Awesomeとは?

アイコンを表示するにはFont Awesomeというものを使うと便利です。
たくさんのアイコンが用意されており、自分の気に入ったアイコンを簡単に使うことが出来ます。
https://fontawesome.com に詳しい使い方やアイコンの一覧が載っています。

アイコンを使おう

Font Awesomeの使い方

Font Awesomeは、以下の手順で使用することができます。
①Font AwesomeのCSSファイルを読み込む
②<span>タグにfaクラスとfa-アイコン名クラスを指定する
(Font Awesomeのサイトにアイコンごとのクラス名が載っています。)
これだけで簡単にアイコンを表示させることができます。

ヘッダーのレイアウト

次はヘッダー部分を作っていきましょう。
ヘッダーの構造は図のようになっています。
ヘッダーの背景色は少しだけ透明にします。

opacityとrgba

これまで要素を透明にするにはopacityを用いてきました。
しかし、opacityには要素の中身全てを透明にするという性質があります。背景色のみを透明にするには、rgbaというものを使う必要があります。
それを学んでいきましょう。

rgb

rgbaを学ぶには、まずrgbというものを理解する必要があります。
rgbは色の指定の仕方の1つで、3つの値の組み合わせで表示する色を決めます。色を指定するときは今まで使用してきた#ffffffのような記法を使ってもrgbを使っても構いません。

ヘッダーのレイアウトを作ろう

rgba

色を透明にしたいときは色をrgbaで指定します。rgbaは4つの値をコンマ(,)区切りで入れます。4つ目の値が透明にする度合いで、0 ~ 1の数値で指定します(値が小さいほど透明になります)。
opacityプロパティは要素全体を透過させますが、rgbaを使うとその色だけを透明にすることが出来ます。

ログインリンクを作ろう

次はログインリンク部分を作っていきます。

ログインリンクを
完成させよう

ログインリンクを完成させましょう。
以下二点の方法を学びます。
・hover時にアニメーション付きで色を変える
・ヘッダーの縦の中央にログインという文字を表示する

ログインリンクを完成させよう

transition

transitionを使うとアニメーションをつけることができます。
「変化の対象」や、「変化にかかる時間」などを指定できます。
「変化の対象」にはcolorなどのプロパティを指定しますが、allを指定すると全てのプロパティに適用出来ます。
transitionは多くの場合hoverと組み合わせて使います。

行間を指定する

line-heightプロパティを使うと、行の高さを指定することができます。
値が大きいほど行間が大きくなります。

ログインリンクを完成させよう

line-heightと
縦の中央寄せ

line-heightプロパティは本来行間を調整するためのプロパティですが、要素の縦方向の中央に文字を配置するのにも使えます。
line-heightプロパティの「高さの中心」に文字が配置されるため、要素の高さとline-heightプロパティを同じ値にすると、文字がちょうど中央に配置されるようになります。

ログインリンクを完成させよう

<a>タグをクリックできる
範囲

<a>タグはインライン要素なので、中身のテキストの部分しか大きさを持ちません。その結果、<a>タグをクリックできる範囲はテキストの部分だけになってしまいます。
<a>タグをブロック要素にすると、大きさが親要素いっぱいに広がるので、全体をクリックできるようになります。

レッスン一覧のレイアウト

次はレッスン一覧部分を作っていきます。
レッスン一覧部分は図のような構造になっています。
これらを1つ1つ作っていきましょう。
また、文字の太さを変える方法を学びましょう。

文字の太さを指定する

font-weight

font-weightプロパティを用いると文字の太さを変更することができます。normalまたはboldを指定します。
<h1>~<h6>の要素は初期状態でfont-weight: bold;となっているので、font-weight: normal;と指定すれば文字が細くなります。

相対的な大きさの指定

width

ボックスのwidthやheightをpxではなく%で指定すると、親要素に対してどのくらいの幅や高さを持つか指定することができます。

レッスン紹介部分の
レイアウト

レッスンの紹介部分は以下のようなレイアウトになっています。

レッスン紹介部分を
作ろう

レッスン紹介部分を作っていきましょう。
通常、HTMLでは要素同士が重なって表示されることはありません。
しかし、CSSを用いることで要素同士を重ねることができます。
今回は画像アイコンと文字が重なるようにする方法を学びます。

position: absolute;

HTMLの要素同士は通常重なって表示されることはありませんが、position: absolute;を使うと、要素同士を重ねて表示することが出来ます。
サイト全体の左上部分を基準とし、そこからの位置をtopとleftを用いて指定します。また、rightやbottomを併用することも可能です。

基準位置の変更

position: absolute;の基準位置はサイト全体の左上部分ですが、この基準位置は変更することが出来ます。
基準としたい親要素にposition: relative;と指定すると、その要素の左上部分が基準位置となります。

影をつけよう

ボックスに影を付けるためにはbox-shadowプロパティを用います。
以下の図のように「影の位置」と「影の色」を指定します。

cursor

cursorプロパティを用いることでマウスのカーソルが要素に乗ったときのカーソルの形を変えることができます。
タグによってcursorが初期状態で設定されているものもあり、例えば<a>タグは初期状態でpointerが設定されています。

ボタンを押したら
へこむようにしよう

ボタンを押したらへこんで見えるようにしましょう。
ボタンを押したときに以下の処理をすると、へこんで見えるようになります。
・影を消す
・ボタンの位置を影の分だけ下げる

: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によって影の分だけ位置を下げる

画面上に要素を固定する

position: fixed;を使うと、常に要素を画面上の指定した位置に固定させておくことができます。
位置は、top、left、right、bottomを使って指定します。

要素の重なりの順序を
指定する

z-indexプロパティは、要素の重なりの順序を指定する際に使用します。
z-indexは整数値で指定し、値が大きいほど上に表示されます。
z-indexプロパティは必ずpositionプロパティと併用する必要があるので、注意しましょう。

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

前の記事

ネットバンクを守る

次の記事

データ分析もできるSQL