一から作るWebサイト

自分でHTMLやCSSなどを作成してWebサイトを構築するためのめも。一から作るので自由にカスタマイズでき、WordPressJoomla!(ジュームラ!)などのCMSに比べて不要なものがないので読み込みも軽くて速い。

全てを作るのが面倒な方や、特にデザインに拘りがないなら、WordPressJoomla!(ジュームラ!)などのCMS(コンテンツマネジメントシステム)が便利。

概要

ここでのWebサイト作成では主にPHP、HTML5、CSS3を使用する前提で記載しています。

ページの構成を決める

基本的には1ページをヘッダー、コンテンツエリア、フッターのパーツで細分化して構成します。

ヘッダーやフッターはあまり内容が変わらないので、1ページごとに作成するのではなく、 1つのヘッダー、フッターを作成し、各コンテンツエリアの前後に挿入するかたちで使います。

コンテンツエリアではサブコンテンツがあったり、コンテンツ内容が多い場合には表示する列数(カラム数)を増やして2カラムや3カラムにします。

サポートするWebブラウザを決める

新しいWebブラウザでは問題なく表示されても、古いWebブラウザでは新しい機能に対応していなくて表示が崩れてまともに閲覧できないことがあります。

古いWebブラウザを利用している割合は少なく、いずれ新しいWebブラウザに切り替わるので切り捨ててもいいですが、切り捨てない場合には対策が必要です。

  • フレキシブルなレスポンシブWebデザインを作成するのにCSS3から使えるMedia Queriesを使用する場合、IE8以下では標準で対応していません。 css3-mediaqueries.jsを利用することで対応するがスタイルシートより先に記述しないと機能しない。さらに記述でmedia type(allやscreen等)を省略すると機能しない。
  • HTML5で追加された新要素の一部はIE8以下は標準で対応していません。 html5shiv.min.jsを利用することで対応するが、タグより前、またタグにスタイルを使用しているならスタイルシートのリンクより先に記述しないと、レイアウトが崩れます。
  • CSS3から使えるFlexboxでコンテンツのレイアウトを作成した場合、IE9以下では標準で対応していないし、 IE10やAndroid 4.x系(4.3以下)の標準Webブラウザ、iOSのSafari 6.1以下などでも一部未対応です。 IE8や9はflexibility.jsを利用してベンダープレフィックス-js-display: flex;を付けることで対応。IE10やAndroid 4.x系、iOSのSafari 6.1以下はベンダープレフィックスを付けることで対応。
  • メニューなどを作成するのにjQueryを利用した場合、IE8以下はjQuery 1.X系しか対応してない。jQuery 3.X系はAndroid 2.x系、iOSのSafari 6.1以下は未対応。
IE10以下やiOSのSafari 6.1以下は切り捨ててもいいと思いますが、Android 4.x系(4.3以下)はスマホメインのサイトならサポートしておいた方がいいかも。

ドメインとサーバーを決める

Webサイトを公開するドメイン(サイトの住所)とサーバー(サイトの保管場所)を決めます。

HTMLとCSS、フロントエンドのJavaScriptや画像ファイルなどしか使っていないのならば無料のWebスペースサービスなどでもいいですが、 サーバーサイドのJavaScript(Node.js)やPHP、Perlなどを使用するのであれば、それらが利用可能なサーバーにしなければなりません。

自作のサイトだけでなく、別サイトでWordPressを使ってみたい場合にもPHPやMySQLが利用できるサーバーが必要です。

自作サーバーも作るというのでないなら素直にドメインを取得してレンタルサーバーを利用するのが無難です。

その他の設定

サイト通知

Googleに通知Googleアカウント要
Bingに通知

構造化データ

ヘッダーの作成

ヘッダーはWebブラウザやクローラーへ伝達するための基本構成情報や、閲覧者側に表示されるサイトタイトルやキャッチコピー、サイトアイコンやグローバルメニューなどサイトの顔となる重要な情報が集約された部分です。

ヘッダー、コンテンツ、フッターの内容を一つのファイルで作成しても問題なく動作しますが、ヘッダーやフッターに当たる部分の内容はどんなコンテンツ内容にしても殆ど変わらないので、コンテンツ部分とは切り分けて作成しておいた方が後々の編集もしやすくなります。

ここではheader.phpとして作成します。

構成情報

HTMLへの記述1 ~ </head>まで


<!DOCTYPE html>/* このファイルがHTML5で作成されたものであることを宣言 */
<html lang="ja">/* HTMLの記述開始とこのサイト使用されている言語を指定 */
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">/* SNS向けOGPを使うための宣言 */
<meta charset="UTF-8">/* 文字エンコーディングの指定 */
<meta name="viewport" content="width=device-width,initial-scale=1">/* 表示領域を等倍に設定 */
<meta name="description" content="簡単なページの説明文">
<meta name="msapplication-TileImage" content="144ピクセル四方以上のWindows向けピン留め画像ファイル(png)のURL">
<meta name="twitter:card" content="summary_large_image">/* Twitter用のOGPで使用 */
<meta property="og:title" content="ページのタイトル">/* OGPで必須 */
<meta property="og:type" content="website">/* OGPで必須。トップページならwebsite、それ以外はarticle */
<meta property="og:image" content="サムネイル画像のURL">/* OGPで必須 */
<meta property="og:url" content="ページのURL">/* OGPで必須 */
<meta property="og:site_name" content="サイト名">/* OGPで使用 */
<meta property="og:description" content="簡単なページの説明文">/* OGPで使用 */
<meta property="fb:app_id" content="FacebookアプリのID">/* Facebook用のOGPで使用 */
<link rel="shortcut icon" href="アイコンファイル(favicon.ico)のURL">
<link rel="apple-touch-icon" sizes="180x180" href="スマホ向けアイコンファイル(apple-touch-icon.png)のURL">
<link rel="stylesheet" href="CSSファイル(style.css)のURL">
<title>ページのタイトル</title>
</head>

ブラウザで表示されるヘッダーの構成

ヘッダーで表示するものはサイトタイトルとグローバルメニュー。あとは個々の設定でキャッチコピーやSNSボタンなど。 レイアウトは各項目を柔軟に変更できるようFlexboxで構成します。

HTMLへの記述2 ~ </header>まで


<body>
<header>
  <div id="site_title">
    <a>サイト名</a>
    <p>キャッチコピー</p>
  </div>
  
  <div class="header_r">
  SNSボタンなど必要なら
  </div>
  
  <nav>
    <ul class="g_menu">
      <li><a href="トップページのURL">Home</a>
      <li><a href="URL">メニューA</a>
        <ul>
          <li><a href="URL">子メニューA-1</a>
        </ul>
      <li><a href="URL">メニューB</a>
    </ul>
  </nav>
</header>
現時点でのブラウザ表示(背景色のみ付け加えています。以下同様)
サイト名

キャッチコピー

SNSボタンなど必要なら

スタイルシートへの記述1

別ファイルにstyle.cssとして記述するか、<head>タグ内で<style>から</style>の間で直接記述。

header{
  display:flex;/* 要素をFlexboxに定義 */
  justify-content:space-between;/* アイテムの間にスペースを均等に割り付け */
  flex-wrap:wrap;/* 子要素が要素の横幅を超えたら折り返す */
}
.nav{
  width:100%;/* 折り返すために横幅100%を設定 */
}
.nav ul{
  list-style-type:none;/* リストマーク非表示 */
  padding:0;/* リストマークの余白削除 */
}
.g_menu{
  display:flex;/* 要素をFlexboxに定義 */
  justify-content:space-around;/* アイテムの両端にもスペースを均等に割り付け */
}
現時点でのブラウザ表示
サイト名

キャッチコピー

SNSボタンなど必要なら

メニューをカスタマイズ

子メニューがある場合、親メニューの下に表示されてしまうのでドロップダウンメニューにして、子メニュー以下を隠す。 フッターにはコピーライトやお問い合わせフォームなどコンテンツと直接は関係していないものを記述したり、 ファーストビューの読み込みを速めるために後回しでも問題のないCSSやJavaScriptを記述。

コンテンツエリアの作成

レスポンシブウェブデザイン

Webフォントを使用する

外部サーバーから読み込む

CSSに以下を記述

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
html { font-family: "Noto Sans Japanese"}
※URLやフォント名Noto Sans Japaneseは使用するものによって変更。

サイトにWebフォントをアップして読み込む

  1. 使用するフォントをダウンロード
    Noto Sans JP
    Rounded M+
  2. サブセット化
    サブセットフォントメーカーで使用するフォントを厳選し、 WOFFコンバータでwoffファイルに変換。

    抜き出すフォントのサンプル(第一水準漢字、ひらがな、カタカナ、記号をまとめたもの)
  3. CSSに以下を記述
    @font-face {font-family:'NotoSansJP';src: url('WebフォントをアップしたURL')}
    html { font-family:'フォント名',sans-serif }

装飾

線形グラデーション

background-image: linear-gradient(45deg, #f4f9ff 25%, transparent 25%, transparent 75%, #f4f9ff 75%, #f4f9ff), linear-gradient(45deg, #f4f9ff 25%, transparent 25%, transparent 75%, #f4f9ff 75%, #f4f9ff); background-position: 0 0, 50px 50px; background-size: 100px 100px;

TOPへ
戻る