はじめに
この記事は、仕事ではなく学校や社会人スクールの課題として、初めて１からwebサイトを制作する方を対象として書いています。
仕事に活かすには他にも学ぶべきことがありますが、まずは１歩、前へ進みましょう！
※webサイトができるまでを段階ごとに4つの記事に分けて書くつもりで、この記事は３記事目です。
【1. 企画】
【2. デザイン】 …未作成
【3. コーディング】
【4. テスト・ 公開 】 …未作成
デザインしたものを、コーディングしていきましょう。
デザインデータがそれぞれ違うと思いますので、共通する部分やポイントなどを書いていきます。
ディレクトリ（フォルダ）の作成
コーディングに使うファイルや素材を管理するために、まずはフォルダを作りましょう。
下のような構造になるようにディレクトリ（フォルダ）を用意しましょう。
※特別な構造でない限りは以下のように分けましょう。
hogehoge.com・・・サイト名やドメイン名をつけたディレクトリ
├ images・・・使う画像をすべて入れるディレクトリ
├ css・・・cssファイルを格納するディレクトリ
├ js・・・javaScriptファイルを格納するディレクトリ
├ favicons・・・faviconを格納するディレクトリ
└ index.html・・・TOPページのhtmlディレクトリついでにindex.htmlも作っておきましょう。
images ディレクトリに画像を移動
デザインデータ（.psd）等から画像を書き出し、images ディレクトリにすべて格納しましょう。
CSSファイルの用意
リセットCSSの用意
『reset.css』というファイルを作り、cssディレクトリの中に格納しましょう。
それから、下のサイトからソースを reset.cssへコピペして保存して下しさい。
また、reset.cssの一番上に
@charset "UTF-8";
を追加しておきましょう。
自分で記述していくCSSファイル の作成
『style.css 』というファイルを作り、cssディレクトリの中に格納しましょう。
javaScriptファイルの作成
ご自身で記述していくjavaScriptファイルを作成します。
『script.js』というファイルを作り、jsディレクトリの中に格納しましょう。
headタグ内を書いていく
各HTMLファイルのheadタグに書くことをまとめました。
まずは一気にコピペ
下のコードをコピペしてください。詳細は後で解説します。
場合によって追加、削除して使ってやってください。
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webサイトのタイトル</title>
<link rel="apple-touch-icon" type="image/png" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/icon-192x192.png">
<meta name="description" content="ここにサイトの概要を書く。">
<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページの種類" />
<meta property="og:url" content="ページのURL" />
<meta property="og:image" content="画像のURL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:description" content="ページの説明" />
<!-- facebookのOGPタグ -->
<meta property="fb:app_id" content="Facebook appId" />
<meta property="og:locale" content="ja_JP" />
<!-- twitterのOGPタグ -->
<meta name="twitter:card" content="カードの種類" />
<meta name="twitter:site" content="@ユーザー名" />
<meta name="twitter:description" content="ページの説明" />
<meta name="twitter:image:src" content="画像のURL" />
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
最低限の項目
文字コードを指定しているタグです。
<meta charset="utf-8">
viewportを指定します。レスポンシブに必須の呪文です。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
サイトの名前を書きます。google検索の結果画面で青い文字で表示されたりします。
<title>webサイトのタイトル</title>
faviconを設定するタグです。
faviconは『様々なファビコンを一括生成。favicon generator』等を使って用意しましょう。
パスは適宜変えてください。
<link rel="apple-touch-icon" type="image/png" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/icon-192x192.png">
サイトの概要を書きます。google検索の結果画面で青い文字の下に表示されたりします。
<meta name="description" content="ここにサイトの概要を書く。">
CSS
リセットCSSとご自身で記述していくCSSファイルを読み込みます。
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
オプション項目
こちらは書かなくても良い項目です。
OGP
SNSでシェアされる際等のために、ogpの設定を書きます。
<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページの種類" />
<meta property="og:url" content="ページのURL" />
<meta property="og:image" content="画像のURL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:description" content="ページの説明" />
<!-- facebookのOGPタグ -->
<meta property="fb:app_id" content="Facebook appId" />
<meta property="og:locale" content="ja_JP" />
<!-- twitterのOGPタグ -->
<meta name="twitter:card" content="カードの種類" />
<meta name="twitter:site" content="@ユーザー名" />
<meta name="twitter:description" content="ページの説明" />
<meta name="twitter:image:src" content="画像のURL" />
書かなくても良い項目と言いましたが、最近は基本的にどのサイトにも書いてあります。
FacebookやTwitterに対応するためには、他にも書き足したり、作業が必要です。
こちらの項目は、いずれ詳しく書こうと思います。
bodyタグの閉じタグの直前に書く
javaScript
ご自身で記述していくjavaScriptファイルを読み込みます。
また、 j QueryやjQueryプラグイン等の読み込みが必要な場合は、 この上に記述してください。
<script src="js/script.js"></script>h
</body>
いざ、コーディング
これで準備は完了です。
各々デザインしたものをコーディングしていきましょう。
コーディングのポイント
スマホファーストかPCファーストか
スマホ版、PC版どちらからコーディングするのか、またメディアクエリの書き方が変わってきます。
とりあえずPCから…とならないようにしましょう。
デベロッパーツールを使おう。
Google Chromeのデベロッパーツールを積極的に使いましょう。
Flexboxを覚えよう。
要素を横に並べたり、上下左右中央配置というやつもできます。
レスポンシブにもすごく向いているものなので、これを機に使いながら覚えていきましょう。
positionを覚えよう。
Flexboxに続いて、CSSでレイアウトする際に大事な要素であり、初心者にとっては壁でもありますね。
こちらも使いながら覚えていきましょう。
さいごに
コーディングが一通り終わったら、最後にテストや修正を行いましょう。
問題なければサイトを公開する流れにになります。
テストの仕方や公開については別途まとめるつもりです。
よろしければ参考にしてください。
