【初心者向け】効率UP!実践で使えるコーディングの手順(HTML/CSS編)

896view

【初心者向け】効率UP!実践で使えるコーディングの手順(HTML/CSS編)

Webサイトのコーディングを勉強をしているけど、実際やってみると「何から始めればいいのかわからない」「この方法や手順で合っているのか?」「プロはどんな風にやっているのか?

こういった疑問や悩みにお答えします。

この記事を書いている私は、現在(2020年)Webデザイナー兼フロントエンドエンジニアとして8年目になります。
私も最初の頃は、独学でWebを学んだため疑問や悩みだらけで悶々とした日々を過ごしていました。

疑問を抱いたままコーディングを進めて何度もやり直しをしていたら時間がもったいないですよね。。
今回はHTML/CSSをメインに効率のいい基本的なコーディングの手順を解説していきます。

今回作るWebサイトの例

こんな感じのよくありそうなサイトを例に解説していきます。

STEP1:ファイル、フォルダを作る

まず初めにサイト名を決めてフォルダを作成します。サイト名はなんでも構いませんが.comなどのドメイン名まで付けてあげるとサイトのフォルダだと分かりやすいです。また今後新しくサイトを作ったとしても、ドメインが違うので同じ名前がかぶることがありません。

先ほど作った、サイト名のフォルダの中に「index.html」と「assets」のフォルダを用意しましょう。
assetsの意味は「複数形で財産・資産」などという意味で主にhtml以外をまとめるフォルダとして使っています。
なぜassetsのフォルダにまとめているかと言うと、単純によくいじるファイルを一つにまとめておけば、そこだけをいじるればいいので管理が楽になるからです。

「assets」のフォルダには、「css」のフォルダとその中にcommon.cssやtop.cssを入れます。「imgs」のフォルダには画像を入れていきます。

下記のような感じです。

通常Webサイトを作ると最低でも3ページ以上(NEWS、CONTACT、ABOUTなど)あるのが普通ですので、上記がサイトのページが増える事も想定したファイル構成になります。
この辺りのフォルダ構成(ディレクトリ構成ともいう)は、あらゆるサイトを経験してかなり試行錯誤した結果なのでマネをして損はしないはずです

STEP2:ベースとなるHTMLを書く

実際にコーディングをしていきます。まずはindex.htmlにベースとなるコードを書いていきます。
下記は普段、私が仕事で実際に使っているコードの一部です。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- meta -->
	<meta charset="utf-8">
	<meta name="description" content="%ページの紹介文が入ります%">
	<meta property="og:title" content="%SNSに表示されるページのタイトルが入ります%">
	<meta property="og:type" content="website">
	<meta property="og:site_name" content="%サイト名が入ります%">
	<meta property="og:description" content="%SNSに表示されるページの紹介文が入ります%">
	<meta property="og:url" content="https://○○○○○○○○">
	<meta property="og:image" content="https://○○○○○○○○/ogp.png">
	<meta name="twitter:title" content="%twitterでシェアされたときのタイトル%">
	<meta name="twitter:card" content="summary_large_image">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
	<meta name="format-detection" content="telephone=no">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- title -->
	<title></title>
<!-- css -->
	<link rel="stylesheet" media="all" href="/assets/css/common.css">
	<link rel="stylesheet" media="all" href="/assets/css/top.css">
</head>

<body>
	<!-- ここにサイト表示される内容が入ります -->
</body>
</html>

head内の意味を簡単に解説

  • meta charset=”utf-8″→文字エンコーディング。通常は「UTF-8」でOK
  • meta name=”description”→ページの紹介文。Googleの検索結果に表示されます
  • meta property=”og:title”→SNSでシェアされたときのページタイトル
  • meta property=”og:type”→ページのタイプ TOPページはwebsite、それ以外のページはarticleに設定しています
  • meta property=”og:site_name”→サイトの名前
  • meta property=”og:description”→SNSでシェアされたときのページの紹介文
  • meta property=”og:url”→SNSでシェアされたときのページのURL
  • meta property=”og:image”→SNSでシェアされたときのサムネイル画像
  • meta name=”twitter:title”→twitterでシェアされたときのタイトル
  • meta name=”twitter:card”→twitterでシェアされたときのTwitterカードの画像のサイズ
  • meta name=”viewport”→レスポンシブに対応させるためのもの
  • meta name=”format-detection”→電話番号の自動リンク機能を制御。意図しないリンクが貼られてしまうので基本オフにしています
  • title→ページのタイトル。Googleの検索結果に表示されます

STEP3:レイアウトを確認する

次にデザインのレイアウトがどうなっているか確認しましょう。
Webサイトは基本ブロックやパーツの積み重ねになります。ブロックやパーツで考えるとイメージができて、コーディングが楽になります。
まずは大きなブロックで考えてみましょう。

上記のような感じでデザインやプリントアウトした紙に直接メモをすると分かりやすくなります。私も最初の頃はプリントアウトして手書きで枠とCSSの名前を書いていました。全体像が把握できて迷わずにコーディングができるので初心者の方にはおすすめです。

STEP4:HTMLでレイアウト部分のマークアップ

全体が把握できたら、body内に書いていきます。bodyは実際にサイトに表示される部分です。
「STEP3:レイアウトを確認する」で書いた通りに記述していきます。

index.html
<div class="wrapper">
	<header class="header">header</header>
	<div class="content">
		<div class="fv">fv</div>
		<section class="section">section</section>
	</div>
	<footer class="footer">footer</footer>
</div>

タグの中身はとりあえず適当でOKです。

STEP5:CSSでレイアウト部分の装飾

次に先ほど、マークアップした部分にCSSで装飾していきます。最初はブロックごとに背景に色をつけるのがおすすめです。

CSS
.wrapper {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.header {
  background: #e3007f;
}
.content {
  background: #faed00;
  padding: 20px;
}
.fv {
  background: #009fe8
}
.section {
  background: #f29600
}
.footer {
  background: #1eaa39;
}

背景色が付くと見た目が分かりやすくなるのはもちろん、クラス名やid名が間違っていてCSSを書いても書いても反映されないという無駄な作業をしないためです。CSSが適用されてないのが一発でわかる背景色を最初はとりあえず付けてみましょう。

こんな感じになります。

See the Pen HTML+CSS by kiyoaki watanabe (@watakiyo) on CodePen.dark

おすすめの背景色は#cccです。#cccはグレーのため白背景でも黒背景でも見える色だからです。また#cccなどのカラーコードじゃなくてもredやblueといった指定でもできます。

STEP6:各パーツのHTMLマークアップ+CSSスタイリング

ここまできたら後は各ブロック毎にSTEP3〜5の要領でマークアップしていけばOKです。
ただ、各ブロックのCSSの名前を決めるのが結構時間かかるんですよね。。(未だに迷うこともあります。。)
下記の図のようにブロックをさらにブロックに分けて考えていくと名前も付けやすく頭が整理されコーディングが楽になっていくと思います。

1つ1つのブロックを着実に仕上げていくと効率もスピードもグッっとUPします!

まとめ

最初のうちはメモしたりして時間はかかるかもしれませんが、頭が整理されミスが少なくなると思います。慣れてきたらメモなしで、デザインを見ただけで構造を判断しマークアップを一通りすべてしてしまって最後にCSSで装飾といった技もできるようになります。

今回は基本の手順ということで細かいコーディングの仕方は省きましたが、HTMLもCSSも奥が深いのでまた後日紹介して行きたいと思います。

ってことで今回は以上です。少しでも参考になれば幸いです。

人気記事

この記事をシェアする