九回目ーーHTML&CSS、立体ボタン、ヘッダーの固定ーー
今回で中級編最後となります。
次は上級編ですが、今週からMOS検定の為にパソコン教室へ通うことになるので少し勉強が遅れると思います。
次にメイン最後のメッセージを作っていきます。
此処で重要なのは今回習ったカーソルが当たった時に色が変わる、アニメーションで時間経過で変わる、その二つに加え
『影を作り立体的なボタンにする』
という今回の総集編のようなものを作ります。
・全体グループ――message-main
・文字とボタン――text
・テキスト文二行――heading
・ボタン――btn message
全体はこのような構造で作られています。
1.レイアウトについて
特に変わらず、HTMLファイルに上記の構造のグループを『div』を使い作ります。
最後のボタンのグループは以前習った複数クラスの方法を使います。
<div class="message-main">
<!-- ここにコードを書いていきましょう -->
<div class="text">
<div class="heading">
<h2>○○</h2>
<h4>○○</h4>
</div>
<span class="btn message">ボタン</span>
</div>
</div>
こんな感じになります。
headingグループは以前にも使っています。
その時は上下の空白や色の指定を行い、今回も使っている『h2』の文字の太さをノーマルに変更するプログラムをCSSファイルに書きました。
『h2』のCSSは、同じクラス名なので今回の『h2』にも同じように変更が加わり文字の太さが変更されます。
『h4』にも同じように変更を加えたいので、CSSファイルに
.heading h4 {
font-weight: normal;
}
と書き込んでどちらも文字の太さを変更させました。
2.立体的ボタン
もう一度確認します。
立体的なボタンは影を作ることで立体的に見えるようにする。
そして、カーソルを当てた時に形を変えて押し込まれたように見せる様にします。
『box-shadow』=箱の影
そのために使うのがこのプログラムです。
box-shadow: ○(水平方向) ○(垂直方向) カラーコード;
このような形で書くことになります。
また、カーソルが乗った時にカーソルの形を変える方法もあります。
『cursor』=カーソル
そのために使うのがこのプログラムで、ものによっては初期状態で設定されている物があるそうです。
.message {
background-color: #8181F7;
padding: 10px 30px;
}
まず、ボタンの色と大きさを決めます。
そのためのプログラムが上のものとなります。
次に全体を中央表示にしたいので
message-mainに『text-align: center;』と他の全体グループと同じように書き込みます。
そして、『message』の中に
カーソル変更――『cursor: pointer;』
影を付け――『box-shadow: 0 5px #0101DF;』
この二つを書き込みほぼ完成となります。
ほぼ完成なのは、『box-shadow』はあくまでも影を付けるだけに過ぎないからです。
即ち、カーソルを当ててボタンを押しても絵に描いた餅、とまでは言いませんが、押し込まれることはないので変化を付けさせなければいけません。
それをさせるには
・影を消す
・ボタンの位置を影の位置まで下げる
この二つの処理をする必要があります。
そのために必要なのが
『:active』=能動的、積極的、自ら動くという意味
クリックしている時のみCSSを適用させるプログラムです。
影を動かす以外にもカーソルが当たっている時だけ色を変えることも可能です。
影を消すには、影を付ける『box-shadow』を使い
box-shadow: none;
とすることで影を打ち消すことが可能となります。
加えて前回習った『position』を使い影の分だけ動かすことで、あたかもボタンが押されたかのように見せることが出来る様になります。
.message:active {
box-shadow: none;
position: relative;
top: 5px;
}
これで完成となりました。
残りはフッターを作ることとヘッダーの固定です。
フッターはヘッダーで作った画像と同じ横幅指定の固定と文字の大きさを決めるだけなので省略します。
3.ヘッダーの固定
言葉ではわかり難いと思いますが、スクロールしても常に上部にあるヘッダーメニューと思ってください。
それを作るには『position』を再び使います。
今度は『fixed』=固定というそのまんまの単語を使用します。
しかし、このままではヘッダーが一番上の状態とは限らず、スクロールした時に他の画像などが被さってしまうことがあります。
阻止するために重なるものに順番を指定します。
使うのは『z-index』というもので、意味は分かり難いですが
Y軸を奥行き(スクロールの面、画面縦)
X軸を横向き(横スクロール、画面横)とした場合
Z軸は私達の視線の方向となります。
即ち、一番奥を0として私達に近づくほど数字が大きくなることを意味します。
position: fixed;
top: 0;
z-index: 10;
これを『header』に書き込むことで中級編完成となります。
最終目的
・勿論手に職を付ける、若しくはお金を稼ぐ
・簡単なゲーム(リバーシや簡易シューティングなど)を作る
・フリーソフトで販売
短期目標
・大まかな流れを覚える
・プログラミングを理解する
上記の内容は覚える中で変わることがあると思います。