【html/css】よくあるWebページ、結局どう作るの? 第0回

ABOUTこの記事をかいた人

大学でプログラミングを学ぶ→経営に興味を持ち勉強→月2桁は稼ぐフリーランスに→プログラミング初心者向けのオンラインメンタリング Udemy講師もやってます→u0u1.net/MGfz

こんにちは。
web制作に関する情報って、調べるといくらでも出ては来ますよね。margin/paddingの扱い方、flexboxの仕様、要素の中央ぞろえetc…
でも、そういう記事読んでも実際の場面でどう使うかって結局わかんないですよね?

そこで今回は、よくあるWebページの作り方をまるっと書いていこうと思います。質問や、「もっとこうした方が良い」「私はこうしている」などのご意見がありましたらコメントよろしくお願いします!

長くなりそうなので、いくつかのpartに分けます。

では早速本題に入ります。

〜目次〜

制作物の確認

まずは、今回どのようなものを作るかを確認しましょう。

以下のリンクからも確認してみてください。
http://eclair-company.sakura.ne.jp/public_test/common-html-test/

ファイルの準備

作るものが確認できたところで、必要なファイルを準備していきましょう。
フォルダの構成は、以下の通りです。

index.htmlとstyle.cssは基本は次回以降編集していきます。
次に画像を用意します。以下のリンクからダウンロードしてください。
http://eclair-company.sakura.ne.jp/public_test/common-html-test/img.zip

お好きなものを使っていただいても構いません。

ここまでで必要なファイルが全て準備できました。

デフォルトスタイルシートの用意

それでは、style.cssにデフォルトのスタイルを書いていきます。
デフォルトのスタイルとは何かというと、一部のタグのデフォルトの状態を使いやすいように編集したものです。
一般的にはreset.cssと呼ばれるすでに色々と調整されたcssファイルを導入することが多いですが、今回は解説もしたいので自分で書きます。

コードは以下の通りです。順番に説明していきます。

上から順番にいきます。

これは、全ての要素をborder-boxにしています。*(アスタリスク)は全ての要素を表します。
box-sizing: border-box;は何かと言うと、paddingやborderの扱いに関するプロパティです。次の画像のような違いが生まれます。

通常(画像左)は要素に対してpadding、borderをつけると全体のサイズは要素のサイズ+padding、borderのサイズになります。よって、
横は、width200px + padding10px × 2 + border1px × 2
=222px
縦は、height100px + padding10px × 2 + border1px × 2
=122px
となります。

border-box(画像右)の場合は、padding、borderのサイズも合わせてwidth/heightのサイズに収まります。よって横は200px、縦は100pxです。
計算いらずで直感的に数値を指定できるのはborder-boxなので、僕がコーディングするときは基本的にこうしています。

次に行きます。

この2つは関連しているので合わせて説明します。どちらもfont-sizeに関するプロパティを持ちます。何をしているかというと、remという単位を使いやすくしています。remとは、html要素のフォントサイズを基準にその何倍かで指定する単位です。利点としては、端末ごとに基準のfont-sizeが異なる場合がありそれに対応しやすいなどが挙げられます。

html要素のデフォルトの基準は16pxとなっています。このままだとちょっと計算がしづらかったりするので、基準を10pxにするために62.5%にしています。20pxなら2rem、32pxなら3.2remと表現できます。
そしてbody要素では基準はそのまま16pxを使いたいので1.6remにしています。

marginに関しては、デフォルトで入っているものを消すために指定しています。以下のような違いになります。外側に空白がある意味は全くないので必ず指定しましょう。

margin: 0; 指定なし
margin: 0; 指定あり

次はaタグです。

これはaタグをプレーンな状態に変更しています。本来aタグはインライン要素ですが、リンクをつける時に文章中に入れる場合より何らかの要素全体につけたりする場合が多いのでblock要素の方が都合が良いです。
colorはデフォルトで青文字になってしまうのを、text-decorationはリンクの下線を打ち消しています。

最後にimgタグです。

imgタグはなかなか扱いに困るものです。まずは本来inline要素のところをblock要素にします。そしてサイズに関する指定ですが、これは画像が歪みにくいようにするためのものです。親要素にwidthが指定されていれば、その幅いっぱいに広がるように比率を維持して画像が配置されます。そうしないと歪んだりはみ出したりしてしまう場合があります。

これでデフォルトのスタイルは以上です。実際はもっと細かく指定したり、reset.cssを使うことが多いですが、今回の制作物の場合はこれでも十分です。

index.htmlの雛形の準備

最後に、index.htmlの雛形を用意します。

metaタグのviewport設定は、レスポンシブデザインに必要なものです。

次回以降は、header、classがbodyのdiv、footerの中身にそれぞれ追記していきます。

さて、第0回はここまでです。いかがでしたでしょうか。次回はheaderを制作していきます。

【html/css】よくあるWebページ、結局どう作るの? 第1回 〜header(PC版)編〜

2019年2月6日

2 件のコメント

  • お世話になります。このページの、
    第0回~第6回の見出しというか、もくじ

    第4回:トップの画像エリア(PC版)

    は、SP版だと思います。第3回がPC版ですので。

    修正されたら私のコメントは消していただいて構いません。

  • コメントを残す

    メールアドレスが公開されることはありません。

    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください