八回目ーーHTML&CSS、ヘッダー続きーー
すみません。
一々サブタイトルを考えるのが面倒になってきました。
ヘッダーを作ります。
リストはありませんが、サイトによってはずっと上に表示され続けるヘッダーがあります。
それを作りましょうという話です。
最近寒くなり、指先がかじかんで打ち込みがしにくくなってきた今日この頃
引き続き始めていきます。
では、早速。
１．ヘッダーのレイアウト
前回画像で示した灰色に塗られていた部分がヘッダーとなります。
今回のヘッダーの内容は
・半透明にする
・左側にロゴ
・右側に色が変わるボタン
三つの内容と簡単そうに見えますが
プログラムが幾つか増えているので覚えていくことがあります。
ヘッダーの構造は
・ヘッダー全体のグループ――『header』
・ヘッダーのテキストグループ――『text』
・左側のグループ――『left』
・右側のグループ――『right』
まず考えるのは順番――上から始めるので、『header』のプログラムです。
ヘッダーは透明にするので『opacity』を使い……と言いたいところですが、『opacity』は全体に作用する性質を持っています。
ここでは背景の灰色の部分だけを透明にして文字はそのままにしたい(前回画像)
そう考えているので今回は使えません。
では、無理じゃないか、と思うでしょう。
そこで使うのが『opacity』に変わる新たなプログラム
『rgba』＝カラーコード、色の指定と透明度
レッド、グリーン、ブルー、アルファらしいです。
これを使うと可能となるのです。
説明は不要でしょうが
『opacity』と異なるのは作用する色だけを透過させていく、ところです。
書き方としては
<div class=”sample”>
<p>プログラミング</p>
</div>
.sample {
background-color: rgba(149,88,37,0.8)
}
カラーコードの場所が変わったと思ってください。
数字に置き換わったことで難しく思うでしょう。
ですが、先の三つの数値――赤、緑、青の数値は色の数値なので書き方が変わっただけで意味は変わっていません。
どういうことかというと
カラーコード(16進数)――rgb(10進数)
となっているだけなのです。
なので難しく考えず相互変換の出来るサイトで調べればいいでしょう。
そして四番目の数値は明度を表しています。
1が濃く、0が薄いというのを覚えておきましょう。
これで全体のレイアウトが出来たので次に進みます。
２．右側を作る
右側にはログインボタンを作りたいと思います。
内容
・カーソルで色が変わる
・リンク先へ飛ぶ
この二つは今までに習ってきたものなので説明は不要でしょう。
まず『HTML』ファイルに『left』と『right』のグループを書き込みます。次に移動させる『float』を『CSS』に書き込み左右に分けておきましょう。
軽く触れますが左側のロゴは画像を使うので
『HTML』ファイルに『img src=”URL”』を書き込みます。
また、画像も変更させるならクラスを付けなければいけません。
右側のログインボタン
まず右側全体のグループ『right』に先ほどの『rgba』を使います。
次にカーソルが当たっている時に色を変えたいので『:hover』を使います。
<div class="header-right">
<a class="login" href="URL">ログイン</a>
</div>
. right {
float: right;
background-color: rgba(100, 100, 100, 0.3);
}
. right:hover {
background-color: rgba(100, 100, 100, 0.5);
}
形としてはこの様になります。
これで完成なのですが、もう少し捻ったデザインにしたいと思います。
３．アニメーション
アニメーションとは言いますが、実際の所はアニメではありません。
カーソルを当てた時に一瞬で変化するのではなく
例えば一秒かけて色が変わるようにする、というアニメーションです。
使うプログラムは
『transition』＝変化を与える
トランス――向こう側へという意味の
行動を示す単語
読みにくく聞かない単語ですが便利なので覚えましょう。
これ単体では意味をなさないので『:hover』と併用します。
しかし、これだけでも表示は少しおかしくなります。
『margin』を使えばいい具合に配置できるでしょうが、今回は別の方法を使いログインのテキストを中央表示させます。
『line-height』＝線の高さ
行間の高さを意味するプログラムです。
このプログラムを使うとテキストが中央配置となり上下に開くので便利です。
またボタンのリンクは『a』を使いますが、この状態ではテキストの行だけをリンクとする為、前回学んだのと同じ『display』を使います。
HTML
<div class=" right">
<a href="URL" class="login">ログイン</a>
</div>
CSS
. right {
float: right;
background-color: rgba(255, 255, 255, 0.3);
transition: all 0.5s;
}
.header-right a {
display: block;
line-height: 65px;
padding-left: 25px;
padding-right: 25px;
color: white;
}
『:hover』に変更はないので省いています。
『transition』は変更するクラスに書き込みます。
『:hover』はカーソルが当たったら色が変わるプログラムなので、そちらに書き込んでもエラーになるだけです。
また、『line-height』はあくまでも行間の高さなので
見て分かる通り左右の幅は調整しなければなりません。
これでヘッダーのレイアウトが終わりました。
最終目的
・勿論手に職を付ける、若しくはお金を稼ぐ
・簡単なゲーム(リバーシや簡易シューティングなど)を作る
・フリーソフトで販売
短期目標
・大まかな流れを覚える
・プログラミングを理解する
上記の内容は覚える中で変わることがあると思います。
