ブログサイト用のHTMLページを作成

まずはHTMLのデザインを作ります。
PHPプログラミングの前に、もう少しHTMLの勉強をしましょう。

サイト構造

サイト構成としては以下のようになります。
-トップページ
 -ブログページ
 -プロフィール
 -お問い合わせ

サンプルHTMLを取得

さっそく以下のzipファイルをダウンロードして、表示してみてください。
step1-020.zip

step1-020-1

zipファイルの解凍はWindowsの標準機能でできますが、Lhaplusなどを使うと便利です。
Lhaplusダウンロードページ

サンプルHTMLの中身

ダウンロードした「step1-020.zip」の中身は以下のようになっています。
適宜修正してみてください。

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>トップ | treiの日記</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>treiの日記</h1>
    <p>
      閲覧ありがとうございます。<br>
      こちらはtreiの日記ページです。
    </p>
    <h2>メニュー</h2>
    <ul>
      <li>
        <a href="blog.html">ブログ</a>
      </li>
      <li>
        <a href="inquiry.html">お問い合わせ</a>
      </li>
    </ul>
  </body>
</html>
blog.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>blog | treiの日記</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>blog</h1>
    <p>
      準備中
    </p>
    <hr>
    <a href="index.html">トップへ戻る</a>
  </body>
</html>
inquiry.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>お問い合わせ | treiの日記</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>お問い合わせ</h1>
    <p>
      準備中
    </p>
    <hr>
    <a href="index.html">トップへ戻る</a>
  </body>
</html>
style.css
body{
  padding: 10px;
}
h1{
  border-bottom: 2px solid #333333;
  margin-top: 0;
  margin-bottom: 20px;
}

index.htmlについて

たとえば、
http://example.com/
http://example.com/blog/
といったディレクトリの直下にアクセスした際に、自動でトップページとして返すファイルとなります。
これは、Webサーバの設定でなされています。
index.html以外にもDefault.htmlなど自由に設定することもできますし、index.phpなどとプログラムを指定することもできます。

ファイルの改行コードについて

テキストファイルを保存するときに、改行コードを指定できることに気づいた方がいるかも知れません。この改行コードについて解説しておきます。

改行コードとは

テキストデータにおける、改行を意味する文字です。
システムによってデフォルトの改行コードが異なります。

改行コードの種類

歴史上の理由で、OSごとに文字コードがばらついている状況です。
LinuxではLF(Line Feed=行送り)を改行コードとして扱っています。
MacではCR(Carriage Return=カーソルを行先頭に戻す)を改行コードとして扱っています。
WindowsではCRLF(上記両方)を改行コードとして扱っています。
それぞれのプラットフォーム上での動作としては全部同じで、『改行して次の行の先頭にカーソルを移動する』というものです。
しかし、プラットフォームシステムで標準となる文字コードにしておかないと、きちんと改行されなかったり、無駄に改行が増えたりします。(LinuxサーバにCRで設置するなど)

また、テキストエディタの設定でデフォルトを指定できます。
実務ではLinuxサーバ上で本番環境を動かすことが多いので、サーバ設置時はLFに統一するようにしましょう。(開発の段階からLFのみで行うことを推奨します)

テキストエディタでの改行コードの確認

通常のテキストエディタで開いてもわかりにくいですが、一応判読できる場合もあります。(バイナリエディタというものを使うとはっきりわかります)
以下はさくらエディタでの例です。

step1-020-2

ブラウザ上の改行

ブラウザでHTMLを表示する際は、改行コードをそのまま出力しても改行はされません。
そのため、HTMLでは<br>という改行を意味するHTMLタグを出力する必要があります。

ブラウザ上で改行されない

ABC\nDEF

ブラウザ上で改行される

ABC<br>DEF
このページをシェア Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn