【プログラミング初心者必見】HTML&CSS基礎【これ覚えとけばだいたいOK】

Hello World!!
杉山です。

今日は、初心者必見のだいたいこれだけ覚えておけば模写がスムーズに作成できますよっていうHTMLとCSSの基礎について記事にしていきます。

あくまで、私の私見ですのでやりかたが正しいとか、本来のやり方とは違うとかそういった難しいことはわかりません。
難しい専門書を読んだわけではなく、実際に動かしながら身に付けていったものになりますのでご了承ください。

また、今回の記事でお話するのは、HTMLとCSSに限定します。
フレームワーク(Bootstrap等)も使いませんし、PHPやjQueryに関しても使用しません。

私なりのサイト模写で大事な考え方は以下となります。

  • 要素の組み合わせで考える
  • HTMLを記述する
  • CSSで装飾していく

大まかに言うと、こんな形で模写をしていきます。

要素の組み合わせで考える

まずは、全体像をつかむために、要素の組み合わせで考えます。
今回は、以下のサイトを例に考えていきます。
いわずと知れた、日本の大企業「サントリー」さんのホームページを例に出します。

サントリーホームページ

かっこいいホームページですが、実はこれも簡単に模写することができます。
まず、サイトを拝見して私がすることは要素の組み合わせを頭の中で考えることから始めます。

ホームページは基本的に要素の組み合わせの集合体によりできています。
私はそう考えています。

例として、ヘッダー部分の要素についてみていきましょう。
これが、サントリーのホームページのヘッダー部分です。

まずは、横割りの要素を考えます。
言葉が難しいのですが、私の解釈の仕方で横の要素と呼びます。
ひとつの固まりと思ってもらえるとわかりやすいかもしれません。
このサントリーのホームページのヘッダーで横割りできる要素は全部で3つです。

このように、横の要素を3つにわけます。それを別々に一度考えてみましょう。
まずは、横要素の一つ目。


そして、横要素2つ目。

そして横要素3つ目。

この3つの要素によりヘッダーは作られております。
横要素の分割が終われば、次は縦要素の分割を考えましょう。

横要素1を縦分割していき、固まりを見つけていきましょう。

赤いスペースは、空白になり縦要素はロゴの部分と、メニューの部分です。
まとめると、この横要素1で必要な縦要素は、ロゴの部分と、メニューの部分ということになりますよね。

では、横要素2ではどうでしょうか。

赤く塗ったところは、空白です。
どうやら、横要素2は、縦要素はこのメニューだけの一つだけでよさそうです。

次に、横要素3に関してですが、画面いっぱいに画像が広がっていますのでこれも縦要素はひとつですね。

要素を縦割り、横割りしたことを理解すれば次は実際にHTMLに書いていきましょう。

HTMLを記述する

横要素1では縦要素がふたつありますので、それをまずはHTMLに実際に記述していきましょう。

 

こんな感じで書いていきます。
まずは、横要素1になる、<div>で”yokoyouso”というクラス名を与えて、その中の<div>に”tateyouso-1″と”tateyouso-2″という要素を作ります。

これで、横要素1のHTMLは完成ですね。
これと同じように、横要素2と横要素3のHTMLを書いていってください。
今回は、それを書くと長くなってしまうので割愛します。

今回は、横要素1にフォーカスして書いていきます。
書く流れは同じなので、書いた後それを合体させるイメージですね。
次に、横要素1のHTMLをCSSで装飾していきましょう。

CSSで装飾していく

この横要素1でいうと、まずは縦要素(ロゴ)と縦要素(メニュー)を縦に並べるのではなく横並びにしないといけないですね。

横並びは、私はもっぱらflex-boxを使います。
もし、flex-boxについて詳しく知りたい方は以下のサイトが優良ですので、是非参照ください。

CSSに関してここで深堀するつもりはありませんので、個々でProgateやドットインストールにて勉強して、書いてみてください。

ブラウザで確認しながら、トライ&エラーを繰り返してCSSを記述していきましょう。
CSSが記述できればこれで要素のコーディングは完成です。

要素のコーディングが終わればテトリスのように組み合わせていけば、サイトの模写ができあがります。

まとめ

以上がいちおう、私がサイト模写をしていたときの要素の分割という考え方になります。
それぞれ個人個人で考え方は違うかもしれませんが、これからサイト模写を行う初心者さんの役に立てればなと思って書きました。

長くなりましたが、最後までお読みいただきましてありがとうございます。