職業訓練で失業保険貰いながらWebクリエータへキャリアアップ転職！
このコーナーは失業保険をもらいながら、職業訓練を一発合格した僕が、キャリアアップ転職を目指して、日々学んでいることをまとめたものです。
本日の内容
今日からいよいよ待ちに待ったコーディングが始まります。以前、illustoratorとPhotoshopde作成した架空ホームページをコーディングによってホームページの形にしていきます。事前に動画で勉強をしていたので、ある程度の知識はありますが。実際に作ったことはなかったので、しっかりと技術を習得していきたいです。
この記事を読む前に
この記事の内容は前回の記事の内容を参考にしていますのでまだ読まれていない方はこちらをご参照下さい。
コーディングの準備
テキストエディタの起動
全快の記事で設定した「Mery.exe」を起動しましょう。いきなりコーディングするのではなく、ホームページとしてきちんと稼動できる状態を作成します。
必要なファイルは以下の通りです
- index.htm：ホームページのページ1枚1枚を用意する。indexというファイル名はTOPページを意味します。
- style.css：HTMLのページを装飾するもの。これも何種類か用意します。後で詳しく説明します。
- CSSフォルダ：いくつか用意するCSSファイルをまとめておくフォルダです
- ホームページフォルダ：ホームページ用ファイルをまとめておくフォルダです。
以上のものを準備してください。index.htmとstyle.cssのファイルは「Mery」で新規作成を行い、保存をする際に名前に直接このファイル名を打ち込んで、分かりやすい場所（デスクトップ）に保存してください。
作成したフォルダは次のようにまとめてください。ホームページフォルダ＞index.htmlファイル、CSSフォルダ＞style.cssファイルです。
HTMLのファイル
全体のレイアウト
まずは、各コンテンツを配置するスペースを大枠で決めていきます。基本的なホームページでは少なくとも「body＝表示スペース」のなかに「header」、「main」、「footer」を構成します。まずは３つのスペースを作成します。
配置スペースは「div」タグでつくっていきます。後程CSSで装飾が必要な部分にはid名やclass名を付けて部分部分で装飾ができるようにしていきます。最初は名前の付け方やどれに着けたらいいのかわからない事もありますが、練習なので細かいことはきにせず、あとから不要なら消してしまえばいいので何かしたい所にはつけましょう。もちろん仕事としては余計な記述を残したコーディングはいけませんがそれは後々身に着ければいいことです。
divタグの書き方
これがdivタグです。大きさは指定していませんが、目に見えない四角で囲まれた箱の中に〇〇〇が入っていることになります。この箱をホームページ上にたくさん配置して、メニューや何かのボタンやタイトルロゴやフッターなどを配置していきます。どのホームページも目には見えてませんがこのdivタグがあちこちにあって、よく「div地獄」と呼ばれます。divだらけでどれが何のdivで、それらがどう作用しあっているのか訳が分からなくなる状態のことです。divタグで囲まれたメインコンテンツの中に、更にdivタグで囲まれたメニューボタンがあって、またまたdivタグで囲まれたボタンや、テキストやらたくさんあって何が何かわからなくこともありますが、HTMLを記述するときは、インデント（初めのタグと終了のタグの左端をそろえる事、その要素の内側にある要素は左端を1列分右に
ずらす事）をしっかり行うことで、レイアウトが崩れたりバグが発生したりすることを防ぎますので覚えておきましょう。
一気に全部に手をつけるのではなく、外枠からだんだん内側に向かって内容物を埋めていくという進行手順であることを理解してください。
CSSのファイル
CSSのファイル
こちらは、上記で配置をイメージしながら記述していったhtmlをある程度書き終えてから取り掛かります。書き終えたhtmlにある文章の文字色や文字サイズを変更したり、配置したdivタグ内の色を変更したり、divの大きさや位置を変更したりと非常に多岐にわたります。感覚的ではありますが、htmlの１０倍位は手がかかるという印象です。
マウスで形を変えたり、色を変更したりできるillustratorのソフトの作業を全て文章で記述していくといった作業になると、イメージしてみてください。かなり飛躍した例え話しですが（本来はこんなことはできません）、星の形を書くのにまずhtmlでdivを作ります。その後にcssで線の太さ、頂点の数（星なら5個）、頂点の位置、大きさ、配置する場所を全て記述う方法を決められた文章で書いていく作業です。マウスならほんの1分位で作れる星形も全て文章で記述するとなると、とても複雑で時間がかかります。ホームページはまだまだ発展途中で視覚的に作れるソフトも出てきましたが、専用の言語を基に記述することで文章で表示していくという作業段取りになることを覚悟してください。
本来は文章を書いてまとめる為だけに生まれたものですので、現代のホームページの表現手法は無理やり細工を施したものという位置づけです。
CSSの書き方
パターンA
【＃tekitou ｛ color:#ff00ff; ｝】
まず最初に、idやclassやdivやpなどのセレクタそ指定します。それによってどの部分を変更します！と宣言します。次に｛ ｝で囲った部分に【何について：どのように；】変更する！というのを：；を使って記述します。この時に、セレクタと（｛）の間・（｛）と何についての間・どのようにと（｝）の間に必ず半角スペースを入れましょう！そうしないとパソコンは言葉を理解できずに何を書いても変更されません。
パターンB
【＃tekitou{
color:#ff00ff;
}】
このように半角スペースの代わりに改行を使っても構いません。どちらの記述でもいいです。が違いを説明しておきます。
記述方法のメリットとデメリット
パターンA
メリット
セレクタと変更に関する記述の左端をそろえやすい（インデントしやすい）ので読みやすい。
デメリット
記述が長くなると右端で折り返した際にインデントが保たれず一気に見づらくなる。
パターンB
メリット
セレクタと変更内容が左揃えで表示されるので、何がどうなっているのかつかめる。
デメリット
縦長の記述になるので慣れていない人は探したい場所を特定するのに時間がかかる。
総評
記述に慣れてないうち、記述する内容が少ないうちは【パターンＡ】で書いた方が分かりやすいので初心者向けではあります。しかし、いずれは【パターンＢ】で書くことが多くなるでしょうから、今から慣れておきましょう。
お役立ち情報
Ｍｅｒｙの機能増強
ラッピング機能を使えるようにしましょう！打ち込んだテキストを選択してテキストを全行リスト化や、リンクの生成などとても便利です。簡単にいうと、書き込んだ１００個の単語にひとつひとつコピー＆ペーストでタグを付けていかなくても、ラッピング機能を使うと１００個の単語に同じタグを１発で付けられるという事です。
例文） １日 ２日 ３日 ４日 …１００日
とあったとします。これらすべてに、＜p＞＜/p＞を付けて、
完成文）
＜p＞１日＜/p＞ ＜p＞２日＜/p＞ ＜p＞３日＜/p＞ … ＜p＞１００日＜/p＞
にしたい時に、１日から１００日までをドラッグしてラッピング機能のショートカットを押して、囲みたいタグ名を（この場合は「ｐ」とだけ）入力すれば終わります。単語の前にひとつづつ＜p＞を張り付けて、その次に単語の後ろに＜/p＞を張り付けてとかやってられませんよね？大げさな話ですが、ひとつのホームページでは１００個のタグって少なすぎます。もっとたくさん使用されています。すべてが同じタグではありませんが、この使い方を応用すれば記述時間は３分の１にもなると言われています。
この機能を使えるようにするには「emmet.xhtml.wrap.jp」をショートカットに加えるだけです。ファイルは違いますが、やり方の手順はこちらの記事で画像つきで説明していますのでご参照ください。
<h３>ラッピング機能の応用編<h3>
入力コード【li*】：*は選択した行全部という意味でそれらをliタグで囲む
元文章
１日
２日
ラッピング後
＜li＞１日＜/li＞
＜li＞２日＜/li＞
【li*>a】：全行liタグで囲んでしてその中にリンクを埋め込む
元文章
１日
２日
ラッピング後
＜li＞＜a href=""＞１日＜/a＞＜/li＞
＜li＞＜a href=""＞２日＜/a＞＜/li＞
入力コード【li*>a[href=#]】：すべてのリンク先に＃を入力した状態にする
元文章
１日
２日
ラッピング後
＜li＞＜a href="＃"＞１日＜/a＞＜/li＞
＜li＞＜a href="＃"＞２日＜/a＞＜/li＞
入力コード【ul>li*>a[href=#]】:前後をulタグで囲む
１日
２日
ラッピング後
＜ul＞
＜li＞＜a href="＃"＞１日＜/a＞＜/li＞
＜li＞＜a href="＃"＞２日＜/a＞＜/li＞
＜ul＞
入力コード【div>ul>li*>a[href=#]】:さらに前後をdivタグで囲む
１日
２日
ラッピング後
＜div＞
＜ul＞
＜li＞＜a href="＃"＞１日＜/a＞＜/li＞
＜li＞＜a href="＃"＞２日＜/a＞＜/li＞
＜ul＞
＜/div＞
使い方はこれだけではありません、入力コードの規則さえ理解していればいくらでも文章を作れます。タグの書き方をすべてを覚える必要はない（使い方は覚えないと行けない）なんて素敵な事でしょう！この機能を使いこなしている人はあまりいません！この機会にぜひ身に着けてコーディングが得意で有益な人材になりましょう。
横並びの仕方
1、表 特殊な環境以外では使用付加
2、回り込み これはサブ
3、表属性 これがメイン
4、flex-box CSS3以降
マージンの打ち消し合い
マージンの上下の数値設定は大きいほうが優先される。上３０ｐｘで下４０ｐｘであれば下の４０ｐｘしか反映されない。
失業保険をもらいながら職業訓練まとめ
応用的な知識が増えてきました。理解に時間がかかる物もありますが、実際に手を動かしてみれば理解も進みます。実際現場で質問を受けてそれに答えると、自分自身の理解も一層深まります。トライ＆エラーを繰り返して、なぜそうなったのかを理解するようにしましょう。