0からHPを作成する手順と重要な要素【HTML&CSS】
受講前の準備
ブラウザとテキストエディタ
まずは必要なテキストエディタ『Atom』とブラウザ『Google Chrome』のインストールを以下のページを参考にしてインストールしてください。
その他のテキストエディタ
テキストエディタはいくつあっても困ることはありません。
好みに合わせて、いくつかインストールしておくといいでしょう。
HPサンプル
サンプルの特徴としては以下の通りです。
- 下層ディレクトリをなくしたミニマムファイル構造
- Bootstrapを使わない、ゼロからの構成
- 最小のコード量でHPを構築
- Javascriptを使わない、簡単構成
- Instagram、Twitter、Googleフォームなどの外部サービスの利用
ファイルの準備
- デスクトップ上にhpフォルダを作成
- 作成したフォルダ内にstyle.cssファイルを作成
- 同フォルダ内にindex.htmlファイルを作成
- 同フォルダ内に画像ファイルをダウンロード
- 同フォルダ内に画像ファイルをダウンロード
以上でHPを作成するファイルはすべて揃いました。
HTMLのベースコード
ベースとなる以下のHTMLコードをエディタ内にコピペします。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HPのタイトル</title> <meta name="description" content="HPの説明" /> <link rel="stylesheet" href="style.css" media="screen"/> </head> <body> </body> </html>
※上記コード内の各HTMLタグの解説は講義内で行います。
HPを構成する重要なHTMLタグ
以下のコードはHPサンプルで使われているタグのすべてです。
<div></div> <a href=""> <img src=""> <nav></nav> <ul> <li></li> </ul> <table> <tbody> <tr> <th></th> <td></td> </tr> </tbody> </table> <h1></h1> <h2></h2> <h3></h3> <p></p> <b></b> <br> <footer></footer>
検索してみると、タグの総数は100以上と言われているようですが、一般的に使うのは20種類にも満たないというのがわかるかと思います。
まずは、良く使われるタグの特性を把握して、それからその他のタグを使うようにしていくといいと思います。
HPを構成する重要なCSSプロパティ
実は、HTMLタグというのは単なる目印ブロックのようなもので、色や大きさ配置にはまったく影響しません。
そこで必要なのがCSSです。
どのようなWEBサイトでもCSSでデザインされており、CSSの使い方次第でおしゃれになったり、野暮ったくなったりします。
では、そんなCSSの中でも重要なプロパティを紹介します。
以下のコードはHPサンプルで使われているCSSプロパティのすべてです。
/*ブロック要素に利用*/ box-sizing: ; background-color: #; margin: px; padding: px; width: px; height: px; display: ; border: ; position: ; overflow: ; /*文字に利用*/ color: #; font-size: px; font-family: ; font-weight: ; list-style: ; text-decoration: ; /*tableに利用*/ border-collapse: ; border-spacing: ; /*flexに利用*/ justify-content: ; flex-wrap: ;
無数にあるプロパティですが、実際利用するのは約20種類ほどです。
上下左右の指定やセレクタ、値と複雑さはありますが、それも使われるものは限定されるでしょう。
それらを体に覚えこませるために、まず実際にHPを組んでみるという必要があるわけですね。
※CSSの実際の使い方は講義内で解説します。
リンク先ページの作成
実はこのページを増やしていく作業はとても簡単なのです。
以下の手順を行ってみましょう。
- index.htmlファイルを複製し、ファイル名をcontact.htmlに変更
- 作成したページcontact.htmlへのリンクをindex.html内に作成
- index.htmlにも戻れるようにcontact.html内に作成
これだけです。
実際、リンクがなくともファイルを.htmlファイルを作った時点で、そのページにはアクセスできます。
重要なのは、作成したページにリンクを通すこと。
ページを行き来するリンクは以下になります。
<a href="./index.html">Home</a> <a href="./contact.html">Contact</a>
※リンクの書き方はファイル構造によって変化するので、細かい解説は講義内で行います。
外部サービスの利用
Instagram,Twitter
以前までのHPでは、更新性ある情報は直接HTMLファイルに書き込んでいました。
現在ではそういった更新情報はブログやSNSなどが担っています。
そうした更新情報をHPに載せる方法として、外部サービスを利用しましょう。
まず、サンプルHPで利用しているコードを紹介します。
/*Instagram*/ <a href="https://instawidget.net/v/user/instagram" id="link-e49934c0775576858645b9b21ee9aa23b13ccc232c3b5e98e1ef885d9f6d242f">@instagram</a> <script src="https://instawidget.net/js/instawidget.js?u=e49934c0775576858645b9b21ee9aa23b13ccc232c3b5e98e1ef885d9f6d242f&width=800px"></script> /*Twitter*/ <a class="twitter-timeline" data-chrome="nofooter" data-height="400" data-theme="light" href="https://twitter.com/qomolangma_juku?ref_src=twsrc%5Etfw">Tweets by qomolangma_juku</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
これらSNSなどの情報を呼び出して表示する枠を、一般的にウィジェットまたはブログパーツと呼びます。
そうしたウィジェットを利用するサービスが無料公開されているので、積極的に使いましょう。
Googleマップ
一般的なHPには用意されている、お店や会社の場所を表す地図。
以前までイラストなどをわざわざ描いて表示していましたが、現在はそんな手間はいりません。
積極的にGoogleマップを利用しましょう。
まず、サンプルHPで利用しているコードを紹介します。
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12844.140427681466!2d136.4455433!3d36.4083459!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xf01b34181bf194c4!2z5bCP5p2-5biC5b255omA!5e0!3m2!1sja!2sjp!4v1567401939636!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
利用方法は以下のページを見ながら解説にします。
Googleフォーム
一般的なHPには用意されている、お問い合わせフォーム。
この機能はプログラミングの知識が必要なものでしたが、これも外部サービスで済ませましょう。
GoogleフォームはGoogleアカウントを持っているだけで利用できます。
さらに、アンケートとしても利用でき、
まず、サンプルHPで利用しているコードを紹介します。
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSduZFx7LMsQws89iuJxdAenk6H4cLwkKN0Y53rTENbgYn-9qg/viewform?embedded=true" width="640" height="761" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>
利用方法は以下のページを見ながら解説します。
レスポンシブデザイン
そんな中、必須デザインとなったのがレスポンシブデザインです。
簡単に説明すると「一つのHTMLコードでPCとスマホを両立させるデザイン」ということです。
レスポンシブデザインについては、以下のページを見ながら解説します。
まとめ
実際、HPを作る際に最も時間を要するのは構成とデザインの作成です。
これらは設計図のようなもので、それさえあれば手を動かすだけで完成するという事です。
今回学んだコーディング記述をもとに、ちょっといいなと思ったHPのデザインを真似して位置からHTMLとCSSをコーディングしてみると、良い経験を積むことが出来ます。
一つでも多くページを作成し、技術を磨いてください。
なお、コーディングの基礎を学ぶために必要な学習サイトはたくさんあるので、それらを利用するのがいいでしょう。
