PC初心者がwebデザイナーになるために～準備、html編～
今回の記事はwebデザイナーになりたいパソコンの初心者のための記事です。
うちのオカンにもわかるように書いているのでだいぶクドいかもしれませんｗ
就職難だとか氷河期だとか言われて久しいですけど、その一方で「ノマド」とか「アフリカでバッタの研究をする」とか「炎上案件に切り込んでいく」とか「むしろ切り込み用に可燃性物質を平積みするとか」ちょっと前までは思いもよらなかった生き方が当たり前になりつつあるのも昨今の情勢ですね。
寒々しいニュースばかりではない！
PC一台あれば食っていける！PC一台あれば吸血鬼の頭をカチ割る事ができる！
そうPCは彼岸島
そのような熱気が日本中に渦巻いていることもまた真実であります。
この記事をご覧になっているあなたもまた、ご自分のPCをエクスカリバーとするべく、その第一歩を踏み出そうとしているのでしょう。
今回はその偉大なる歩みの一助となるよう「PC初心者がwebデザイナーになるために～準備、html編～」と銘をうち、私のオカンにも理解できるような記事を書かせていただきます。
なお、これから見慣れないカタカナや横文字がたくさん出てくるかと思いますが、拒否反応を起こさないようにお願い申し上げます。
まずはブラウザ
ブラウザといいますのは、インターネットを体験するためのアプリケーションです。
windowsのPCを買ってくると「e」というアイコンがデスクトップにありますね。
ちょっと前のオカン達はコレこそがインターネッツだと信じて疑わなかったようですが、スマホの普及とともにその認識も変わりつつあるようです。
当然、ブラウザは1つだけではございません。他に有名なところで言いますと、firefox（ファイヤーフォックス）、Google chrome(クローム)、safari（サファリ）などがあります。
現在ではどれもネットから無料で手に入れることが出来ますが、以前はお金を払ってブラウザを買っていたそうです。
とりあえず「firefox、Google chrome」はwebデザインには必須ですので、ダウンロードしておきましょう。なんといってもタダだしね！
firefox、Google chromeがwebデザインに必須なのは、単純に使っている人数が多いためです。
ブラウザというのはそれぞれ個性がありますので、同じwebサイトを見ていてもブラウザによっては表示が崩れていたり、場合によっては全く見れなかったりします。
より多くの人に見てもらえるように、各ブラウザでのチェックが必要なのですね。
余談になりますが、webデザイナーがよくつぶやく言葉に「IE○ね」「IEェ…」といったものがあります。
これらはwindows標準のブラウザ「e（Internet Explorer）」の個性が強すぎて悪い子であるという意味であります。
少し前までは伝説の悪い子「Internet Explorer6（通称IE6）」が往来を跋扈しておりましたが、現在ではお葬式も終え、開発者一同、胸をなでおろしているところであります。
しかし、不幸にもまだIE6と戦い続けている無限地獄の勇者が、日本にはたくさん存在しています。
そんな彼らの屍にも似た姿を横目に、こっちにだけは来ないでほしいと願いながら皆さんはhtmlの勉強をしていきましょう。合掌。
とにかくhtmlを書いてみる
webサイトは主にhtmlという文字で表現されています。
htmlとは、本当にざっくり言うと、文章を種類別に仕分けするものです。
現在ご覧になっているこのページももれなくhtmlで、
webデザイナーとしてサイトを制作するには、このhtmlを修得する必要があります。
修得する必要があります( ｰ`дｰ´)ｷﾘｯ
とかムダにすごんでみましたが、このhtml自体はすごーーーく簡単なので、そんなに身構える必要はありません。
例えば↓のような文章をサイトに載せたいとき
『嫌われるおじさん』
世の中には嫌われるおじさんとそうでないおじさんがいる。
嫌われるおじさんの主な特徴としては体臭や顔のテカリ、ダジャレや文化の違いなどが挙げられるが、ここで筆者は気付くのである。
ゴキブリが嫌われる理由と似ている。と。ご存知の通りゴキブリはテカっており、いかにも臭そうである。
そして、なにをしでかすか分からない恐怖というものも感じる。これはおじさんでいうところのダジャレや文化の違いなどと通底するものがあるのではないか。
自分に予測できないことを人は嫌悪する場合がある。
メモ帳を起動して、この文章をコピーしてみてください。
（メモ帳の起動方法がわからない人はキーボードの左下にあるwindowsのマークを押して、「プログラムとファイルの検索」のところに「メモ」と打ち込めば上の方にメモ帳って出てくるんで、それをクリックしてみてください。）
起動したら、メモ帳に貼り付けて、ファイル→名前をつけて保存→ファイルの種類を「すべてのファイル」に変えて、ファイル名は「index.html（半角で入力してください）」で保存。
保存場所は好きなところでいいです。デスクトップとかでもいいですよ。
これで保存場所に「index.html」というファイルが出来上がってるはずです。それをダブルクリックしてみましょう。
ブラウザに先程コピーした文字が表示されましたか？
とりあえずどんな文字でもこれでブラウザに表示されるんですけど、実はまだこれではhtmlとは呼べないです。
先ほど説明したように、htmlとは文章を種類別に仕分けするものですから、この文章を仕分けしてみましょう。
この文章は『嫌われるおじさん』という見出しのようですので、
メモ帳の「『嫌われるおじさん』」の前に「<h1>」、あとに「</h1>」と入力してみてください。
↓こんな感じ
<h1>『嫌われるおじさん』</h1>
入力したら上書き保存して、ブラウザで見てみましょう。
嫌われるおじさんが大きくなってますか？ビッグダディと化していますか？
それならば成功です。あ、美奈子は呼ばんでいいです。
この「<h1>」と「</h1>」がまさしくhtmlであります。
h1のhとはHeadingの事で、「<h1>」は、ここからが見出しですよという意味です。
こういうカッコで囲まれたものをhtmlタグと呼びます。
で、「</h1>」はここまでが見出しですよという意味なんですが、この/(スラッシュ)がついたタグを閉じタグといいまして、多くのhtmlタグには閉じタグが必要です。忘れると大変なことになることもあるので、今のうちに閉じる癖をつけておきましょう。
h1の他にpというタグがあります。これはParagraphの略で、段落という意味です。
ではメモ帳の残りの文章をpタグで囲ってみましょう。
↓こんな感じ
<p>世の中には嫌われるおじさんとそうでないおじさんがいる。
嫌われるおじさんの主な特徴としては体臭や顔のテカリ、ダジャレや文化の違いなどが挙げられるが、ここで筆者は気付くのである。
ゴキブリが嫌われる理由と似ている。と。ご存知の通りゴキブリはテカっており、いかにも臭そうである。
そして、なにをしでかすか分からない恐怖というものも感じる。これはおじさんでいうところのダジャレや文化の違いなどと通底するものがあるのではないか。
自分に予測できないことを人は嫌悪する場合がある。</p>
出来ましたか？いろいろなブラウザで確認してみてください。
このような感じで文章に応じたタグをつけていくことをhtmlコーディングと呼びます。
タグには沢山の種類があるんですけど、
よく使ってるのはそんなに多くないので、丸暗記する必要は全然ないです。
とりあえず↓これだけ覚えておけば、あとは自然とついてくる感じです。
- ul,li
- a
- img
まとめと次回予告
まとめ
今回の記事の要点です。
- 検証用に複数のブラウザが必要
- htmlコーディングは文章の仕分け
- 閉じタグを忘れてはならぬ
長々と書いてきましたが、以上を抑えておけば問題ないでしょう。
細かいタグの使い方なんかはリファレンスサイトで、確認してみてください。
次回予告
今回は見出しがビッグダディになっただけで、なんの面白みもないページになっちゃいましたが、
次回はwebデザインの華であるCSSについて書いてみたいと思います！
文字色とか背景色とか好きな色にしちゃうよ！
