表示調整
閉じる
挿絵表示切替ボタン
▼配色
▼行間
▼文字サイズ
▼メニューバー
×閉じる

ブックマークに追加しました

設定
0/400
設定を保存しました
エラーが発生しました
※文字以内
ブックマークを解除しました。

エラーが発生しました。

エラーの原因がわからない場合はヘルプセンターをご確認ください。

ブックマーク機能を使うにはログインしてください。
23/45

九回目ーー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』に書き込むことで中級編完成となります。


最終目的

 ・勿論手に職を付ける、若しくはお金を稼ぐ

 ・簡単なゲーム(リバーシや簡易シューティングなど)を作る

 ・フリーソフトで販売


短期目標

 ・大まかな流れを覚える

 ・プログラミングを理解する


上記の内容は覚える中で変わることがあると思います。

評価をするにはログインしてください。
ブックマークに追加
ブックマーク機能を使うにはログインしてください。
― 新着の感想 ―
このエピソードに感想はまだ書かれていません。
感想一覧
+注意+

特に記載なき場合、掲載されている作品はすべてフィクションであり実在の人物・団体等とは一切関係ありません。
特に記載なき場合、掲載されている作品の著作権は作者にあります(一部作品除く)。
作者以外の方による作品の引用を超える無断転載は禁止しており、行った場合、著作権法の違反となります。

この作品はリンクフリーです。ご自由にリンク(紹介)してください。
この作品はスマートフォン対応です。スマートフォンかパソコンかを自動で判別し、適切なページを表示します。

↑ページトップへ