まずはHTMLのデザインを作ります。
PHPプログラミングの前に、もう少しHTMLの勉強をしましょう。
サイト構造
サイト構成としては以下のようになります。
-トップページ
-ブログページ
-プロフィール
-お問い合わせ
サンプルHTMLを取得
さっそく以下のzipファイルをダウンロードして、表示してみてください。
step1-020.zip
zipファイルの解凍はWindowsの標準機能でできますが、Lhaplusなどを使うと便利です。
Lhaplusダウンロードページ
サンプルHTMLの中身
ダウンロードした「step1-020.zip」の中身は以下のようになっています。
適宜修正してみてください。
<!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>
<!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>
<!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>
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のみで行うことを推奨します)
テキストエディタでの改行コードの確認
通常のテキストエディタで開いてもわかりにくいですが、一応判読できる場合もあります。(バイナリエディタというものを使うとはっきりわかります)
以下はさくらエディタでの例です。
ブラウザ上の改行
ブラウザでHTMLを表示する際は、改行コードをそのまま出力しても改行はされません。
そのため、HTMLでは<br>という改行を意味するHTMLタグを出力する必要があります。
ブラウザ上で改行されない
ABC\nDEF
ブラウザ上で改行される
ABC<br>DEF