最近ではブログ等の便利ツールも一般化し、誰でもウェブ上で手軽に情報発信できるようになりました。HTML(HyperText Markup Language)の知識がなくてもどんどん記事を書きさえすればいいので一気に普及したとも言えます。これは大いに歓迎すべきことです。
しかしながら、ブログ等は便利である一方扱いづらいところもあります。例えば、
といった点です。そういった理由もあって私は当サイトを開設したという経緯があります。
テキストエディタを使ってHTML文書を作成し、FTPツールを使ってアップロードする。この旧来のウェブサイト運営の利点は、
この2点に尽きると思います。手軽にウェブサイトを制作・運営する方法を紹介します。
HTML文書を作成するためのテキストエディタを用意します。OS付属のテキストエディタ（Windowsのメモ帳等）でもかまいませんが、
utf-8 に対応しているの2点を満たすエディタを選ぶのが良いと思います。私はWindowsでゴリゴリにカスタマイズしたHTML Project2を使っていますが、Windowsなら
もオススメです。
全体のイメージは以下のとおりです。
文書型(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>noriya.info</h1>
<h2>Contents</h2>
<h3>Guitar</h3>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>
<li>Char</li>
<li>高中正義</li>
<li>渡辺香津美</li>
</ul><ol>
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ol><dl>
<dt>Jimmy Page</dt>
<dd>バンド Led Zeppelin のギタリスト</dd>
<dt>Ritchie Blackmore</dt>
<dd>バンド Deep Purple のギタリスト</dd>
</dl><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>いろいろ書いてきましたが、そろそろこのあたりで改行します。
もうしばらくは改行はしませんよ。しません。しないってば。あ、やっぱり改行します。
ほらね。</pre><address>Noriya : noriyahd28v@gmail.com</address><p>ここは<em>必ず試験に出ます</em>のでよく聞いておいてください。</p><p><strong>em要素は重要性を伝えることを意図するものではない</strong>。その目的のためにはstrong要素がより適切である。</p><p>あなた、<abbr title="Social Networking Service">SNS</abbr> やってる？</p><p>あのさ〜、<q>触らぬ神に祟りなし</q>って言うやん？ そっとしておいたほうがイイよ。</p><dl>
<dt><a href="http://noriya.info/">noriya.info</a></dt>
<dd>管理人Noriyaが興味を持ったことを纏めたり書きなぐったりするサイトです。</dd>
</dl>(完全な文章のような)自己完結したものであり、一般的には文書の主要な流れから単一のユニットとして参照される要素としてfigure要素が新しく定義されました。テキストとは独立した形で画像や動画を埋め込む場合はfigure要素としてマークアップすれば問題ないでしょう。
<figure>
<img src="../image/20130413_Photo.jpg" alt="ギターを弾く私の写真" height="640" width="480">
</figure><iframe width="560" height="315" src="https://www.youtube.com/embed/Lbnq0EaqoGk"></iframe><figure>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Lbnq0EaqoGk"></iframe>
</figure>http://で始まるURLは全て絶対URLと言っていいでしょう。インターネットに繋がっていたら誰でもアクセスできるURLです。例えばあなたのサイトから当サイトへリンクする場合は、
<a href="http://noriya.info/">noriya.info</a>と記述することになります。この http://noriya.info/ が絶対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つの文字の文字実体参照による表記方法を覚えておきましょう。
| 文字列 | 文字実体参照 |
|---|---|
| < | < |
| > | > |
| & | & |
| " | " |
<dd>HTML文書のタグ以外の部分に < > & " を書く場合は文字実体参照を使いましょう。</dd>下記のような、とあるギタリストを紹介する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文書)。一つの例として参考にしてみてください。
HTMLでテキストをマークアップする目的は、そのテキストの論理構造(アウトライン)を示したり作成者の意図する意味を付加したりすることです。すなわち、HTMLによってブラウザ等でアクセスした時の表示の仕方(見栄え・デザイン)を指定することはできません。HTMLはデザインするために作られたものではないということを頭に入れておきましょう。そう考えることによって「HTMLは非常にシンプルなものである」と感じられると思います。
これまで説明してきた方法で作成されたHTML文書は仕様に沿っているので、どんなブラウザでアクセスしたとしてもきちんと読める状態にあるはずです。先ほど作成した Nuno Bettencourt(Guitarist)の紹介 という文書も問題なく表示されていると思います。どこが見出しであるのかについても文字の大きさ等で見栄えに差がついているので、見る人が視覚的に把握できるようになっています。HTMLではデザインを指定していないにもかかわらず、ブラウザが各要素をどう表示するのかを決めています。どう表示するのかを決める基準となるもの、それがスタイルシートです。ブラウザは自らのスタイルシートを持っておりそのスタイルシートの指定に沿って表示しているということです。
一方、HTML文書の作成者が自らスタイルシートを用意しHTML文書に適用することも可能です。その時に使われるのが CSS(Cascading Style Sheets) です。下の2つの文書を見比べてください。
1番目は先ほど作成した文書そのまま、2番目は1番目の文書に当サイトの標準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">stylesheet を指定します。text/css を指定します。print(印刷出力)も指定できますがここでは指定していないので、印刷プレビューや印刷結果にはCSSは適用されません。また全ての出力メディアにCSSを適用したい場合はmedia属性に all だけを指定します。このlink要素一行を追加するだけでHTML文書に自分で作成したCSSを適用することができます。そしてこれ以降は基本的にHTML文書を編集することなくCSSファイルのみを編集することでHTML文書のデザインを指定できるようになります。
また自サイトの全てのHTML文書に同一のCSSを適用すればサイト全体のデザインを簡単に統一できますし、一つのCSSを編集するだけでサイト全体の模様替えをすることができます。
まずCSSファイルもHTML文書に合わせて文字コードは utf-8 にしておくのが無難です。その場合、CSSファイルの1行目に
@charset "utf-8";と書いて文字コードを示しておきます。そしてCSSの構文は以下のとおりです。
selector
{
property: value;
property: value;
property: value;
...
}h1 と指定します。また、h1, h2, h3 というようにコンマで区切って複数のセレクタを指定することも可能です。
border、上下左右の要素との距離は margin、要素の境界線とテキスト部分の距離は padding、背景色は background-color、テキスト部分の高さは line-height というプロパティを指定します。margin と padding は、例えば margin と書けば一度に上下左右全てのマージンを指定できますし、margin-left と書くと左側のマージンだけを指定することができます。具体的な一例を示します。
dd
{
font-size: 200%;
margin-left: 1em;
background-color: silver;
text-align: center;
border: 1px black solid;
}上のように書くと、dd要素に対して
font-size: 200%; を指定しているので標準の2文字分の大きさ)にするsilver)にするといった5つのスタイルを指定したことになります。
CSSでの色指定についてはWEB色見本 原色大辞典 - HTMLカラーコードを参考にしてください。
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 (黒)になります。
ただし全てのプロパティが継承されるわけではなく継承されないプロパティもある、という点を頭に入れておく必要があります。
colorfont-stylefont-sizefont-weighttext-alignbackground-colormarginpaddingborder私の経験から言えることですが、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;
}* (アスタリスク)は全ての要素にマッチするセレクタ(全称セレクタ)です。つまり全ての要素に対して
という7つのスタイルを指定しています。
CSSにはもう一つ大きな特徴があります。それは「あるセレクタに一度スタイルを指定したとしても、その後で同一セレクタに別のスタイルを指定すれば上書きされる」ということです。よって上記スタイル指定で各要素のスタイルを一度リセットした後に改めて各要素のスタイルを一つ一つ指定していく方法を採ることで、頭の中を整理しながら自分の考えるスタイルを実現しやすくなるのではないかと思います。
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)になります。背景色を変えたい要素にだけスタイルを指定すればよいので合理的です。また全ての要素の margin と padding をゼロに設定したので、body要素はブラウザ等で上下左右の隙間がない状態でスクリーンいっぱいに表示されます。横幅が広くなり過ぎると一行あたりの文字数が多くなり読みにくくなってしまうので、body要素の最大幅を max-width で指定しています。一行あたり最大40〜60文字程度になるようにすると読みやすいのではないかと思います。この指定を行なうことでブラウザ幅を大きく開いた場合であってもbody要素幅は指定した最大値を超えることはありません。そしてbody要素の左右のマージンに auto を指定することにより、常にbody要素が中央寄せで表示されます。
margin: 0 auto;は値の部分で2つ指定していますが、これは最初の 0 で margin-top と margin-bottom を、次の auto で margin-right と margin-left を指定しています。また
margin: 0 auto 0 auto;と書いても同じ指定になります。値の部分で4つ指定していますが、これは
margin-topmargin-rightmargin-bottommargin-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文書を編集する必要が出てきます)
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要素にだけ別のスタイルを適用することができます。
<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>li[class="lefty_hand"]
{
background-color: khaki;
}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要素にだけ別のスタイルを適用することができます。
<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>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 を指定することで縦横比も維持されます。
上記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規則以降を見ていただければどこをどう上書きして微調整しているのかがよくわかると思います。大まかに纏めると
といった点について微調整を行なっています。
上の3つの文書をスマートフォンで見比べていただければ理解していただけると思います。
@media規則以降に以下の指定を行なっています。これはCSS: Elastic Videosで紹介されていた手法で、ある意味裏技的ではあります。
<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>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を作成できるようになったら、それらを公開するためにサーバーを確保しましょう。知識のある方は自前でサーバーを立てることもできますが、レンタルサーバーを利用するのが一番手っ取り早いです。無料あるいは有料でサーバーを貸してくれるサービスを利用するのです。
サーバーを選ぶ上でどういったポイントに着目すればいいのかを纏めてみました。
サーバー会社は無数にあります。世評等を参考に選ぶようにしたほうが良いと思います。
無料サーバーにはなんと言っても「無料」という良さがあります。しかしながら様々な制約がある場合が多く、サイト運営に慣れてくるとちょっと物足りないと感じたり広告表示が気になってきたりするものです。そうなると有料サーバーも視野に入ってくることになります。そして有料サーバーは大抵の場合独自ドメインに対応しています。
ドメインとはインターネット上の住所に相当するものです。このドメインを取得し維持管理している限り、そのドメインは世界中で自分だけの唯一のものです。独自ドメインに対応しているサーバーなら、サーバーを移転したとしてもずっと同じ唯一のドメインでウェブサイトを運営することができるので、「URL変更のお知らせ」といったものとは無縁になります。
当サイトは noriya.info というドメインをスタードメインという会社を通じて取得しました。この会社を通じてドメインを取得すると10GBの無料サーバー(スターサーバー)が付いてくる、という点が気に入って契約しました。今はこのスターサーバーで運営しています。平成27年2月21日現在、サーバーの使用容量は176.16MBなのでまだまだ余裕です。スターサーバーの仕様は以下のとおりです。
これなら単純にウェブサイトを運営するのに特段問題はないと考えました。
ドメイン取得・管理サービスを行なっている会社もこれまた無数にあります。世評等を参考に選ぶようにしたほうが良いと思います。
HTML文書やCSSが完成しサーバー確保・ドメイン取得ができたら、いよいよHTML文書・CSS・画像等をアップロードします。これが完了すればウェブサイトの運営が開始されたことになります。
FTPSに対応しているサーバーにアップロードする場合、当然ですがFTPSに対応したツールを使う必要があります。FTPSツールもいろいろありますが、私はFTP全盛の大昔からFFFTPというツールを使っています。定番中の定番ツールです。このFFFTPは以前FTPの脆弱性を突いたハッキングのターゲットにされたことがありましたが、その後有志の方によって開発が継続され現在ではFTPSにも対応しています。
FFFTPを起動してまず行なうことは「ホストの設定」です。メニューバーの「接続」→「ホストの設定」を選択します。そして「新規ホスト」をクリックします。
すると「ホストの設定」ダイアログが現れます。
サーバー側から得ている情報は以下のとおりです。
これらの情報とユーザー名・パスワードを入力し「ホストの設定」を行ないます。
「ホストの設定名」は自分でわかりやすいものにしておきましょう。そして「ローカルの初期フォルダ」は自分のPC内のルートフォルダ、「ホストの初期フォルダ」は「/」としています(この「ホストの初期フォルダ」の設定はサーバーの仕様により異なります)。そして「暗号化」タブにおいてFTPS接続が選択されていることも確認しましょう。
以上の点を確認できたらいよいよ接続です。
接続に成功したら自分のPC内のファイル(左側)をドラッグアンドドロップでサーバー上(右側)へアップロードします。
このように左右で見比べられるのでわかりやすいですね。これでいよいよサイト運営を開始できたことになります。ブラウザ等でトップページのURLにアクセスしてみましょう。きちんと表示されたら問題なくアップロードできているということです。
レンタルサーバーで .htaccess ファイルの使用が認められている場合は、サーバーの設定をある程度自分で行なえます。私が現在行なっている設定について書いてみます。
まず .htaccess ファイルはテキストファイルですのでテキストエディタで作成可能です。そしてサーバーのトップディレクトリへアップロードします。.htaccess ファイルでの設定はサブディレクトリへも全て反映されます。また .htaccess ファイルの書き方を間違えるとウェブサイトへアクセスできなくなりますので注意が必要です。現在私が .htaccess ファイルに書いている内容は4行のみです。
DirectoryIndex index.html
AddLanguage ja html
AddType "text/html; charset=utf-8" html
ErrorDocument 404 /404.htmlDirectoryIndex index.htmlhttp://noriya.info/ や http://noriya.info/web/ といったディレクトリに直接アクセスした場合にはそのディレクトリ内にある index.html を表示する、という設定です。もちろん index.html 以外のファイルも指定できます。サーバーによってはディレクトリを指定した場合にディレクトリ内のファイルの目次(index)を表示する設定になっていることがあるので、それを回避するための設定です。もし index.html が見つからない場合は Forbidden (アクセス禁止)を返します。AddLanguage ja htmlAddType "text/html; charset=utf-8" htmlContent-Type が text/html 、文字コードは utf-8 です、とブラウザ等へ伝えています。HTML文書作成の際にhead要素内に <meta charset="utf-8"> と書いているのだからこんな設定は不要なのではないかと考えるかもしれませんが、meta要素は設定が不十分なサーバーであってもHTML文書の文字コードをブラウザ等が判断できるようにするための補助的なものであり、本来はサーバー側できちんと Content-Type や文字コードを伝える設定をしておくべきです。ErrorDocument 404 /404.html404.html というページを用意しています。トップページへのリンクを書いておくとアクセスしてきた人に対し親切だと思います。.htaccess ファイルには他にも様々な設定項目があります。ただサーバー側では認められていない設定項目もありますので事前に確認しておく必要があります。その他詳細はミケネコの htaccess リファレンスを参考にしてみてください。
HTML文書やCSSを作成するにあたり、便利なBOOKMARKLET(ブラウザ等で使える簡単なJavaScript)を紹介します。ブックマーク(お気に入り)バー等へドラッグして保存して使います。
以上いろいろ書いてきましたが、テキストエディタでウェブサイトを運営するノウハウ、という意味では割りと網羅できているのではないかと思います。
この6つを理解すれば誰でも手軽にウェブサイト運営ができる、それを伝えるのがこの文書の目的です。皆さんにとって少しでも参考になったなら幸いです。
更にHTMLやCSS等の知識を深めるために役立つと思われるサイトを紹介します。