テキストエディタで手軽にウェブサイトを制作・運営する

  1. 初めに
  2. HTML文書の作成
    1. テキストエディタ
    2. HTML文書の成り立ち
    3. HTML文書の雛形
    4. ブロックとなる要素の一例
    5. テキストに意味を付加する要素の一例
    6. 画像や動画を埋め込む
    7. 絶対URLと相対URL
      1. 絶対URL
      2. 相対URL
    8. 文字実体参照
    9. マークアップの実例
    10. HTMLのまとめ
  3. CSSの作成
    1. デザインを提供する
    2. HTML文書にCSSを適用する
    3. CSSの書き方
      1. CSSの構文
      2. Cascading(継承される)
      3. CSSを書く指針の例
        1. 全ての要素のスタイルをリセットする
        2. body要素に文字色・背景色および最大幅を指定する
        3. ブロックとなる要素の上下マージンを指定する
        4. テキストの高さを指定する
        5. 各要素のスタイルを指定する
      4. 特定のブロックやテキストに対するスタイル指定
        1. class属性
        2. id属性
  4. スマートフォン対応サイトにする
    1. スマートフォンでの表示
    2. viewportを設定する
    3. 画像が画面からはみ出すのを防ぐ
    4. CSSの@media規則を利用して切り分けする
    5. YouTube動画を画面横幅いっぱいに表示し且つアスペクト比をキープする
  5. サーバーを確保する
  6. ドメインを取得する
  7. FTPSツールを使う
  8. .htaccess ファイル
  9. BOOKMARKLETS
  10. まとめ
  11. 参考リンク
    1. W3C
      1. HTML
      2. CSS
    2. HTML関連
    3. CSS関連

初めに

最近ではブログ等の便利ツールも一般化し、誰でもウェブ上で手軽に情報発信できるようになりました。HTML(HyperText Markup Language)の知識がなくてもどんどん記事を書きさえすればいいので一気に普及したとも言えます。これは大いに歓迎すべきことです。

しかしながら、ブログ等は便利である一方扱いづらいところもあります。例えば、

といった点です。そういった理由もあって私は当サイトを開設したという経緯があります。

テキストエディタを使ってHTML文書を作成し、FTPツールを使ってアップロードする。この旧来のウェブサイト運営の利点は、

この2点に尽きると思います。手軽にウェブサイトを制作・運営する方法を紹介します。

HTML文書の作成

テキストエディタ

HTML文書を作成するためのテキストエディタを用意します。OS付属のテキストエディタ(Windowsのメモ帳等)でもかまいませんが、

の2点を満たすエディタを選ぶのが良いと思います。私はWindowsでゴリゴリにカスタマイズしたHTML Project2を使っていますが、Windowsなら

もオススメです。

HTML文書の成り立ち

全体のイメージは以下のとおりです。

  1. 文書型(DOCTYPE)宣言
  2. html要素
    1. head要素
    2. body要素
HTML文書の全体構造

HTML文書の雛形

文書型(DOCTYPE)はテキストを書くだけならHTML4.01 Strictで十分ですが、(私自身が勉強する意味も含めて)最新のHTML5の仕様に沿って書いていきます。

<!DOCTYPE html>
    <html lang="ja">
        <head>
            <meta charset="utf-8">
            <title>ここにタイトルを書きます</title>
        </head>
        <body>
            ここにテキストを書いていきます
        </body>
    </html>

1行目は「この文書の文書型(DOCTYPE)はHTML5です」と宣言している部分です。HTML5ではDOCTYPE宣言の表記が非常にシンプルになりました。

次にhtml要素(の開始タグ)では日本語で書かれていることを示すためにlang属性で"ja"を指定します。

そしてhead要素内のmeta要素で、使用している文字コード(charset)が何であるかを示しています。HTML5では utf-8 が推奨されているので、仕様に沿って utf-8 を使っていきましょう。更にtitle要素にはそのページのタイトルを記述します。「本の背表紙に示されているタイトルのようなもの」と考えればいいでしょう。HTMLではtitle要素は絶対省略できないので必ず適切に記述しましょう。

HTML文書作成の肝要は、body要素内に適切な見出しを伴うテキストを書き、それらをブロックに分割する(目印をつける[マークアップする])ことです。そしてブロック内のテキストに作者が意図する意味合いを付加するための目印をつけます。

目印をつける(マークアップする)とは、該当部分を開始タグと終了タグで挟むことです。

<h1>noriya.info</h1>

また、HTML文書のファイルはテキストファイルですが、.htm あるいは .html という拡張子にしておくのが無難です。たいていのWebサーバーはその2つの拡張子のファイルがHTML文書(text/html)であることをブラウザ等に伝えてくれる仕様になっているからです。

ブロックとなる要素の一例

h1〜h6 (heading)
見出し。数字が小さいほど上位の見出しになります。適切に見出しを設定することによって、文書全体の論理構造(アウトライン)を示すことができます。
<h1>noriya.info</h1>

    <h2>Contents</h2>

        <h3>Guitar</h3>
p (paragraph)
パラグラフ。段落です。HTML5ではa block of text with one or more sentences that discuss a particular topic(特定の話題を論じる1つ以上の文章から成るテキストのブロック)と説明されています。
<p>Geoffery Arnold "Jeff" Beck は、イギリス、サリー、ウォリントン出身のギタリストである。</p>

<p>James Marshall Hendrix はアメリカ合衆国のミュージシャン、シンガーソングライター。
ジミ・ヘンドリックス(Jimi Hendrix)の名で親しまれ、日本では「ジミヘン」の略称で呼ばれる。</p>
ul (unordered list)
箇条書き。各項目をli要素(list item)として、それ全体をul要素とします。
<ul>
    <li>Char</li>
    <li>高中正義</li>
    <li>渡辺香津美</li>
</ul>
ol (ordered list)
順序のある箇条書き。各項目をli要素(list item)として、それ全体をol要素とします。
<ol>
    <li>あいうえお</li>
    <li>かきくけこ</li>
    <li>さしすせそ</li>
</ol>
dl (definition list)
定義リスト。例えばある言葉とその言葉の説明を書いている場合にこの目印をつけます。dt (definition term)要素とdd (definition description)要素を示し、それ全体をdl要素とします。
<dl>
    <dt>Jimmy Page</dt>
        <dd>バンド Led Zeppelin のギタリスト</dd>
    <dt>Ritchie Blackmore</dt>
        <dd>バンド Deep Purple のギタリスト</dd>
</dl>
blockquote (long quotation)
他の文書からの引用。ブロックとなる要素を丸ごと引用することになりますので、ブロックとなる要素を更にblockquoteタグで挟む形になります。ネット上の文書から引用した場合、cite属性でURLを示します。
<blockquote cite="http://www.tsurezuregusa.com/index.php?title=%E5%BE%92%E7%84%B6%E8%8D%89%E3%80%80%E5%BA%8F">
    <p>つれづれなるまゝに、日くらし、硯にむかひて、心に移りゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。</p>
</blockquote>
pre (preformatted text)
整形済みテキスト。例えば、テキストエディタで編集中にp要素内で改行したとしても、ブラウザ等で見た場合はその改行は反映されません。一方、pre要素内ではテキストエディタ上の改行がブラウザ等で見た場合にもそのまま反映されます。
<pre>いろいろ書いてきましたが、そろそろこのあたりで改行します。
もうしばらくは改行はしませんよ。しません。しないってば。あ、やっぱり改行します。
ほらね。</pre>
address (information on author)
問い合わせ先情報。自分の名前やメールアドレスを示している部分への目印です。
<address>Noriya : noriyahd28v@gmail.com</address>

テキストに意味を付加する要素の一例

em (emphasis)
強調したい部分をem要素として示します。
<p>ここは<em>必ず試験に出ます</em>のでよく聞いておいてください。</p>
strong
重要性の高い部分をstrong要素として示します。
<p><strong>em要素は重要性を伝えることを意図するものではない</strong>。その目的のためにはstrong要素がより適切である。</p>
abbr (abbreviated form)
省略形の言葉をabbr要素として示します。title属性に省略していない言葉を書いておくと親切です。新しいブラウザなら、マウスカーソルを重ねるとtitle属性に指定したテキストをポップアップしてくれます。
<p>あなた、<abbr title="Social Networking Service">SNS</abbr> やってる?</p>
q (short inline quotation)
blockquote要素とは異なり、テキストの中で短い文を引用する場合にq要素として示します。ネット上の文書から引用した場合、cite属性でURLを示します。
<p>あのさ〜、<q>触らぬ神に祟りなし</q>って言うやん? そっとしておいたほうがイイよ。</p>
a (anchor)
アンカー。いわゆる「リンク」です。href属性にリンク先のURLを示します。リンク先のタイトルとは異なる言葉にリンクを設定する場合は、title属性にリンク先のタイトルを指定すると親切です。
<dl>
    <dt><a href="http://noriya.info/">noriya.info</a></dt>
        <dd>管理人Noriyaが興味を持ったことを纏めたり書きなぐったりするサイトです。</dd>
</dl>

画像や動画を埋め込む

figure
HTML4では画像(img要素)や動画をどうマークアップすればいいのかが不明確でしたが、HTML5では(完全な文章のような)自己完結したものであり、一般的には文書の主要な流れから単一のユニットとして参照される要素としてfigure要素が新しく定義されました。テキストとは独立した形で画像や動画を埋め込む場合はfigure要素としてマークアップすれば問題ないでしょう。
img (embedded image)
画像を埋め込むための要素です。空要素なので内容がないため「テキストをタグで挟む」という形にはならず、終了タグは省略しなければなりません。src属性には画像の(相対)URLを、alt属性には画像が表示されない場合に代わりに表示されるテキストを指定します。またheight属性、width属性にはそれぞれ画像の高さ、幅を指定します。
<figure>
    <img src="../image/20130413_Photo.jpg" alt="ギターを弾く私の写真"  height="640" width="480">
</figure>
iframe
他のウェブサイトのコンテンツを埋め込むための要素です。例えば、YouTubeが動画をHTML5プレーヤーで配信するようになり、埋め込みコードは
<iframe width="560" height="315" src="https://www.youtube.com/embed/Lbnq0EaqoGk"></iframe>
といったFlash Playerを前提としないものに変わりました。自分のウェブサイトにYouTube動画を埋め込みたい時は
<figure>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Lbnq0EaqoGk"></iframe>
</figure>
というようにマークアップすればいいでしょう。なおiframe要素はimg要素とは異なり、終了タグは省略できません。

絶対URLと相対URL

絶対URL

http://で始まるURLは全て絶対URLと言っていいでしょう。インターネットに繋がっていたら誰でもアクセスできるURLです。例えばあなたのサイトから当サイトへリンクする場合は、

<a href="http://noriya.info/">noriya.info</a>

と記述することになります。この http://noriya.info/ が絶対URLです。

相対URL

当サイトのトップページは、

http://noriya.info/

という絶対URLです。またこのページは、

http://noriya.info/web/how_to_run_website_using_text_editor.html

という絶対URLです。それでは、例えば当サイトのトップページからこのページへリンクする場合はどう記述すればいいでしょうか。絶対URLを使って

<a href="http://noriya.info/web/how_to_run_website_using_text_editor.html">テキストエディタで手軽にウェブサイトを制作・運営する</a>

と記述したとしてもリンクは機能します。しかしながら自サイトの他の文書や画像等を参照する場合は絶対URLは使わず、相対URLを使うほうが合理的です。なぜなら、

というメリットがあるからです。相対URLを使うと、

<a href="web/how_to_run_website_using_text_editor.html">テキストエディタで手軽にウェブサイトを制作・運営する</a>

となります。また逆に、このページから当サイトのトップページにリンクする場合は

<a href="../index.html">トップページ</a>

と記述します。../index.html とは「一つ上のフォルダ(ディレクトリ)にある index.html」を参照しています。応用すると、../../index.html と記述すれば「二つ上のフォルダ(ディレクトリ)にある index.html」を参照できます。

文字実体参照

HTML文書を作成する上で、タグ等に使われる文字列を普通にテキストとして表示させたい場合はひと工夫必要です。その文字列とは

の4つです。この4つの文字は単純にこのとおり記述してもブラウザ等は「タグあるいはタグ内の文字列」と解釈するので正しく表示されません。それをきちんと表示できるようにする書き方が文字実体参照です。この4つの文字の文字実体参照による表記方法を覚えておきましょう。

文字列文字実体参照
<&lt;
>&gt;
&&amp;
"&quot;
文字実体参照の記述例
<dd>HTML文書のタグ以外の部分に &lt; &gt; &amp; &quot; を書く場合は文字実体参照を使いましょう。</dd>
表示
HTML文書のタグ以外の部分に < > & " を書く場合は文字実体参照を使いましょう。
注意点
要素の属性値に指定する文字列についても、上記4つの文字列を記述する場合は文字実体参照を使う必要があります。

マークアップの実例

下記のような、とあるギタリストを紹介するHTML文書を作成していると仮定します。

<!DOCTYPE html>
  <html lang="ja">
    <head>
      <meta charset="utf-8">
      <title>Nuno Bettencourt(Guitarist)の紹介</title>
    </head>
  <body>
    Nuno Bettencourt (Guitarist)
      写真
        (ここにNunoの写真を埋め込む)
      略歴
        1966年、ポルトガル生まれ。ギターを始めたのは10歳頃。
        1985年にバンド「EXTREME」を結成、以降4枚のフルアルバムを
        制作したが、1996年に解散。以降はソロ活動、MORNING WIDOWS、
        POPULATION 1、DRAMAGODS等のバンド活動を行なってきた。
        2008年にはEXTREMEを再結成、来日公演も果たしている。
      音楽性
        基本的にはHR、HMといったジャンルの音楽が中心ではあるが、
        楽曲的にはFunkの影響が非常に感じられる。ギターテクニックは
        文句のつけようが無いほど素晴らしく、彼を愛する数多くの
        ギターファンが存在する。
      ディスコグラフィ
        EXTREME
          EXTREME (1989年)
          PORNOGRAFFITTI (1990年)
          III SIDES TO EVERY STORY (1992年)
          WAITING FOR THE PUNCHLINE (1995年)
          SAUDADES DE ROCK (2008年)
        NUNO
          SCHIZOPHONIC (1997年)
        MORNING WIDOWS
          MOURNING WIDOWS (1998年)
          FURNISHED SOULS FOR RENT (2000年)
        POPULATION 1
          POPULATION 1 (2002年)
          Sessions from Room 4 (2004年)
        DRAMAGODS
          LOVE (2005年)
        PERRY FARRELL'S SATELLITE PARTY
          ULTRA PAYLOADED (2007年)
      影響を受けたバンド
        Van Halen
        Queen
      残した名言
        音作りに関して問題なのは機材ではなく指だ。昔エディー
        (VAN HALEN)と仲良くなり全く同じ機材でエディーの曲を
        弾かせてもらったが、同じ音は出なかった。機材のことを
        勉強するより、今の機材のまま自分の指で最高の音を出せる
        まで練習しなよ。
      動画
        (ここにNunoの動画を埋め込む)
      オフィシャルサイト
        Nuno Bettencourt
    </body>
  </html>

先に示したHTML文書の雛形を使い、title要素にタイトルを記述し、body要素に見出しを伴うテキストを書きました。後はbody要素内のテキストに目印をつけていきます。私なら例えば下記のようにマークアップするでしょう。

<!DOCTYPE html>
  <html lang="ja">
    <head>
      <meta charset="utf-8">
      <title>Nuno Bettencourt(Guitarist)の紹介</title>
    </head>
  <body>
    <h1>Nuno Bettencourt (Guitarist)</h1>
      <h2>写真</h2>
        <figure>
          <img src="nuno.jpg" alt="Nuno Bettencourt(2012)" height="604" width="402">
        </figure>
      <h2>略歴</h2>
        <p>1966年、ポルトガル生まれ。ギターを始めたのは10歳頃。
        1985年にバンド「EXTREME」を結成、以降4枚のフルアルバムを
        制作したが、1996年に解散。以降はソロ活動、MORNING WIDOWS、
        POPULATION 1、DRAMAGODS等のバンド活動を行なってきた。
        2008年にはEXTREMEを再結成、来日公演も果たしている。</p>
      <h2>音楽性</h2>
        <p>基本的には<abbr title="Hard Rock">HR</abbr>、<abbr title="Heavy Metal">HM</abbr>
        といったジャンルの音楽が中心ではあるが、楽曲的には<strong>Funkの影響が強く感じられる</strong>。
        ギターテクニックは文句のつけようが無いほど素晴らしく、彼を愛する数多くのギターファンが存在する。</p>
      <h2>ディスコグラフィ</h2>
        <dl>
          <dt>EXTREME</dt>
            <dd>EXTREME (1989年)</dd>
            <dd>PORNOGRAFFITTI (1990年)</dd>
            <dd>III SIDES TO EVERY STORY (1992年)</dd>
            <dd>WAITING FOR THE PUNCHLINE (1995年)</dd>
            <dd>SAUDADES DE ROCK (2008年)</dd>
          <dt>NUNO</dt>
            <dd>SCHIZOPHONIC (1997年)</dd>
          <dt>MORNING WIDOWS</dt>
            <dd>MORNING WIDOWS (1998年)</dd>
            <dd>FURNISHED SOULS FOR RENT (2000年)</dd>
          <dt>POPULATION 1</dt>
            <dd>POPULATION 1 (2002年)</dd>
            <dd>Sessions from Room 4 (2004年)</dd>
          <dt>DRAMAGODS</dt>
            <dd>LOVE (2005年)</dd>
          <dt>PERRY FARRELL'S SATELLITE PARTY</dt>
            <dd>ULTRA PAYLOADED (2007年)</dd>
        </dl>
      <h2>影響を受けたバンド</h2>
        <ul>
          <li>Van Halen</li>
          <li>Queen</li>
        </ul>
      <h2>残した名言</h2>
        <blockquote><p>音作りに関して問題なのは機材ではなく指だ。昔エディー
        (VAN HALEN)と仲良くなり全く同じ機材でエディーの曲を
        弾かせてもらったが、<em>同じ音は出なかった</em>。機材のことを
        勉強するより、今の機材のまま自分の指で最高の音を出せる
        まで練習しなよ。</p></blockquote>
      <h2>動画</h2>
        <figure>
          <iframe src="https://www.youtube.com/embed/JTcLmacrwvI" height="315" width="560" title="Extreme - It's A Monster - Donnington 94 VHS to YouTube HD - YouTube">
          </iframe>
        </figure>
      <h2>オフィシャルサイト</h2>
        <ul>
          <li><a href="https://www.facebook.com/nunorocks">Nuno Bettencourt</a></li>
        </ul>
    </body>
  </html>

body要素内については怖いくらいシンプルであることがわかると思います。シンプルだからこそ手軽に制作・運営できます(出来上がったHTML文書)。一つの例として参考にしてみてください。

注意点
上記ソースでは見やすさを考慮して要素内で改行しているところがありますが、実際にエディタで編集する場合は改行する必要はありません。逆にテキストの途中で改行してしまうとブラウザ等で予期せぬ表示になるケースがあります(pre要素を除く)。

HTMLのまとめ

HTMLでテキストをマークアップする目的は、そのテキストの論理構造(アウトライン)を示したり作成者の意図する意味を付加したりすることです。すなわち、HTMLによってブラウザ等でアクセスした時の表示の仕方(見栄え・デザイン)を指定することはできません。HTMLはデザインするために作られたものではないということを頭に入れておきましょう。そう考えることによって「HTMLは非常にシンプルなものである」と感じられると思います。

CSSの作成

デザインを提供する

これまで説明してきた方法で作成されたHTML文書は仕様に沿っているので、どんなブラウザでアクセスしたとしてもきちんと読める状態にあるはずです。先ほど作成した Nuno Bettencourt(Guitarist)の紹介 という文書も問題なく表示されていると思います。どこが見出しであるのかについても文字の大きさ等で見栄えに差がついているので、見る人が視覚的に把握できるようになっています。HTMLではデザインを指定していないにもかかわらず、ブラウザが各要素をどう表示するのかを決めています。どう表示するのかを決める基準となるもの、それがスタイルシートです。ブラウザは自らのスタイルシートを持っておりそのスタイルシートの指定に沿って表示しているということです。

一方、HTML文書の作成者が自らスタイルシートを用意しHTML文書に適用することも可能です。その時に使われるのが CSS(Cascading Style Sheets) です。下の2つの文書を見比べてください。

  1. Nuno Bettencourt(Guitarist)の紹介
  2. Nuno Bettencourt(Guitarist)の紹介 (当サイトの標準CSSを適用しています)

1番目は先ほど作成した文書そのまま、2番目は1番目の文書に当サイトの標準CSSを適用した文書です。デザインが変化していることがわかると思います。

HTML文書にCSSを適用する

HTML文書と同様にCSSもテキストファイルですが、拡張子は .css としておくのが無難です。これもHTML文書(.htm, .html)と同様に、たいていのWebサーバーが拡張子 .css のファイルを CSS (text/css) であるとブラウザ等に伝えてくれる仕様になっているからです。

HTML文書に自分で作成したCSSを適用したい場合は、HTML文書のhead要素内に例えば以下のようなlink要素を追加します。

<link rel="stylesheet" href="../css/noriya_info.css" type="text/css" media="screen">
rel属性
自分で作ったCSSを標準スタイルシートとしてリンクするために stylesheet を指定します。
href属性
CSSファイルの相対URLを指定します。
type属性 (Content-Type)
CSSの場合は text/css を指定します。
media属性
HTML文書をどんな出力メディアで扱う場合にCSSを適用するのかを指定します。ここでは、screen(Webブラウザ等のコンピュータスクリーン)を指定しています。これ以外の出力メディアの場合はCSSは適用されないということです。print(印刷出力)も指定できますがここでは指定していないので、印刷プレビューや印刷結果にはCSSは適用されません。また全ての出力メディアにCSSを適用したい場合はmedia属性に all だけを指定します。
参考:2.3. Media Types

このlink要素一行を追加するだけでHTML文書に自分で作成したCSSを適用することができます。そしてこれ以降は基本的にHTML文書を編集することなくCSSファイルのみを編集することでHTML文書のデザインを指定できるようになります。

また自サイトの全てのHTML文書に同一のCSSを適用すればサイト全体のデザインを簡単に統一できますし、一つのCSSを編集するだけでサイト全体の模様替えをすることができます。

CSSの書き方

CSSの構文

まずCSSファイルもHTML文書に合わせて文字コードは utf-8 にしておくのが無難です。その場合、CSSファイルの1行目に

@charset "utf-8";

と書いて文字コードを示しておきます。そしてCSSの構文は以下のとおりです。

selector
    {
    property: value;
    property: value;
    property: value;
    ...
    }
selector
セレクタ。日本語で言うと「選択子」が一番近いイメージでしょうか。どこにあるどんな要素にスタイルを指定するのかを選択子として記述します。セレクタに指定する代表的なものは要素名です。例えば h1 と指定します。また、h1, h2, h3 というようにコンマで区切って複数のセレクタを指定することも可能です。
その他セレクタについてはCSS スナップショット 2010をご覧ください。
property
プロパティ。「定義された特性」といった感じでしょうか。
プロパティの一例
例えば上図に示したような、距離や色を定義するプロパティがあります。要素の境界線は border、上下左右の要素との距離は margin、要素の境界線とテキスト部分の距離は padding、背景色は background-color、テキスト部分の高さは line-height というプロパティを指定します。marginpadding は、例えば margin と書けば一度に上下左右全てのマージンを指定できますし、margin-left と書くと左側のマージンだけを指定することができます。
その他プロパティについてはCSS スナップショット 2010をご覧ください。
value
値。プロパティの値を指定します。

具体的な一例を示します。

dd
    {
    font-size: 200%;
    margin-left: 1em;
    background-color: silver;
    text-align: center;
    border: 1px black solid;
    }

上のように書くと、dd要素に対して

  1. フォントの大きさを標準の2倍(200%)にする
  2. 左マージンを1文字分の大きさ(font-size: 200%; を指定しているので標準の2文字分の大きさ)にする
  3. 背景色を銀色(silver)にする
  4. テキストの配置を中央寄せにする
  5. 境界線を1ピクセルの黒い実線にする

といった5つのスタイルを指定したことになります。

上記スタイルを適用したdd要素の表示
dd要素

CSSでの色指定についてはWEB色見本 原色大辞典 - HTMLカラーコードを参考にしてください。

Cascading(継承される)

CSSはスタイルシートですが、Cascading Style Sheets と呼ばれています。この Cascading とは「滝のように上から下へ流れていく」という意味です。すなわち、CSSは親要素に指定したスタイルがその子要素へ引き継がれる(継承される)性質を持っている、ということです。

body
  |---- h1
  |------ h2
  |-------- p - em
  |-------- ul - li
  |-------- blockquote - p - strong

HTMLは上のような階層構造になっています。例えば、

body
    {
    color: #000000;
    }

と指定した場合、color(文字色) は継承性を持つプロパティなので階層下の全ての子(孫)要素に適用されることになります。よって、h1, h2, p, em, ul, li, blockquote, strong といった要素に個別に color を指定しない限りそれらの文字色は原則 #000000 (黒)になります。

ただし全てのプロパティが継承されるわけではなく継承されないプロパティもある、という点を頭に入れておく必要があります。

継承されるプロパティの一例
color
font-style
font-size
font-weight
text-align
継承されないプロパティの一例
background-color
margin
padding
border

CSSを書く指針の例

私の経験から言えることですが、CSSを書いていると収拾がつかなくなりどこに何をどう指定したのかわからなくなる、という状況に陥りがちです。そうならないように、CSSを書く際の一つの指針を書いてみます。

全ての要素のスタイルをリセットする
@charset "utf-8";

*
    {
    font-style: normal;
    font-size: 100%;
    font-weight: normal;
    text-align: left;
    margin: 0;
    padding: 0;
    border: 0 #000000 solid;
    }

* (アスタリスク)は全ての要素にマッチするセレクタ(全称セレクタ)です。つまり全ての要素に対して

  1. フォントのスタイルを正体(斜体ではない)にする
  2. フォントの大きさを標準にする
  3. フォントの画線の太さを標準にする
  4. テキストの配置を左揃えにする
  5. 上下左右の他の要素との距離をゼロにする
  6. 要素の境界線とテキスト部分との距離をゼロにする
  7. 要素の境界線の幅をゼロ(表示しない)、色は黒、線は実線にする

という7つのスタイルを指定しています。

CSSにはもう一つ大きな特徴があります。それは「あるセレクタに一度スタイルを指定したとしても、その後で同一セレクタに別のスタイルを指定すれば上書きされる」ということです。よって上記スタイル指定で各要素のスタイルを一度リセットした後に改めて各要素のスタイルを一つ一つ指定していく方法を採ることで、頭の中を整理しながら自分の考えるスタイルを実現しやすくなるのではないかと思います。

body要素に文字色・背景色および最大幅を指定する
body
    {
    color: #000000;
    background-color: #ffffff;
    max-width: 50em;
    margin: 0 auto;
    }

color で文字色、background-color で背景色を指定します。色は人それぞれ好みがあるので、ここはデザインする人によって様々なスタイル指定がなされるところです。しかしながらテキストを読んでもらうのに最適な色の組み合わせは、本と同じで文字色は黒(#000000)、背景色は白(#ffffff)です。そこを頭に入れて読む人が見辛くならないような色設定にすることをお奨めします。

継承するプロパティ color をbody要素に指定する理由
全称セレクタ(*)に color を指定すると、指定どおり全ての要素に反映されます。しかしながらbody要素へ color を指定した場合はa要素 (リンク)だけは反映されません。リンク色に関してはブラウザの標準スタイルシートと同一にしておくほうがアクセスする人に混乱を与えないだろうと私的に考えています。それを簡単に実現できる方法として採用しています。
継承しないプロパティ background-color をbody要素に指定する理由
background-color の初期値は transparent (親要素の背景色を透きとおして見せる)です。body要素に例えば background-color: #ffffff を指定すると、個別に指定しない限りその子(孫)要素の背景色はbody要素に指定した白(#ffffff)になります。背景色を変えたい要素にだけスタイルを指定すればよいので合理的です。

また全ての要素の marginpadding をゼロに設定したので、body要素はブラウザ等で上下左右の隙間がない状態でスクリーンいっぱいに表示されます。横幅が広くなり過ぎると一行あたりの文字数が多くなり読みにくくなってしまうので、body要素の最大幅を max-width で指定しています。一行あたり最大40〜60文字程度になるようにすると読みやすいのではないかと思います。この指定を行なうことでブラウザ幅を大きく開いた場合であってもbody要素幅は指定した最大値を超えることはありません。そしてbody要素の左右のマージンに auto を指定することにより、常にbody要素が中央寄せで表示されます。

margin: 0 auto;

は値の部分で2つ指定していますが、これは最初の 0margin-topmargin-bottom を、次の automargin-rightmargin-left を指定しています。また

margin: 0 auto 0 auto;

と書いても同じ指定になります。値の部分で4つ指定していますが、これは

  1. margin-top
  2. margin-right
  3. margin-bottom
  4. margin-left

の順で指定しています。こういった書き方を知っているとより効率的に書けるケースが増えるので是非覚えておきましょう。(これらの指定方法は padding においても同様に使えます)

ブロックとなる要素の上下マージンを指定する
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
blockquote,
pre,
address,
table,
div,
figure
    {
    margin: 1.2em 0;
    }

ブロックとなる要素については視覚的に直感で「ここがブロックである」と分かるように、ある程度上下のマージンを確保するようにしています。

テキストの高さを指定する
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
dt,
dd,
pre,
address,
caption,
div
    {
    line-height: 1.5em;
    }

見出し及び通常のテキストを含む要素に line-height を指定します。これにより適切な「行間」を確保することが出来るので見易さに繋がります。

各要素のスタイルを指定する

以上の4つの視点でまずはスタイルを指定してから、次に各要素毎のスタイルを指定するようにすると頭が混乱しなくなると思います。これ以降の各要素のスタイル指定については自由です。ここは皆さんのデザイン力やセンスが問われるところです。

当サイトでは各要素にどういったスタイルを指定したのかを確認するために標準CSSを適用した test.html という文書を作成しています。こういった基本となる要素を全て並べた文書を一つ作っておくと、要素毎のスタイルを確認するのに非常に便利だと思います。

特定のブロックやテキストに対するスタイル指定

ここまでは要素毎にスタイルを指定する方法を書いてきました。したがって、各文書の h1, h2, h3, p, ul, ol, dl といった要素や、em, strong, abbr, a といった要素はそれぞれ統一されたスタイルで表示されます。

しかしながら、「このパターンのdt要素の背景色だけ変えたい」とか「ここのp要素だけは他のp要素とは別のスタイルにしたい」などといったケースが出てくると思います。そういう場合に活躍するのがclass属性そしてid属性です。特定の要素にこれらの属性を追加することにより、スタイル指定のためのセレクタが増えることになります。(ただしここでHTML文書を編集する必要が出てきます)

注意点
後々のHTML文書のメンテナンスを考えると、class属性・id属性共にその名前には視覚的なスタイルを表す言葉ではなく、分類する基準・意味といったものを表す言葉を設定したほうが良いでしょう。
class属性

class属性は、文書内の複数の要素を分類する目的で名前を設定するものです。よって同一文書内に同じ名前のclass属性を複数設定しても問題ありません。

<ul>
    <li>Jimi Hendrix</li>
    <li>Jeff Beck</li>
    <li>Jimmy Page</li>
    <li>Eric Clapton</li>
    <li>Paul McCartney</li>
</ul>

例えば、上記のHTMLソースで左利きのギタリストの背景色だけカーキ色に変えたい、とします。左利きのギタリストを示しているli要素に lefty_hand という名前のclass属性を追加すれば、そのclass属性を持つli要素にだけ別のスタイルを適用することができます。

HTML
<ul>
    <li class="lefty_hand">Jimi Hendrix</li>
    <li>Jeff Beck</li>
    <li>Jimmy Page</li>
    <li>Eric Clapton</li>
    <li class="lefty_hand">Paul McCartney</li>
</ul>
CSS
li[class="lefty_hand"]
    {
    background-color: khaki;
    }
文書の表示
id属性

id属性は、文書内の単一の要素を分類する目的で名前を設定するものです。よって同一文書内に同じ名前のid属性を複数設定することはできません

<ul>
    <li class="lefty_hand">Jimi Hendrix</li>
    <li>Jeff Beck</li>
    <li>Jimmy Page</li>
    <li>Eric Clapton</li>
    <li class="lefty_hand">Paul McCartney</li>
</ul>

上記HTMLソースで、更に自分が一番好きなギタリストの背景色を limegreen にしたい、とします。自分が一番好きなギタリストを示しているli要素に most_favorite_guitarist という名前のid属性を追加すれば、そのid属性を持つli要素にだけ別のスタイルを適用することができます。

HTML
<ul>
    <li class="lefty_hand">Jimi Hendrix</li>
    <li id="most_favorite_guitarist">Jeff Beck</li>
    <li>Jimmy Page</li>
    <li>Eric Clapton</li>
    <li class="lefty_hand">Paul McCartney</li>
</ul>
CSS
li[class="lefty_hand"]
    {
    background-color: khaki;
    }

li[id="most_favorite_guitarist"]
    {
    background-color: limegreen;
    }
文書の表示

スマートフォン対応サイトにする

スマートフォンでの表示

ここまで説明してきたことを理解すれば、独自のCSSを適用したHTML文書を作成することは概ねできると思います。後は慣れが物を言う、ということになります。まずは自分でやってみることをお奨めします。

しかしながら仕様に沿ったHTML文書・CSSを作成したとしても、一般的なPCにインストールされているブラウザで見る分には問題ないのですが、スマートフォンで見ると見辛い表示になることが多いです。スマートフォンの普及率は非常に高くなってきているので、誰もが自分のサイトをスマートフォンでも見易い表示になるようにしておきたい、と考えると思います。

作成したHTML文書をスマートフォンでも問題なく見られるようにする工夫を紹介します。

viewportを設定する

まずHTML文書のhead要素内に以下のmeta要素を追加します。

<meta name="viewport" content="width=device-width">

name属性に viewport を指定します。viewport にはAndroidの標準ブラウザやGoogle Chrome for Android、iPhoneのsafariも対応しています。そしてcontent属性に width=device-width を指定することで、表示幅をアクセスするデバイスの画面幅(を基準)とする指定を行なっています。

こういった表示方法に関する指定は本来はCSSで行なうべきものですが、現状はこの方法しかないようです。将来的にはCSSで指定できるようになるのかもしれません。

画像が画面からはみ出すのを防ぐ

HTMLのimg要素で参照している画像の横幅がブラウザのウインドウ幅より大きい場合は当然ながらブラウザからはみ出して表示されます。そこで、

img
    {
    max-width: 100%;
    height: auto;
    }

とCSSで指定することで、img要素の親要素の幅より大きい画像だけを幅いっぱいに表示させることができます。height: auto を指定することで縦横比も維持されます。

CSSの@media規則を利用して切り分けする

上記2項目の追加変更を行なった後は、スマートフォンでアクセスされた場合にCSSで微調整する(上書きする)設定を行ないます。ここでスマートフォンでアクセスされたか否かをどうやって判断するのかが問題になりますが、CSSの@media規則を利用することで解決できます。具体的には、標準CSSの最終行の後に

    ......................
    ......................
    ...................... /* 標準CSSの最終行 */

@media screen and (max-width:719px) {

    body
        {
        padding: 0 0.5em;
        }

    ......................
    ......................
    ......................

}

と記述することで「出力メディアがコンピュータスクリーンで且つブラウザの横幅が719px以下の場合には以下のスタイルを適用する」という指定を行なうことができます。すなわち、ブラウザの横幅が719px以下の場合はアクセス端末をスマートフォンであると見做して必要な箇所のCSSを上書きする、ということです。こうすることでスマートフォンでは見辛いスタイルを微調整しようというわけです。(719px以下としているのはGoogle Chrome デベロッパーツールのEmulation機能を使って現状最適だと思われる数値にしました)

当サイトの標準CSSへのリンクを示しておきます。@media規則以降を見ていただければどこをどう上書きして微調整しているのかがよくわかると思います。大まかに纏めると

  1. body要素の左右のパディングは必要最小限にする。
  2. 行間はPCで見るよりやや狭くする。
  3. 見出しの文字を大きくし過ぎない。
  4. YouTube動画等は画面の横幅いっぱいに合わせて表示し且つアスペクト比(縦横比)もキープする。

といった点について微調整を行なっています。

  1. Nuno Bettencourt(Guitarist)の紹介 (CSS適用なし)
  2. Nuno Bettencourt(Guitarist)の紹介 (当サイトの標準CSSのみを適用)
  3. Nuno Bettencourt(Guitarist)の紹介 (スマートフォン対策済み)

上の3つの文書をスマートフォンで見比べていただければ理解していただけると思います。

YouTube動画を画面横幅いっぱいに表示し且つアスペクト比をキープする

@media規則以降に以下の指定を行なっています。これはCSS: Elastic Videosで紹介されていた手法で、ある意味裏技的ではあります。

HTML
<figure class="youtube">
    <iframe src="https://www.youtube.com/embed/JTcLmacrwvI" height="315" width="560" title="Extreme - It's A Monster - Donnington 94 VHS to YouTube HD - YouTube">
    </iframe>
</figure>
CSS
figure[class="youtube"]
    {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    }

figure[class="youtube"] iframe
    {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

何をしているのかというと、figure要素自身の高さをゼロにする一方 padding-bottom を横幅の56.25%にしてアスペクト比 16:9 のボックスを作っておき、iframe要素を無理矢理figure要素の下のパディングいっぱいに収まるように配置しています。凄い発想だと思います。

サーバーを確保する

HTML文書やCSSを作成できるようになったら、それらを公開するためにサーバーを確保しましょう。知識のある方は自前でサーバーを立てることもできますが、レンタルサーバーを利用するのが一番手っ取り早いです。無料あるいは有料でサーバーを貸してくれるサービスを利用するのです。

サーバーを選ぶ上でどういったポイントに着目すればいいのかを纏めてみました。

ディスク容量はどれくらいあるか?
これはもちろん大きいほど安心です。ただHTML文書やCSS、画像をアップする程度なら500MBもあればかなりの数の文書を保存できるということも頭に入れておきましょう。要はどんなウェブサイトを作りたいのかで決まってくると思います。
一度にアップロードできるファイルサイズは?
HTML文書やCSS、画像をアップする程度であればあまり気にする必要はないでしょう。しかし動画等の容量の大きいファイルをアップしたい場合は重要になってきます。
FTPS接続が可能か?
かつてはFTP接続が主流でしたが、この通信方式にはユーザー名とパスワードが暗号化されないという脆弱性がありセキュリティ上あまり宜しくありません。FTPの欠点を補った通信方式であるFTPSに対応したサーバーを選びましょう。
広告が表示されるか否か?
無料サーバーの場合は大抵何らかの広告が表示されます。広告が表示されるのは絶対嫌という方は基本的に有料サーバーを選ばざるを得ないです。
サーバー会社の信用度はどうか?
あまりに無名な会社のサーバーは障害発生が多かったり、突然サーバーがなくなる(倒産する)ことも考えられます。長きに渡りサービスを提供してもらえそうなサーバーを選ぶべきでしょう。
独自ドメインを使えるか?
後ほど書きますが、自分のドメインを利用できるかどうかを確認しておくべきです。
.htaccess が利用できるか?
これも後ほど書きますが、.htaccessファイルを使って自分である程度サーバーの設定を行なえるほうが良いです。
無料サーバーの一例
簡単ホームページ作成サービス(無料) - Yahoo!ジオシティーズ
FC2ホームページ - 無料ホームページスペース
無料でホームページを作成するなら|忍者ホームページ

サーバー会社は無数にあります。世評等を参考に選ぶようにしたほうが良いと思います。

ドメインを取得する

無料サーバーにはなんと言っても「無料」という良さがあります。しかしながら様々な制約がある場合が多く、サイト運営に慣れてくるとちょっと物足りないと感じたり広告表示が気になってきたりするものです。そうなると有料サーバーも視野に入ってくることになります。そして有料サーバーは大抵の場合独自ドメインに対応しています。

ドメインとはインターネット上の住所に相当するものです。このドメインを取得し維持管理している限り、そのドメインは世界中で自分だけの唯一のものです。独自ドメインに対応しているサーバーなら、サーバーを移転したとしてもずっと同じ唯一のドメインでウェブサイトを運営することができるので、「URL変更のお知らせ」といったものとは無縁になります。

当サイトは noriya.info というドメインをスタードメインという会社を通じて取得しました。この会社を通じてドメインを取得すると10GBの無料サーバー(スターサーバー)が付いてくる、という点が気に入って契約しました。今はこのスターサーバーで運営しています。平成27年2月21日現在、サーバーの使用容量は176.16MBなのでまだまだ余裕です。スターサーバーの仕様は以下のとおりです。

ディスク容量
10GB
一度にアップロードできるファイルサイズ
無制限
FTPS接続
可能
広告
無し
.htaccess
利用可

これなら単純にウェブサイトを運営するのに特段問題はないと考えました。

ドメイン取得・管理サービスを行なっている会社もこれまた無数にあります。世評等を参考に選ぶようにしたほうが良いと思います。

FTPSツールを使う

HTML文書やCSSが完成しサーバー確保・ドメイン取得ができたら、いよいよHTML文書・CSS・画像等をアップロードします。これが完了すればウェブサイトの運営が開始されたことになります。

FTPSに対応しているサーバーにアップロードする場合、当然ですがFTPSに対応したツールを使う必要があります。FTPSツールもいろいろありますが、私はFTP全盛の大昔からFFFTPというツールを使っています。定番中の定番ツールです。このFFFTPは以前FTPの脆弱性を突いたハッキングのターゲットにされたことがありましたが、その後有志の方によって開発が継続され現在ではFTPSにも対応しています。

FFFTPを起動してまず行なうことは「ホストの設定」です。メニューバーの「接続」→「ホストの設定」を選択します。そして「新規ホスト」をクリックします。

ホスト一覧

すると「ホストの設定」ダイアログが現れます。

ホストの設定

サーバー側から得ている情報は以下のとおりです。

FTPアカウント設定

これらの情報とユーザー名・パスワードを入力し「ホストの設定」を行ないます。

ホストの設定の各項目へ入力

「ホストの設定名」は自分でわかりやすいものにしておきましょう。そして「ローカルの初期フォルダ」は自分のPC内のルートフォルダ、「ホストの初期フォルダ」は「/」としています(この「ホストの初期フォルダ」の設定はサーバーの仕様により異なります)。そして「暗号化」タブにおいてFTPS接続が選択されていることも確認しましょう。

暗号化

以上の点を確認できたらいよいよ接続です。

ホスト一覧から接続

接続に成功したら自分のPC内のファイル(左側)をドラッグアンドドロップでサーバー上(右側)へアップロードします。

FFFTP

このように左右で見比べられるのでわかりやすいですね。これでいよいよサイト運営を開始できたことになります。ブラウザ等でトップページのURLにアクセスしてみましょう。きちんと表示されたら問題なくアップロードできているということです。

.htaccess ファイル

レンタルサーバーで .htaccess ファイルの使用が認められている場合は、サーバーの設定をある程度自分で行なえます。私が現在行なっている設定について書いてみます。

まず .htaccess ファイルはテキストファイルですのでテキストエディタで作成可能です。そしてサーバーのトップディレクトリへアップロードします。.htaccess ファイルでの設定はサブディレクトリへも全て反映されます。また .htaccess ファイルの書き方を間違えるとウェブサイトへアクセスできなくなりますので注意が必要です。現在私が .htaccess ファイルに書いている内容は4行のみです。

DirectoryIndex index.html
AddLanguage ja html
AddType "text/html; charset=utf-8" html
ErrorDocument 404 /404.html
DirectoryIndex index.html
これは例えば http://noriya.info/http://noriya.info/web/ といったディレクトリに直接アクセスした場合にはそのディレクトリ内にある index.html を表示する、という設定です。もちろん index.html 以外のファイルも指定できます。サーバーによってはディレクトリを指定した場合にディレクトリ内のファイルの目次(index)を表示する設定になっていることがあるので、それを回避するための設定です。もし index.html が見つからない場合は Forbidden (アクセス禁止)を返します。
AddLanguage ja html
拡張子 .html のファイルは日本語で書かれています、とブラウザ等へ伝えています。
AddType "text/html; charset=utf-8" html
拡張子 .html のファイルは Content-Typetext/html 、文字コードは utf-8 です、とブラウザ等へ伝えています。HTML文書作成の際にhead要素内に <meta charset="utf-8"> と書いているのだからこんな設定は不要なのではないかと考えるかもしれませんが、meta要素は設定が不十分なサーバーであってもHTML文書の文字コードをブラウザ等が判断できるようにするための補助的なものであり、本来はサーバー側できちんと Content-Type や文字コードを伝える設定をしておくべきです。
ErrorDocument 404 /404.html
これはウェブサイト内で該当がないURLにアクセスされた時に表示するページを指定しています。当サイトでは 404.html というページを用意しています。トップページへのリンクを書いておくとアクセスしてきた人に対し親切だと思います。

.htaccess ファイルには他にも様々な設定項目があります。ただサーバー側では認められていない設定項目もありますので事前に確認しておく必要があります。その他詳細はミケネコの htaccess リファレンスを参考にしてみてください。

BOOKMARKLETS

HTML文書やCSSを作成するにあたり、便利なBOOKMARKLET(ブラウザ等で使える簡単なJavaScript)を紹介します。ブックマーク(お気に入り)バー等へドラッグして保存して使います。

Validate HTML (BOOKMARKLET)
今見ているページのHTMLをThe W3C Markup Validation Serviceで文法チェックすることができます。
Validate CSS (BOOKMARKLET)
今見ているページのCSSをThe W3C CSS Validation Serviceで文法チェックすることができます。
Lint 5 Check (BOOKMARKLET)
今見ているページのHTMLをAnother HTML-Lint 5で文法チェックすることができます。Another HTML-Lint 5はThe W3C Markup Validation Service以上に詳細に文書のチェックを行なうことができます。

まとめ

以上いろいろ書いてきましたが、テキストエディタでウェブサイトを運営するノウハウ、という意味では割りと網羅できているのではないかと思います。

  1. HTMLの本質を理解して文書を作成する
  2. CSSでHTML文書をデザインする
  3. HTML文書の表示をスマートフォンに対応させる
  4. サーバーを確保する
  5. ドメインを取得する
  6. FTPSツールで安全にアップロード

この6つを理解すれば誰でも手軽にウェブサイト運営ができる、それを伝えるのがこの文書の目的です。皆さんにとって少しでも参考になったなら幸いです。

更にHTMLやCSS等の知識を深めるために役立つと思われるサイトを紹介します。

W3C

HTML

CSS

HTML関連

CSS関連


初稿
平成27年1月25日
最終更新
平成27年8月25日
ナビゲーション
noriya.info