HTML CSS講座その1

HTML & CSS プログラミング

【第1回】実存するランディングページを一緒に模写してみよう【HTML CSS入門】

更新日:

実存するランディングページをいっしょに模写しよう!

いくらHTML CSSを勉強しても、なぜか「HTML CSSのスキルに自信がない」と思いませんか?

ぼくもまったく同じでした。一人前になってるのか不安……だから勉強するけど、スキルアップしている気がしない……

しかし、勉強ばっかりしていても、スキルはあがりません。スキルアップには、実践がかかせません。プログラミングは、アウトプットして初めて身につくものです。

この連載記事で、ぼくといっしょにランディングページを作っていけば、必ずスキルアップにつながります。

連載第1回の今回は、背景画像の設定、メディアクエリの設定などが目玉です。完成イメージはこちら↓(クリックすると見れます)

See the Pen html-css-making1 by まっわす (@mawwas) on CodePen.

前回の記事『準備編』を読んでいない人は、前回の記事を読んでから、実践をはじめるのがオススメです。

『準備編』では、プログラミングの効率的な勉強方法、練習環境、などについて書いてます。これからの勉強の質をあげる記事なので、ぜひ読んでみてね!>>>【準備編】HTML CSSの書き方|一緒にページを作ってみよう【初心者】

メインビジュアルをつくる【HTML CSS入門】

メインビジュアルをつくりましょう

完成図(PC)

大きな画像を背景に、ロゴマーク。インパクトがあるので多用されています。かっこいいので、つくれると嬉しいよ!

補足

メインビジュアルとは
メインビジュアル(キービジュアル)とは、ウェブサイトや他の媒体において中心となるイメージ画像のことです。 そのため、一番目立つところに大きく配置されます。 また、使用するイメージ画像には、インパクトやメッセージ性が求められます。
出典:キービジュアルとは(説明/解説) - イケサイWeb制作用語辞典

ページを作るときは、モバイル版(スマホ版)のページから作ります。モバイル版ができたら、メディアクエリを使ってパソコン版に対応させます。『モバイルファースト』と言われるやり方です。

補足メディアクエリとは

メディアクエリとは、Webページの見栄えを記述するCSSのバージョン3で追加された仕様の一つで、表示された画面環境に応じて適用するスタイルを切り替える機能。 「表示サイズの幅がこれ以上ならこのスタイルを適用」「画面が横長ならこのスタイルを適用」というように、一つのスタイルシートで複数の画面環境に対応することができる。
出典:メディアクエリ(Media Queries)とは - IT用語辞典

divタグの箱をつくって、CSSレイアウトの設計図にする

超重要作業! ここをちゃんとやっておけば、ページを作るのが楽になります。

初回なので、丁寧に解説しますよ!

divタグの箱って?

CSSのないHTMLは、ただの左寄せ・縦書きの文章の集まりです。HTMLにCSSを対応させて、色をつけたり、配置を整えます。

HTMLのCSSを対応させるとき、Aという部分だけ赤文字にしたくて、Bは背景を黄色にしたいなんてことがあります。

そういう時は、HTMLにclass=A、class=Bと名前をつければ、CSSでAクラスとBクラスそれぞれに色を指定できるんです。

じゃあ、赤文字にしたい文章が10個あったら?
10個の文章それぞれに、class=A、class=A、class=A、class=A……とつけるのは、めんどくさいですよね。

そんなときは、divタグ(意味を持たない要素)で10個の文章をくくって、そのdivタグのCSSに、赤文字になるように指定すればOK。

divタグをつくってCSSを対応させると、HTMLが短くなり、CSSを管理しやすくなるメリットがあります。

実際にやってみましょう。

divタグの箱をつくる【実践編】

divタグの箱を作りましょう

完成像です

featurefirst全体を囲むdivタグの箱を作ります。この箱は背景画像を指定するのにも使います。classはfeaturefirstですね。

次に、ロゴマークとテキストを1つの箱に入れます。これは、縦・横方向の中央寄せに使います。classはfeaturefirst__textboxです。(アンダーバー2本だよ!)

テキストは上から、pタグ、h1タグ、pタグとしました。箱つくりはこれで完成。divタグの箱は必ずメモしておきましょう。あとで見直すときに便利です。

補足:h1タグとは

H1~H6のHとはHeadingの略で、見出しを意味します。
H1が最上位の見出し(大見出し)で、以下数字が小さくなるにつれて下位の見出し(小見出し)となります。
H6が最下位の見出しです。
出典:-HTMLタグリファレンス

補足:pタグとは

pタグはParagraphの略で、Pタグで囲まれた部分がひとつの段落であることを表します。

これでCSSレイアウトの設計図が完成しました。次はHTMLをつくります。サクッといけるぞ!

メインビジュアルのHTMLを書く

CSSレイアウトの設計図をもとに、HTMLを書きます。

HTMLを書くときのコツは、大枠から書くことです。大きなdivタグの箱から作ると構造を把握しやすいです。

逆に、上から1行ずつ書いていくと「今どこのHTML書いてるんだ?」と混乱しちゃうので、オススメしません。タグは閉じてから、中身を書きましょう。

できました。この時点のウェブ上の表示はこんな感じ。CSSがないので殺風景ですね〜。

See the Pen html-css-making1--htmlonly by まっわす (@mawwas) on CodePen.

featurefirstのCSSをつくる

CSSで見た目を変えていきます。

featurefirstのCSSでやらなきゃいけないことは、次の6つ。

  1. 文字サイズ・フォントの設定
  2. 幅・高さの設定
  3. 背景画像をつける
  4. 文字の縦・横の中央寄せ
  5. 上下に余白をつくる
  6. メディアクエリの設定

文字サイズ・フォントの設定

はじめに、ページ全体の文字サイズ・フォントを指定します。そのあと、ロゴの大きさなどを調節しますね。

文字サイズの指定は何種類かあります。知っていれば飛ばしてください。

  • px:ピクセル。絶対値。パソコン表示だろうが、スマホ表示だろうが、文字大きさは変わらない。親要素に左右されないので、使いやすいです。
  • em:親要素の文字の大きさを1emとします。
  • %:親要素の文字の大きさを100%とします。要するにemと同じ。
  • rem:htmlタグに設定された文字サイズを1remとします。

この辺で文字サイズを指定するのが一般的です。

htmlタグのCSSに font-size:10px; を追加。今回は、ページ全体の文字の大きさを10pxにして、中身をremで指定します。

CSS解説font-size:10px;
フォントの大きさを10ピクセルにする。

htmlタグのCSSに font-family:sans-serif; を追記。ページ全体のフォントはsans-serifにします。

CSS解説font-family: sans-serif;
フォントの形式をサンセリフにする。MSゴシック的なやつね。

 

次は、個別にロゴマークなどの文字の大きさを調整していきます。

.featurefirst__text--big のCSSに、下の3つを追加。

  • font-size: 2rem; (フォントの大きさを、htmlタグのフォントの大きさ(10px)の2倍にする)
  • font-weight: bold;(文字を太字にする)
  • margin: 0;(余白の調整)

.featurefirst__logo のCSSに、下の3つを追加。

  • font-size: 8rem;(フォントの大きさを、htmlタグのフォントの大きさ(10px)の8倍にする)
  • padding: 1rem 0;(余白の調整)
  • margin: 0;(余白の調整)

h1タグ(その仲間 h2,h3,h4,h5,h6)は、元から太字です。font-weight: bold; はいらないです。

.featurefirst__text--small のCSSに、つぎの2つを追加

  • font-size: 1.5rem;(フォントの大きさを、htmlタグのフォントの大きさ(10px)の1.5倍にする)
  • font-weight: bold;(太字にする)

幅・高さの設定

htmlタグのCSSに width:100%; と追記。画面の横幅いっぱいに、ページが表示されるようにします。

CSS解説width: 100%
その要素の幅を画面いっぱい(100%)にする。

width をピクセルで設定すると、パソコン版とスマホ版で、画面の大きさが同じになってしまいます。ピクセルは何があろうと、変わらない大きさだからです。

しかし、画面幅いっぱい、100%に表示されるようにすれば、画面より幅が大きくなることはありません。

ちなみに、featurefirst のCSSに width: 100%;と記入する必要はありません。divタグの箱は、親要素(ここではhtmlタグ)の幅と同じだからです。

htmlタグのCSSに box-sizing:border-box; を追記。デザインを作りやすくするものです。詳しくは次回解説予定。

CSS解説

box-sizingプロパティは、ボックスサイズの算出方法を指定する際に使用します。
値にborder-boxを指定すると、widthとheightで指定する幅と高さがボーダーボックスに対して適用されます。 内容領域にパディングとボーダーを含んだ範囲に対して幅と高さが適用されるため、 パディングとボーダーの分だけボックスサイズが小さくなります。
出典:box-sizing-CSS3リファレンス

背景画像をつける

画像は適当な無料素材を使っておきましょう。無料でオシャレな画像をダウンロードするなら、pixabayがオススメです。>>>魅力的なフリー画像 · Pixabay

画像は、html css と同じフォルダに入れておきます。ファイル名はmainVisual.jpgにしました。わかりやすい名前にするのがオススメです。メンテナンスしやすくなります。

背景画像をCSSで指定します。featurefirstのCSSに background-image: url(“mainVisual.jpg”); と追記。見本は違うURLになってますが、これは無視してください。

CSS解説

background-imageプロパティは、背景画像を指定する際に使用します。 BODYタグや TABLEタグだけではなく、Pタグ・ DIVタグ・ SPANタグなどの要素にも背景画像を指定することができます。背景画像はURLで指定します。

featurefirstのCSSに background-size: cover; を追加。

CSS解説background-size: cover;
縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する

文字の中央寄せ

上下左右に文字を中央寄せします。

注意点として、下の2つは別物。

  • divタグの箱を中央寄せにすること
  • テキストの中央揃え

文章だけではわかりにくいので、絵で説明するよ!(画伯)

flexboxは親要素にdisplay flexを設定して使います。

縦・横方向の中央寄せは、flexbox というCSSをつかいます。flexboxは出来ることが多く、とても便利なので、使いこなせるようになりましょう。

まず .featurefirstのCSSに、display: flex; と記入します。こうすると .featurefirst 直下の要素(.featurefirst__textbox)にflexboxが適用されます。

flexboxが適用された要素は、左寄せで横並びになります。今回は要素が1つしかないので、divタグの箱が単に左によっただけですね。

.featurefirstのCSSに、align-items: center; と記入すると、縦方向で中央に揃います。justify-content: center; と記入すると、横方向で中央寄せになりました。

文字列の中央揃えは『text-align: center;』というCSSを使います。

CSS解説text-align: left center right;
テキストの配置を調整する。
left で左揃え
center で中央揃え
right で右揃え

Progate で、テキストの縦方向の中央寄せは『line-height』で調節すると教えてもらえます。しかし、『line-height』による中央寄せは、縦方向に中央寄せする文章が『1行だけ』のときに使えるものです。文章が複数行になると、『line-height』では調節できません。

モバイル版 featurefirst完成!【HTML CSS入門】

できましたヤッター! 画像とテキストだけに見えたけど、なかなかやることが多かったですね。

似たようなページを作るときは、今回作ったものをコピペすると便利です。サボれるところはサボれって、ばっちゃが言ってた。

が、しかし、ところが! いま作ったページは、モバイル版です。パソコン版に対応させないといけません。もうちょっとだけ続くんじゃ。

パソコン版に対応させよう【HTML CSSのメディアクエリ】

今のCSSのままだと、パソコン版では文字が小さいです。見づらいです。

そこで、画面の横幅の大きさが769px以上になったら、文字が大きくなるようにしましょう。

画面の幅が769px以上のときだけ適用するCSSは、次のように書きます。メディアクエリといわれるものです。

@media screen and (min-width:769px){
この中にCSSを書いていきます。
}

ぼくは『769px以上』なのに、『min』なの!? と、大混乱した経験があります。min-width:769pxは『幅の最低値が769pxのとき→769px以上』を意味します。『そこは逆』と覚えてもいいです。そこは逆!

769px以上のとき、文字サイズを大きくしたいので、メディアクエリの中でfont-sizeを指定します。

これで、ブラウザの幅を動かすと……ある幅を境に文字サイズが変わるはずです。

まとめ:メインビジュアル完成!!!【HTML CSS入門】

See the Pen html-css-making1 by まっわす (@mawwas) on CodePen.

できましたわーい! モバイルファーストで制作して、パソコン版の対応もできました。すごいぞ!

次回は featuresecond をつくります。今回より簡単、がんばるぞい!!!

-HTML & CSS, プログラミング
-,

Copyright© zackut , 2019 All Rights Reserved Powered by AFFINGER5.