Joken Webデザイン入門講座2019

###### tags: `Joken講座` `HTML` `CSS` # Joken Webデザイン入門講座2019 目標： **自分のサイト、または自分が考える今年の高専祭のホームページを作る！** どちらを目標にしてもらっても構いません。自分で作りたいサイトがある人はそれでも構いません。 <small>※今年の高専祭は11/3,4です</small> - 確認 - VSCodeは入れましたか？ - ブラウザはGoogleChromeですか？わからなかったら思いっきり手をあげて `Help Meee!!!!` と叫んでください。 ## 1. Webサイトのイメージを作ろう Webサイトのイメージ画像＝デザインカンプデザインカンプを先に作っておくと、作るときにとても楽になる。 [プロのデザインカンプの参考資料](https://www.pinterest.jp/search/pins/?q=Web%E3%82%B5%E3%82%A4%E3%83%88&rs=typed&term_meta[]=Web%E3%82%B5%E3%82%A4%E3%83%88%7Ctyped) ↑このレベルは難しいので、まずは紙でWebページの構成を図示してみよう。（3分）だいたい頭の中で構想が出来てたら、途中でも大丈夫。そのWebページ、実際に作っていくぞ！！ ## 2. HTMLを学ぶどのWebページを作るにも基礎が必要です。まずはHTMLを学ぶところから始めましょう。とりあえず、サンプルを[こちら(Github)](https://github.com/Chige12/joken-html-study)にあげていますので、適宜参考にしてください。 ### 2-1. HTMLの構造と検証ツール HTMLはタグによって記述されます。 ` <開始タグ> ～ </終了タグ>` で内容を囲みます。以下の例はhtmlタグのなかに、headタグとbodyタグがあります。このようにして入れ子構造を作ることができます。 ```htmlmixed <!DOCTYPE html> <html> <head>  </head> <body>  <p>こんにちは</p> </body> </html> ``` 自分の環境に`sample1.html`というファイルを作り、そのファイルにこれをコピーしましょう。`.html`の部分がHTMLの拡張子であり、このファイルがHTMLファイルであることを表しています。作ったHTMLファイルをWebブラウザで開きましょう。（GoogleChromeなどのモダンブラウザがおすすめです）いくつかあるWebブラウザでの開き方 - 作成した`sample1.html`をダブルクリックして開く。 - VSCodeなどのエディタ上で、`sample1.html`を右クリックして「パスをコピー(Copy Path)」する。コピーしたパスをブラウザのURL入力欄に貼り付けして読み込み。 - ファイルをブラウザにドラッグ&ドロップ開けたら、こんなのが表示されるはずです。 ![](https://i.imgur.com/T445rKP.png) GoogleChromeをお使いの方は、右クリックで開くメニューから「検証」をクリックして開発者ツールを開いてみましょう。 ![](https://i.imgur.com/HdeSpP3.png) こんなのが開いたらOK。ここでHTMLのタグの構造が確認できます。 `<head>`と`<body>`の隣にある、三角ボタン（▶︎）を押してみましょう。内部の様子が確認できます。構造がツリー状になっていることがわかりますか？これをツリー構造と言います。 ![](https://i.imgur.com/Q8PnJzV.png) ### 2-2. HTMLの基本を確認しよう！確認 - <!DOCTYPE html> - HTMLにもバージョンがあり、最新はHTML5。 - HTML5で作成されたものであることを宣言するために書く。 - これを宣言しないと他のバージョンでも互換性を維持するように、互換モードでレンダリングされるので、意図しないデザインになる場合がある。 - **タグ** - ` <開始タグ> ～ </終了タグ>` で囲んで作る - タグの種類はたくさんある。 - タグの名前で要素（element）の種類を指定する。 - 例：`<p>`は段落(paragraph)。`<h1>`は見出し(Header1)。 - **属性** - タグに「属性」が指定できる。追加情報を足せるって感じで、より詳細に情報を指定できる。 - `<html lang="en"> ~~ </html>` って書くと、langの部分が属性と呼ばれ、enの部分がその属性の値になる。 - タグの種類ごとに、指定できる属性が定義されている。 - htmlタグ - HTML文書の内容が始まることを表す。 - ルート要素と呼ばれる - `<html>～</html>`の直下には、`<head>`と`<body>`がそれぞれ一つずつ必要。 - lang属性で言語を指定しておくと良い。例えば、日本語の場合は`lang="ja"` これでブラウザは日本語の文章であることがわかる。 - lang属性は**汎用属性**に分類され、どの要素でも使える。なので文書内で多言語が混在する場合は個別に設定すると良い。 - headタグ - 文書に関する情報（メタデータ）を記述する。 - `<meta charset="UTF-8">`で、文字コードを指定したり、 - `<title>タイトル！！</title>`でページのタイトルが設定できたり、 - `<meta name="description" content="このサイトは、〜〜です。">`でページの説明を追加できたりする。 - Googleの検索エンジンがここを読んで文書の大体の内容を把握したりする。 - 基本的にページには直接表示されない。 - bodyタグ - ここがサイトを開いたときに実際に表示される要素を書く場所。 - コメント - ``までの間のテキストはコメントと見なされ、表示されない。理解できたかな？早速実践！！同じ所に新しく`sample2.html`を作って、以下のHTMLを貼り付けて読み込もう。 ```htmlmixed <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>奈良高専高専祭2019</title> </head> <body>  <h1>高専祭！！！</h1> <p>こんにちは。高専祭のホームページです！</p> </body> </html> ``` ↓ツリー構造はこんな感じ ![](https://i.imgur.com/9QV8Zda.png) ↓タイトル（`<title>`）はちゃんとタブに反映されたかな？ ![](https://i.imgur.com/J6Hcvlu.png) ↓見出しと段落がちゃんとそれっぽくなってるかな？ ![](https://i.imgur.com/8TgJfin.png) ### 2-3. HTMLでいろんなものを表示してみよう！ - 見出し：[h1~h6タグ](http://www.htmq.com/html5/h.shtml) - `<h1>` 〜 `<h6>` まである。見出しの大きさで変えよう。 - リンク：[aタグ](http://www.htmq.com/html5/a.shtml) - `<a href="./sample1.html" target="_blank">サンプル1へ飛ぶ</a>` - href属性：どこへ飛ぶか、リンク先を指定。 - target属性: この属性で`_blank`を指定すると別のタブで開くようになる。 - 画像を表示：[imgタグ](http://www.htmq.com/html5/img.shtml) - `<img src="./sample.png" alt="サンプル画像">` - src属性：画像のファイルパスを指定 - alt属性:画像が読み込めなかったときに代わりに表示する。Googleの検索エンジンがここを読んで画像の内容を理解したりする。 - リストを作成：[ulタグ](http://www.htmq.com/html5/ul.shtml), [olタグ](http://www.htmq.com/html5/ol.shtml), [liタグ](http://www.htmq.com/html5/li.shtml) - [ulタグ](http://www.htmq.com/html5/ul.shtml)：順序のないリスト - ```htmlmixed <h2>好きな果物</h2> <ul> <li>りんご</li> <li>みかん</li> <li>スイカ</li> </ul> ``` - [olタグ](http://www.htmq.com/html5/ol.shtml)：順序のあるリスト - ```htmlmixed <h2>TKGの作り方</h2> <ol> <li>ご飯をよそう</li> <li>生卵を割る</li> <li>醤油をかける</li> </ol> ``` - [liタグ](http://www.htmq.com/html5/li.shtml)：リストの項目を作る - とりあえず囲みたいとき：[divタグ](http://www.htmq.com/html5/div.shtml) - 特別な意味を持たず、ひとかたまりの範囲として定義するために使う。他にもたくさんのタグ・属性があります。以下のリンク先も見ながら、自由に実行して確認してみよう。 [HTML5リファレンス](http://www.htmq.com/html5/) ### 2-4. ブロックレベル要素とインライン要素要素にはブロックレベル要素とインライン要素の２種類に分けることができます。デザインする上で重要な要素です。 - ブロックレベル要素 - 一つのブロック（かたまり）として認識される。 - `<h1>`とか`p`とか`div`とか - 基本的に要素は横幅いっぱいに伸びる。 - ブロックレベル要素の中には、ブロックレベル要素とインライン要素のどちらもを配置することができる。 - インライン要素 - 文章の一部として扱われる。 - `<a>`とか`<img>`とか - 基本的に要素の横幅は、要素の内側にフィットする。 - インライン要素の中に、ブロックレベル要素は配置できない。コピぺして試してみよう↓ ```htmlmixed <h2>改行なし</h2> <p>今年の高専祭は<strong>とても熱い！！！</strong></p><p>すごい！！！</p><div>高専のHPは<a href="https://nara-k.ac.jp">こちら！</a></div> <h2>改行あり</h2> <p> 今年の高専祭は <strong> とても熱い！！！ </strong> </p> ``` これを実際にサイトで見てみると、HTMLファイル上でどれだけテキストを改行しても意味がないことがわかります。サイトの表示では、ブロックレベル要素とインライン要素の違いが、改行するかしないかを決定していることがわかりますか？一列にズラっと並んでいても、ブロックレベル要素は横幅いっぱいに広がるので、次の要素は改行されます。逆に、一つ一つ改行してもインライン要素は内側のテキストにフィットするので、改行されません。 ### 2-5. 汎用属性 langの説明の時に少し紹介したが、ほとんどの要素で共通して使用できる属性があり、汎用属性という。詳しくは[ここを見て](http://www.htmq.com/htmlkihon/006.shtml) ## 3. サイトの基本設計を知ろう！ bodyタグの中にどのように書いていけば、Webサイトが作れるだろうか？　基本的な設計の形があるので、それを学んでいこう。ここでは基本中の基本である2つのレイアウトを取り上げます。 ![](https://i.imgur.com/dQwXlYQ.png) **例1：スマホ対応が楽な、シングルページレイアウト。縦に長い。** - 例えば1：[SEQSENSE（シークセンス） | Security Robot System](https://www.seqsense.com/) - 例えば2：[KARIMOKU CAT - カリモクの猫用木製家具](https://karimoku-cat.jp/ja/) ```htmlmixed <body> <header> <menu></menu> </header> <main> <section id="about"></section> <section id="works"></section> <section id="contact"></section> </main> <footer></footer> </body> ``` **例2：サイドメニュー付きレイアウト** - 例えば1：[Design - Material Design](https://material.io/design/) - 例えば2：[Qiita](https://qiita.com/) - 例えば3：[Github Marketplace](https://github.com/marketplace) - 例えば4：[Youtube](https://www.youtube.com/?gl=JP) - 例えば5：[QuizKnock](https://quizknock.com/) ```htmlmixed <body> <header> </header> <div class="wrapper"> <div class="side_menu"> <menu></menu> </div> <main> <section id="about"></section> <section id="works"></section> <section id="contact"></section> </main> </div> <footer></footer> </body> ``` HTMLの記述では、`<div class="side_menu">`と`main`は縦に並びそうに見えますが、次回のCSSを学ぶと、このHTML構造のまま、見た目だけ横に並べることができます。横並びにするためには、横並びにしたい要素の外に、それらをラップするためのブロックライン要素を置いた方がやりやすいです。それが`<div class="wrapper">`です。横並びには外側をブロックライン要素で囲むと覚えておいてください。基本的な構造は変わりません。他に教えて欲しい（作りたい）特殊なレイアウト例があれば教えてください。 HTML入門はここでおしまい！次はCSSをやります！ ## 4. 次回のWebデザイン講座までの宿題以下のサイトには様々なかっこいいサイトが取り上げられています。 [縦長のwebデザインギャラリー・サイトリンク集｜MUUUUU.ORG](http://muuuuu.org/) このサイトを見たり、様々なサイトで検証ツールを開いたりして、構造を参考にしながら、サイトのデザインをある程度完成させてください。課題は以下の通り。 1. 紙にある程度Webサイトのデザインを書いてくる。 2. 「headerがここで、menuがここ」などの、デザインに対応するhtmlのツリー構造を書いてくる。 ## 5. とりあえず今日の進捗を公開しよう！ Gitを使うぞ！！とろんぽっと頼んだ！！！