【初心者向け】HTML／CSS中級5（完結）
どうもhiroakiです。
今回は前回に続き、ウェブページを作るうえで大切な、HTML言語とCSS言語の中級編についてまとめていきます。説明の部分が多くなりますが、実際にコードを打ちながら試すことが大切です。最後のレッスンです。頑張りましょう。
Lesson19
ここではコードボックス例を作ります。下記のコードボックスを作っていきます。デベロッパーツールで確認すると分かりますが、このコードボックスは下記２つの要素が重なって作られています。
- <div class="code-block HTML">
- <a class="code-name">
通常HTMLでは、このように要素が重なって表示されることはありませんが、positionを使うとそれが可能になります。試しに下記コードをコピペしてみましょう（widthの調節に注意です）。
- /* コード表 */
- .code-block{border:solid;
- border-radius:5px;
- padding:15px 5px 5px;
- width:345px;
- position:relative;}
- .code-block.CSS{float:left;}
- .code-block.HTML{float:right;}
- /* コード表-HTMLCSSなど */
- .code-name{font-size:15px;
- background-color:white;
- border:solid;
- border-radius:5px;
- user-select:none;
- position:absolute;
- top:-15px;
- left:5px;
- z-index:1;}
- .code-table:after{content:"";
- display:block;
- clear:both;}
要素同士を重ねて表示するには「position」にabsoluteを指定します。位置を指定するには、サイト全体の左上を基準としtopとleftの値でずらします。そこにrightやbottomを追加することも可能です。
しかしこれでは、線で囲んだ部分にHTMLの文字がきません。そこで上記のように親要素にrelative、子要素にabsoluteを指定すれば、基準としたい親要素の左上部分を基準位置とできます。
また、positionを使用すると同じZ軸に要素があるため、要素に重なりが生じます。z-indexプロパティでは、要素の重なりの順序を指定できます。 z-indexは整数値で指定し、値が大きいほど上に表示されます。z-indexプロパティは必ずpositionプロパティと併用する必要があるため、注意してください。このほか、x-indexやy-indexもあります。
「user-select」ではnoneを指定して文字のコピーを防ぐことができます。もしサイトで公表したものをコピーされたくない場合は、使用してみてください。
また、「position」に fixedを指定すると、常に要素を画面上の指定した位置に固定させておくことができます。 位置は、top、left、right、bottomを使って指定します。要素の重なりが生じますので、 z-indexで常に上部に表示されるようにしてみましょう。
Lesson20
次はボタンを作ってみたいと思います。下記完成イメージか「気ままに趣味旅行」PC版トップページを参考にしてみてください。PC版の方では実際にボタンをクリックして確かめてみるとイメージが湧くと思います。
完成イメージ：
ボタンは実はこれまでの知識で作れます。
なのでこのレッスンは、実践にしましょう。腕試し、ということで。
まあ、まずは似たような感じで大まかに作れれば合格ですから、考えすぎないで作ってみてください。
ヒント
①文字にリンクを紐づけること。
②displayプロパティで文字をブロック要素に変えること。
③最後にレイアウト等を整えれば完成です。
どうでしょうか。①～③でボタンのようなものが何となく作れた、という人は次に進んでください。
作れなかったという人は挫折しないように、基礎編に戻りましょう。何度もコードを書いて試さないと結局はできるようにはなりません。
Lesson21
では、次に作ったボタンを装飾していきます。先ほどの自分のコードに付け足して試しましょう。
「気ままに趣味旅行」PC版トップページを参考に、①ボタンを押したら②へこんで見えるようにしてください。以下の手順でできます。
①「セレクタ:active{}」と指定することで、要素がクリックされている間だけCSSを適用することができます。
②ボタンを押した際、影を消してボタンの位置を影の分だけ下げるとへこんだように見えます。
・ボックスに影を付けるためにはbox-shadowプロパティを用います。
「セレクタ{box-shadow:(水平方向) (垂直方向) (影の色)}」という風に指定します。ここではbox-shadow: none;で影を消しましょう。
※このように多くのプロパティはnoneを指定することによって消すことができますので、覚えておいてください。
・次に要素の位置を変更する方法です。
「position: relative;」は元の要素の位置を変更するためにも使えます。「セレクタ:active{}」の中で、position: relative;をtopやleftと併用すると、その要素を本来の位置からずらせます。
まずは自分で考えてやってみることが大切です。分からなければ、デベロッパーツールでコードを覗いてみてください。きっとぐちゃぐちゃですけど(笑)
中級編は以上にします。お疲れさまでした。
これで一通りのことができるようになったかと思います。次は実践編に入りたいと思いますが、そこでもまとめつつ進めていくつもりです。ぜひ一緒に学んでいきましょう。
もしこれまでのレッスンで分からない部分が出てきた人はコメントをくだされば、できる限りお答えします。コードは、分からなければ調べる、そして何度も自分でやってみる、人の書いたコードを分析してみる等々が大事だといいます。私の過去記事の中からも参考にしてみてください。
また過去の記事でもCSSがうまく動かない場合について紹介してますので詰まっている人は参考にしてみてください。
私も学びながら進めていますので、分かりにくい部分や誤りもあるかと思いますが、その際はご指摘くだされば嬉しいです。
では。
