アイコンを使う
Font Awesomeを使う。
Font Awesomeの使い方
- ①Font AwesomeのCSSファイルを読み込む
- ②<span>タグにfaクラスとfa-アイコン名クラスを指定する(＜span class=”fa fa-アイコン”＞＜/span＞)
行間を指定する
line-heightプロパティを使う。
本来行間を調整するためのプロパティだが、要素の縦方向の中央に文字を配置するのにも使える。
line-heightプロパティの「高さの中心」に文字が配置されるため、要素の高さとline-heightプロパティを同じ値にすると、文字がちょうど中央に配置される。
文字の太さを指定する
font-weightプロパティを用いる。
normalまたはboldを指定できる。
<h1>~<h6>の要素は初期状態でfont-weight: bold;となっているので、font-weight: normal;と指定すれば文字が細くなる。
要素同士を重ねて表示する
position: absolute;を使う。
サイト全体の左上部分を基準とし、そこからの位置をtopとleftを用いて指定する。また、rightやbottomを併用可能。
position: absolute;の基準位置は左上部分だが、基準位置を変更するには
基準としたい親要素にposition: relative;を指定すると、その要素の左上部分が基準位置となる。
立体的なボタンを作る
box-shadowプロパティを用いる。
影の位置」と「影の色」を指定する。
【例】box-shadow:10px 10px red; (水平方向 垂直方向 色の順に指定する)
セレクタ:activeというように指定する。
【例】div:active{background-color:red;} ←クリックされた間だけ背景が赤くなる
影を消すには、div:active{box-shadow: none;}とする。
position: relative;をtopやleftと併用すると、その要素を本来の位置からずらせます。
影の分だけへこませるには、div:active{position: relative;改行top:10px改行box-shadow: none;}
このように、影の分だけへこませる。
画面上に要素を固定する
position: fixed;を使う。
常に要素を画面上の指定した位置に固定させておける。
要素の重なりの順序を変える
z-indexプロパティで指定する。値が大きいほど上に表示される。
注意：z-indexプロパティは必ずpositionプロパティと併用する必要がある。
コメント