【初心者向け】HTML／CSS上級1
どうもhiroakiです。
今回はウェブページを作るうえで大切な、HTML言語とCSS言語の上級編についてまとめていきます。ここまでできるようになると、初心者を抜けられます。実践編と合わせて、必要な知識をまとめていきますので、頑張りましょう。
Lesson1
box-sizingプロパティについてまとめます。
ボックスにwidthとheightプロパティの値を指定した場合、その値がボックスの横幅と縦幅を表しています。これはブラウザの標準値では、box-sizingプロパティにcontent-boxの値が指定されているためです。box-sizingにborder-boxを指定すると、widthとheightを指定した値の中に、paddingとborderの値を含めることができます。そのため、paddingやborderを追加した時に生じるレイアウト崩れを未然に防ぐことができます（※ただし、marginはborder-boxでの合計値に含まれません）
なお、 box-sizingはCSS3で新たに追加されたものなので、Firefoxでは「-moz-box-sizing」のようにベンダープレフィックスをつけた記述をしておく必要があります。
ベンダープレフィックスとは、各ブラウザが草案段階のCSSを先行して利用できるように、プロパティや値につける識別子（下表）です。
| -webkit- | Google、Chrome、Safari、(Opera) |
|---|---|
| -moz- | Firefox |
| -ms- | Internet Explorer |
| -o- | Opera |
下のように記述します。
ブラウザによっては、プロパティを正式にサポートするとベンダープレフィックス付きのプロパティは動かなくなる場合もあります。そのため、2.のようにベンダープレフィックスをつけないプロパティの指定は必ず記述するようにしましょう。
右のサイトではCSS3のブラウザサポート状況を確認できます。「Can I use...」(https://caniuse.com/ )
Lesson2
n番目の要素を数えてCSSを指定します。以下の疑似クラスを指定すると、ある要素の中の任意の要素に対してのみ指定できます。nにはeven、odd、2n+1などと指定できます。うまく使いましょう。
| :first-child | ある要素内で最初の要素 |
|---|---|
| :last-child | ある要素内で最後の要素 |
| :nth-child(n) | ある要素内で最初からn番目の要素 |
| :nth-last-child(n) | ある要素内で最後からn番目の要素 |
Lesson3
背景画像を指定する
background-imageプロパティでは、body要素に画像を指定すると、ブラウザの表示領域全面に繰り返して表示されます。
- header{background-image: url("hiroaki.png");
- background-repeat: no-repeat;
- background-position: 10px 20px;}
- footer{background: #ffffff url("") no-repeat 10px 20px;}
「background-image」には「linear-gradient(方向性, 開始色, 終了色)」「を指定することもできます。linear-gradient(to bottom, #ffffff, #3f48cc)」のように使います。
「background-position: (横方向) (縦方向);」と指定すれば背景の位置を移動できます。また、値をcenter、right、left、bottonm、%などで指定することも可能です。
「background-repeat」にはno-repeat、repeat-y、repeat-xなどリピートを指定することが可能です。
Lesson4
vertical-alignプロパティでは、テキストの縦方向を指定できます。
| vertical-alignに指定できる値 | |
|---|---|
| baseline | ベースラインに揃える（初期値） |
| top | 上端に揃える |
| middle | 中央に揃える（小文字の英字の高さの中央：左でいうと、mなどの中央）表などではmiddleが初期値 |
| bottom | 下端に揃える |
| 数値や%で指定 | ベースラインからの距離を指定する |
例えば、画像はインライン要素としてベースラインにそろっていますので、例えば背景を設定してもらうと分かりますが、若干隙間ができてしまいます。これにはvertical-align:bottomと指定することで隙間を無くすことができます。
こちらも参考にしてください。
Lesson5
タイトルと概要をつけましょう。はてなブログでは設定欄が用意されていますので、ヘッダに書き込む必要はありませんが、これを覚えとけば自分でサイトを作る際に役立つので、紹介したいと思います。
- <head>
- <title>気ままに趣味旅行</title>
- <meta name="description" content="自分が興味を持ったことを中心に、情報発信していきます。 世の中の素晴らしいことやその魅力を「拡げる／拡がる」を目標に、読めば元気が出るブログを目指します。">
- </head>
titleとdescription（概要）を入力しておくと、ウェブサイトをインターネットに公開した際、検索サイトのキーワード検索結果に表示されます。適切な内容を入力することで、検索順位も上がるでしょう。また、タイトル名を変えるとタブ名の表示も変わります。
Lesson6
ここでは、ブラウザの画面サイズに応じてCSSのスタイルを設定できる手法（メディアクエリ）を学びます。基礎的な部分を紹介しますので、これからの学習に役立ててください。メディアクエリはスマホやタブレット、PCで表示を変えたい場合に使います。
- <head>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- </head>
- <body>
- <div class="practice-picture">Hello, world!</div>
- </body>
- .practice-picture{color: red;
- width:100px;}
- @media (max-width: 1000px) {
- .practice-picture{width:50%;}
- }
- @media (max-width: 670px) {
- .practice-picture{width:100%;}
- }
レスポンシブデザインを適用するには、まず<head>にviewportを設定しましょう。viewportを設定しないと、スマートフォンやタブレットでの閲覧時にメディアクエリが正しく機能しません。
メディアクエリは、上記のように@media (条件) { .... }という形で書きます。条件が当てはまるときにのみ{ }内のCSSが適用されます。条件には、max-width(最大幅)、またはmin-width(最小幅)を指定できます。
（max-width: ◯px）と指定すると、画面幅が◯pxより小さい時に{}内のCSSを適用できます。min-widthはその逆です。このようにメディアクエリの条件を指定するとき、「◯px」の部分をブレイクポイントといいます。
上記、@メディア内の.practice-picture{width:〇%;}は同セレクタの.practice-picture{width:〇px;}に対しての表示割合になります。レスポンシブデザインを適用すれば、画面幅が小さいときでもコンテンツの大きさを設定できるため、見やすくできます。
メディアクエリについては、また次回以降に補足説明したいと思います。
今回は以上です。
私も学びながら進めていますので、分かりにくい部分や誤りもあるかと思いますが、その際はご指摘くだされば嬉しいです。
では。
