Recommended
Recommended
More Related Content
Featured
Featured (20)
ウェブサイトの作り方
- 7. 設計書の役割 • 店のレイアウト（棚の位置）をパソコンに伝える言葉＝html 例えば…タイトルや記事の内容、検索ボタン • 店の中身（棚の大きさ、位置）を飾るルール＝css 例えば…文字の大きさや位置、色など • 店での中身を動かしたりするルール＝Javascript 例えば…服を試着する、買う これら三つを一つのファイル(~.html) にまとめると設計書が出来上がる
- 9. Htmlの設計ルール • Htmlを描くには高価なソフトは必要ない。 • メモ帳（Windows）やテキストエディット（Mac）に書いて、 「~.html」で保存すれば設計書はできる。 • しかし、専用の編集ソフト（テキストエディタ）を使うと、間 違った書き方をしたときに教えてくれるのでそれを使ったほう が良い。⇒AtomやVsCodeなど ・ファイル（設計書）の名前の最後を 「.html」と書くことで、これが設計書だよと パソコンに教えることができる。
- 10. Htmlの設計ルール① • htmlは上から書く。⇒サイトを見る人は書いた順に見られる。 • レイアウトの中でも、表札や玄関、棚やレジですよ。と伝える ものがタグという。表札なら「title」など。 • タグは<title>と、タグ名の前後に<>をつける。 • このタグの中身を書き終えると、</title>と/を加えてこれでタ イトルは書き終えましたよと伝える。 • そうすると、ブラウザは次のタグを探そうと次の作業（店の表 札を作ったら、次は玄関を作る）に移るために、下の行に進む。
- 11. htmlの設計ルール② • 最低限必要なタグと配置の説明 • 設計書の１行目には、<!DOCTYPE html>と書く。 • 設計書の最後の行には</html>と書く。 • ２行目には、サイトに表示する言語を指定する⇒ 日本語なら、<html lang=“ja”> • ３行目には、検索結果に表示される <head></head>を書く。
- 12. htmlの設計ルール③ <head>の説明 • サイトを日本語で書けるようにパソコンに指示するために<meta charset=“UTF-8”>と書く。文字化けしないようにする • metaと書くのはメタタグと呼ばれる。 • ⇒文字化け防止や、検索結果に引っかかるようなキーワード、サイ トをスマホでも画面いっぱいに表示できるように指示するタグ。サ イトには見えない。 • <head>メタタグやタイトルタグ</head>とする。 • タグの中にタグをまとめる方法👇 • まとめるタグの下の行に、まとめるタグの半角２つを空けてタグを 書く。 • タグはたくさんあるので、ここでは最低必要（私が使っているもの など）なものを紹介する。
- 13. htmlの設計ルール④ • 最低限必要なタグと配置の説明 • </head>で閉じた後、下の行で、いよいよ見られるサイト（店 に入ってからの中身）を書く。 • 見られるサイトであると指示するタグはbodyタグ。 • <body>見られる中身（後で説明）</body>と書く。 • </body>で閉じた後、下の行に</html>と書く。 • これでパソコンに、「これで設計書は終わりです。」と伝える。
- 14. htmlの設計ルール④ <body>の中身 • 見出しのタグ→<h1></h1> • 文章のタグ→<p></p> • 改行のタグ→<br> • 区切り線のタグ→<hr> • 画像を挿入するタグ→<img></img> • リスト表示するタグ →<ul><li></li></ul>・・・ulでこれから●でリスト化すると 言って、liで中身を書く →<ol><li></li></ol>・・・ulでこれから数字でリスト化する と言って、liで中身を書く
- 15. htmlの設計ルール④ <body>の中身 • ヘッダー（一番上に見せたいもの）のタグ →<header></header> • フッター（一番下に見せたいもの）のタグ →<footer></footer> • メインとなる内容を見せるタグ→<main></main>
- 16. htmlの設計ルール④ <body>の中身 • 一つにまとめたいものがあるときに使うタグ→<div></div> • 一つにまとめるとは？ • 例①一つの記事や内容（会社概要など）毎に文字の色を変えた いなど（会社概要の見出し(<h>)や文章(<p>)など） • 例②横並びにしたいものがある。
- 17. まとめたものとパソコンに伝えるために… <div> <label class ="btn btn-primary btn-xs avtive" id="checkbox"> <input type="checkbox"> <font size="4px">車いす対応</font> </label> <label class ="btn btn-primary btn-xs avtive" id="checkbox"> <input type="checkbox" > <font size="4px">乳幼児用</font> </label> <label class ="btn btn-primary btn-xs avtive" id="checkbox"> <input type="checkbox"> <font size="4px">オストメイト</font> </label> <label class ="btn btn-primary btn-xs avtive" id="checkbox"> <input type="checkbox"> <font size="4px">多目的トイレ※</font> </label> </div> 半角２つ 半角２つ
- 19. ２．CSSの設計ルール • CSSとは…ページの背景色や文字の大きさ、フォントや色、 <div>の位置などをパソコンに伝える設計書 • htmlが引っ越しでおおよその位置（店から入って最初にアウ ターのコーナー、その先にインナーコーナーがあって横並びに カーディガンなどを置く）を決める。 • CSSでは、おおよその位置に置いた商品や棚などの位置を微調 整したり、アピールできるように装飾する。
- 20. CSSの設計ルール • 設計書となるファイル名の最後を「~.css」とする。 • まず、色や位置を決めたいもの（htmlのタグ）を指定する。 • この指定したhtmlのタグをＣＳＳではセレクターという。 • タグを書いた後に、色や位置を｛｝で閉じる。 • 例えば、サイト全体(bodyタグ)の色を薄ピンク色にしたいとき。 body { background-color: MISTYROSE; } プロパティ： Bodyのどこを変えたいか （ここでは背景色） 値： プロパティをどう変えたいか （ここでは薄ピンク色） １つ変えたら、 必ず;で終える。 セレクター
- 21. • htmlのタグが一つのファイルに一個だけの場合、 →そのまま、タグの名前を指定。 でも… • 二個以上あったり、この文章の色を変えたい！という場合は？ →このタグだけ違うよ！という名前を付ける。 方法１・・・classを入れる。 <p class = “this”>この文章</p> 方法２・・・idを入れる。 <p id = “this”>この文章</p> CSSの設計ルール index.html style.css p.this { color : “red”} p#this { color : “red”} .でタグと名前 をつなげる #でタグと名前をつなげる 英数字、ー、＿で書く
- 22. CSSの設計ルール • class = 種類の名前…１組、２組...というグループ分け • id = 固有の名前…たかしくん、はなこさん...人の名前分け ファイル(html,css,js)１つに対して何回も使える→class １回しか使えない→id classとidはどういうときに使い分ける？
- 23. CSSの設計ルール～classの使い方～ • 見出し(h1タグ)と文章(pタグ)をまとめて赤文字にしたいとき →見出しのidと文章のidをそれぞれ違う名前をつけると面倒。 • divタグを使ってまとめてclassタグで指定すればcssで一行で済む 例 <div class = “this”> <h1>紹介</h1> <p>これはりんごです</p> </div> index.html style.css div.this { color : “red”} thisというクラスの中にあるh1とｐタグに囲まれた文字が赤文字になる まとめて変えたいもの(h1,p)を まとめてくれるタグ(div)の下に 半角２文字空けて書く
- 24. CSSの設計ルール～いろんなプロパティ • 文字の大きさ→font-size: 0.9em; • 文字を太くする→font-weight: bold; • 背景色→background-color: blue; • 文字などを見えなくする→display: none; • 記事などの配置→幅：width: 400px; • 記事などの配置→高さ：height: 400px; • 記事などの配置→下の文章との余白：bottom: 400px; • 記事などの配置→文章を中央にする：text-align: center; ほかにもたくさんあるので、調べてみてください。 <div class = “this”> </div> <div class = “next”> </div> width height bottom
- 26. htmlにCSSを伝える。 • 方法①…cssファイルでまとめるほど飾らないとき styleタグを使って、htmlファイルの中に直接書き込む。 <head> ～省略～ <style> body { background-color: mistyrose; } </style> <head> <body> ・・・ headタグの中に書く！！
- 27. htmlにCSSを伝える。 • 方法②…cssファイルでまとめて指定したいとき linkタグを使って、htmlファイルとcssファイルをつなげる。 <head> ～省略～ <link rel = “stylesheet” href = “style.css”> <head> <body> ・・・ headタグの中に書く！！ ファイルをつなげる言葉 つなげるcssファイル cssファイルですよとパソコンに教 える言葉
- 28. いろんなタグの調べ方 • 数えきれないくらいのタグがあるので、作りたいページを下書 きしてから、それに合いそうなサイトを探したり、辞典や質問 サイトで調べるとよいです。 ①参考資料 私が使っている本 １．HTML＆CSS 逆引き辞典 今すぐ使えるかんたんEx HTML&CSS 逆引き事典 | 大藤 幹 |本 | 通販 | Amazon ２．現場で使える最低限の知識がしっかりと身につく HTML/CSSデザインTextBook
- 31. 補足…いろんなタグ① • 表を表すタグ…<table> • 文章のある文字を<strong>で囲むと太字、<em>で囲むと斜め字 • 文章のある文字を＜mark>で囲むとマーカーで引いた文字 • 別のページへ飛ばしたい（違う部屋への扉を作りたい）ときは、 <a href = “nextpage.html”>次のページへ</a> • 画像を表示したいときは、<img src = “image.png” width=“100” height=“100”> • 音声を再生したいときは、<audio src = “audio.mp3”></audio> • 動画を再生したいときは、<video src = “audio.mp4”></video >
- 32. 補足…いろんなタグ② • 入力フォームを表すタグ…<input>タグ ・文字を入力したいとき、<input type=“text”> ・チェックボックスを作りたいとき、< input type=“checkbox”> ・ラヂオボタンを作りたいとき、< input type=“radio”> ・電話番号を入力したいとき、< input type=“tel”> ほかにも、 ・送信ボタン ・CSSと組み合わせてメニュー、ボタンを押すと下に細かいメ ニューが伸びるアコーディオンと呼ばれるメニューも作れます。