未経験からweb制作【基礎学習とHTML】
本日はWEB業界未経験の筆者がHTMLについて触れていきます！
WEB制作会社への就職を決意してからの自己学習時間「100時間」をアウトプットしていきたいと思います。
W E Bデザインの作成フロー
サイトマップ作成
必要なページ、コンテンツなどを洗い出す。
デザインの大枠を決めていく。
ツリー形式で記載していくと、後々ディレクトリ構造やファイル名を決めておくと後の作業がスムーズになる。
※ディレクトリとはファイルのことでW E Bサイト作成には複数のファイルを使用するHTML/CSS/画像(jpg.png)/動画(MP4.WebM)/音声(MMP3)など
ワイヤーフレームとカンプの作成
W E Bサイトのボタンやメニューなどの大まかな配置を決めていく。
この作業を「ワイヤーフレーム」と呼ぶ
こういった作業はディレクションと呼び、W E Bディレクターが行う。
（デザイナーが行う所もあるようですね）
ワイヤーフレームをもとに完成イメージを作成していく。
この際。PhotoshopやIllustratorを使っての画像作成スキルが必要になります。
そして出来上がったイメージを「デザインカンプ」や「モックアップ」と呼ぶ。
デザインのコード化
出来上がったデザインカンプを元にW E Bブラウザが理解できるようにコード化する
この作業をコーディングと言う。コーディング専用の作業者を「コーダー」と呼ぶ。
デザインカンプの作成〜コーディング化するのがいわゆる「W E Bデザイナー」ですね。
コーディングでは「HTML」や「CSS」ファイルを作成していきます。
文書構造が正しく無いHTMLでは検索エンジンが理解(機能)しない。
※H T M Lとは
Hyper Text Markup Language の略 ハイパーテキストマークアップランゲージ
通常のテキストとは違いコンピューターが文書構造を正しく理解できるように印を付けた言語
※C S Sとは
Cascadeing Style Sheetsの略 カスケーディングスタイルシート
文書のレイアウトや装飾などの見た目を指定する為の言語
セレクタ、プロパティ、値の３つで構成されている
テキストエディタ
私が購読している本はこのソフトを使用していますので、
こちらを使って進めていきます。
その他のテキストエディタ
などがあげれらますね。
※そのほかにもたくさんありますが、有名どころだけ記載しています。
また、コードの確認用のブラウザとして「Google Chrome」が使われていますね。
Appleユーザーの私ですが、標準ブラウザとして使用していたので違和感なく使えそうです。
またコーディングを支援する機能としてGoogle Chromeでは「ソースコードの表示」や「検証」でサイトのコードを見られるのですね。
すごい！
感動しました！
ちなみにWindowsでは右クリックで！Macではcontrol +クリックで閲覧可能
それでは、このままコードを実際に書いていこうと思います。
HTMLを記述する
コンテンツエリアを指定する
<!DOCTYPE html>
<html>
<head>
<meta charaset="UTF-8">
<title>ののくんページ</title>
</head>
<body>
<header></header>
<div id="wrap"></div>
<footer></footer>
</body>
</html>
コンテンツエリアに<div>要素を使用し、id属性で「wrap」という名前をつけます。
ロゴを指定する
<!DOCTYPE html>
<html>
<head>
<meta charaset="UTF-8">
<title>ののくんページ</title>
</head>
<body>
<header>
<img src="images/logo.png" alt="◯◯◯◯"
</header>
<div id="wrap"></div>
<footer></footer>
</body>
</html>
赤文字の◯◯◯◯に画像のファイル名が入ります。
リンクを設定する
<!DOCTYPE html>
<html>
<head>
<meta charaset="UTF-8">
<title>ののくんページ</title>
</head>
<body>
<header>
<a harf="index".html>
<img src="images/logo.png" alt="◯◯◯◯">
</a>
</header>
<div id="wrap"></div>
<footer></footer>
</body>
</html>
アクセスがあった場合「index.html」というファイルを最初に表示する仕組みになっている。<a></a>←これがリンク設定のタグです。
ロゴにC S Sでのスタイリング用の目印をつける
<!DOCTYPE html>
<html>
<head>
<meta charaset="UTF-8">
<title>ののくんページ</title>
</head>
<body>
<header>
<div class="logo">
<a harf="index".html>
<img src="images/logo.png" alt="◯◯◯◯">
</a>
</div>
</header>
<div id="wrap"></div>
<footer></footer>
</body>
</html>
メニューを設定する
<!DOCTYPE html>
<html>
<head>
<meta charaset="UTF-8">
<title>ののくんページ</title>
</head>
<body>
<header>
<div class="logo">
<a harf="index".html>
<img src="images/logo.png" alt="◯◯◯◯">
</a>
</div>
<nav></nav>
</header>
<div id="wrap"></div>
<footer></footer>
</body>
</html>
<nav></nav>←これがメニューの設定タグですね。
メニューの項目を設定
先ほど作成したメニューに項目を追加していきます。
<!DOCTYPE html>
<html>
<head>
<meta charaset="UTF-8">
<title>ののくんページ</title>
</head>
<body>
<header>
<div class="logo">
<a harf="index".html>
<img src="images/logo.png" alt="◯◯◯◯">
</a>
</div>
<nav>
<ul>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="wrap"></div>
<footer></footer>
</body>
</html>
<ul></ul>←このタグは順序を持たないリストを表す
<li></li>←このタグはリストのタグを表す
メニューにリンクを張る
<!DOCTYPE html>
<html>
<head>
<meta charaset="UTF-8">
<title>ののくんページ</title>
</head>
<body>
<header>
<div class="logo">
<a harf="index".html>
<img src="images/logo.png" alt="◯◯◯◯">
</a>
</div>
<nav>
<ul>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrap"></div>
<footer></footer>
</body>
</html>
先ほど作成したリストにリンク先を指定していきます。
<a href="portfolio.html">Portfolio</a> これがそうですね。
間違えた時に赤くなってくれるbracketsさん優しい。
安心してコーディングできます。
メニューにC S Sの目印をつける
<!DOCTYPE html>
<html>
<head>
<meta charaset="UTF-8">
<title>ののくんページ</title>
</head>
<body>
<header>
<div class="logo">
<a harf="index".html>
<img src="images/logo.png" alt="◯◯◯◯">
</a>
</div>
<nav>
<ul class="gloval-nav">
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html"></a>Contact</li>
</ul>
</nav>
</header>
<div id="wrap"></div>
<footer></footer>
</body>
</html>
「u l」要素に「class」属性で「global-nav」という名前を入力
これでheader要素は完成！次はfooterに移っていきます。
コピーライトを記述する
<!DOCTYPE html>
<html>
<head>
<meta charaset="UTF-8">
<title>ののくんページ</title>
</head>
<body>
<header>
<div class="logo">
<a harf="index".html>
<img src="images/logo.png" alt="◯◯◯◯">
</a>
</div>
<nav>
<ul class="gloval-nav">
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrap">
<div class="contact">
</div>
</div>
<footer>
<small>(c)nonokun-studio</small>
</footer>
</body>
</html>
それでは、プレビューで見てみましょう。
ここまでコードを入力してきましたが、H T M Lを読みやすくする
テクニックがあるので実践していきます。
インデント
行頭位置で改装を直感的にする「インデント」
インデントとは字下げのことで、文書の階層をわかりやすくする為のもの。
半角スペース２つを最小単位として行っていきます。
インデントするとこうなります。
<!DOCTYPE html>
<html>
<head>
<meta charaset="UTF-8">
<title>ののくんページ</title>
</head>
<body>
<header>
<div class="logo">
<a harf="index.html"><img src="images/logo.png" alt="SNAPPERS</a>
</div>
<nav>
<ul class="gloval-nav">
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrap">
<div class="contact">
</div>
</div>
<footer>
<small>(c)nonokun-studio</small>
</footer>
</body>
</html>
このように、コードを見やすくする事で複数人でもWEBサイトを運営できたり、別の人に引き継いだり出来ます。
なるべく綺麗なコード入力を心がけましょう。
基本は大事です。
