Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Webデザイン入門1-HTML5・CSSについて-

2 242 vues

Publié le

講義用資料です。
Webデザインの基礎、HTML5とCSSの入門です。
・HTMLの概念と役割、CSSの役割
・Webサイトが見られるネットワークの仕組み
・各HTML要素の説明
・カラー16進数について
・CSSリセットについて
・float clearfixの説明
・HTML/CSS文法チェック方法について
・セレクタの優先順位
・FTPについて

Publié dans : Technologie
  • Soyez le premier à commenter

Webデザイン入門1-HTML5・CSSについて-

  1. 1. Webデザイン基礎講座01 HTML5, CSS
  2. 2. Webサイトって どんなもの? Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 2
  3. 3. Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 3 Webサイトをみてみよう • アップル – https://www.apple.com/jp/ • 渋谷マークシティ – http://www.s-markcity.co.jp/ • au – http://www.au.kddi.com/ • 東京ミッドタウン – http://www.tokyo-midtown.com/jp/index.html
  4. 4. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 4 Webサイトの構成 ヘッダ メインビジュアル コンテンツ フッター
  5. 5. Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 5 Webサイトの特徴 • 似たようなレイアウトのサイトが多い – ユーザが操作をするため • トップページはゴールではない – 目的(ゴール)のページにたどり着くことが目的 – 商品購入、資料請求など • ぱっと見のカッコ良さより、使いやすさ – 使いづらいサイトは見てもらえない – ゴールページへ辿り着けるようなデザインを意識する • Google(検索エンジン)で上位表示が必要 – 一般の広告とは違い、意図してWebサイトを見る
  6. 6. Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 6 Webサイトをみてみよう • 虎ノ門ヒルズ – http://toranomonhills.com/ja/ • 新生活に NHK – http://www.nhk.or.jp/haru/ • NURO光 for マンション みんなの応募状況 – https://nuro.jp/mansion/status/ • ブリヂストンの電動アシスト自転車 – http://www.assista.jp/
  7. 7. とにかく、たくさん Webサイトをみよう Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 7
  8. 8. 8 Webサイトを 見る方法 Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.
  9. 9. 9 ブラウザ • Webサイトを閲覧するソフトをブラウザと呼ぶ • 動作チェック対象ブラウザ – Windows • Microsoft Edge,IE11,IE10 , IE9 , IE8, IE7 • Google Chrome • Firefox – iOS • Google Chrome,Safari – Android • Google Chrome,Firefox,標準ブラウザ・・・ – Mac • Safari, Google Chrome, Firefox Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.
  10. 10. Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 10 Webサイト制作に 必要な環境
  11. 11. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 11 Web制作に必要なハードウェア サーバー 制作用PC
  12. 12. Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 12 Webサイトに必要なソフト • Dreamweaver – HTMLとCSSを記述して、Webページ を制作する
  13. 13. Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 13 Webサイトに必要なソフト • Photoshop – 写真をより見栄え良く加工する
  14. 14. Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 14 Webサイトに必要なソフト • Illustrator – イラストを作成する
  15. 15. Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 15 Web制作に必要なソフトウェア
  16. 16. Webサイト制作 作業の流れ Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 16
  17. 17. Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 17 Webサイト制作の流れ クライアントへ ヒアリング 企画書作成プレゼンテーション デザイン 制作 納品維持管理
  18. 18. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 18 素材加工 パーツ作成 デザイン 作成 手描きラフ、 ワイヤーフレーム 作成 Photoshopで 画像の書き出し (gif, jpeg, pngなどの 画像ファイルを保存) HTML・CSSの コーディング Webサイト制作作業の流れ
  19. 19. Photoshop 作業について Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 19
  20. 20. 20 • デザイン制作 – 新規作成の際の設定 • 書き出し – 必要な画像ファイルを、別々に最適化した状態で保存する Photoshop作業 Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
  21. 21. 21 • 書き出しの方法 – Photoshop CC以前からある機能 • スライスによる書き出し • スライス作成ツールで、画像エリアを作成する – Photoshop CC以降に追加された機能 • レイヤー→右クリック→クイック書き出し など • どっちがいいのか – 状況に応じて使い分ける – それぞれメリット・デメリットがある Photoshop作業-書き出し- Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
  22. 22. 22 • スライスの作成 – レイヤーから新規スライス • 1つのレイヤーからスライスエリアを作成 • メニュー[レイヤー]→[レイヤーから新規スライス] – スライス作成ツールで新規作成 • 任意のエリアを画像として書き出し場合、[スライス作成ツー ル]を使って、ドラッグでスライス作成 Photoshop作業-書き出し- Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
  23. 23. 23 • スライスの設定 – スライスを作成したら、ファイル名を設定 • [スライス選択ツール]でスライスをダブルクリック • [スライスオプション]で名前を設定 Photoshop作業-書き出し- Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
  24. 24. カラーについて Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 24
  25. 25. Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 25 2つのカラーモード:RGB と CMYK • CMYKモード • 色の3原色 • 「C:シアン」「M:マゼンダ」 「Y:イエロー(黄色)」「K:黒」 • 印刷物制作主に利用するモード • RGBモード • 光の3原色 • 「R:赤」「G:緑」「B:青」 • Web制作で主に利用するモード R B G コンピュータにおける色の表現
  26. 26. 26 • 解像度 – 紙デザインの場合、1インチ辺りのピクセル数 – Webデザインの場合 • モニタの面積 • モニタによりピクセルの大きさが違うので、平均的な72ppi とする Photoshop作業 Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
  27. 27. Webサイト制作に 必要な技術 Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 27
  28. 28. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 28 • 文章の設定/表示 – HTML5 • HTMLの装飾(レイアウト、文字サイズ、背景色など) – CSS3 • 動きなどの表現(アニメーション、インタラクティブ動作) – JavaScript(後日解説) Webサイト制作に必要な技術 ブラウザは、このHTMLとCSSの内容を 解読して、Webサイトを表示しています。
  29. 29. HTML/CSS/JavaScript 制作ツールについて Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 29
  30. 30. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 30 コーディング用ツール • Dreamweaver(Adobe社:有償) – サイト全体の制作に適している統合開発環境 – FTP機能が便利 – リンクチェック、Emmetなど様々な機能が標準搭載 • Sublime Text3(有償だけどタダで使える) – さまざまな言語に対応したテキストエディタ – パッケージをインストールし、様々な機能を追加 • Brackets(Adobe社:無償) – Web言語に特化したテキストエディタ – 拡張機能をインストールし、様々な機能を追加 – Photoshopと連携し、書き出しが可能
  31. 31. HTMLについて Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 31
  32. 32. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 32 HTMLとは? • HTML (Hypertext Markup Language) とは? – Hyper Text • 複数の文書を相互に関連付け、結び付ける仕組み • リンクのこと – Markup (マークアップ) • 文書の中に目印 (マーク) を付けていくこと • 文書構造を設定する – Language • 言語
  33. 33. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 33 文書構造とは 2014年10月3日 ABC工業株式会社 製品展示会のご案内 拝啓 薫風の候 ○山様におかれましては益々ご健勝の こととお慶び申し上げます。 平素より格別のご愛顧を賜り、誠に有難うございます。 さて、この度弊社では、下記要領にて恒例の製品展示 会を開催させていただくことなりました。当日は、新 製品の発表やセミナー等も予定しております。 何卒ご参加賜りたくお願い申し上げます。 ・日 時 平成26年10月24日(金)14時より ・場 所 第一ホテル(2階「会議室A・B」) ABC工業株式会社 総務部 広報課 TEL:03-1234-5678
  34. 34. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 34 文書構造とは 大見出し 段落 段落 箇条書き 2014年10月3日 ABC工業株式会社 製品展示会のご案内 拝啓 薫風の候 ○山様におかれましては益々ご健勝の こととお慶び申し上げます。 平素より格別のご愛顧を賜り、誠に有難うございます。 さて、この度弊社では、下記要領にて恒例の製品展示 会を開催させていただくことなりました。当日は、新 製品の発表やセミナー等も予定しております。 何卒ご参加賜りたくお願い申し上げます。 ・日 時 平成26年10月24日(金)14時より ・場 所 第一ホテル(2階「会議室A・B」) ABC工業株式会社 総務部 広報課 TEL:03-1234-5678 ヘッダ フッター
  35. 35. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 35 文書構造とは 大見出し 段落 段落 箇条書き 2014年10月3日 ABC工業株式会社 製品展示会のご案内 拝啓 薫風の候 ○山様におかれましては益々ご健勝の こととお慶び申し上げます。 平素より格別のご愛顧を賜り、誠に有難うございます。 さて、この度弊社では、下記要領にて恒例の製品展示 会を開催させていただくことなりました。当日は、新 製品の発表やセミナー等も予定しております。 何卒ご参加賜りたくお願い申し上げます。 ・日 時 平成26年10月24日(金)14時より ・場 所 第一ホテル(2階「会議室A・B」) ABC工業株式会社 総務部 広報課 TEL:03-1234-5678 ヘッダ フッター <header> </header> <h1> </h1> <p> </p> <p> </p> <ul> </ul> <footer> </footer>
  36. 36. HTMLの役割は 文章構造の意味付け Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 36
  37. 37. 簡単ですね Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 37
  38. 38. CSSについて Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 38
  39. 39. CSSで出来ること • 文字や背景に色を付けられる • 文字を大きくしたり、小さくしたりできる • 文章を右寄せ、左寄せにできる • コンテンツを横並びに • 角を丸くできる • 影を付けられる • アニメーションできる • ブラウザの横幅を確認できる
  40. 40. 40 CSSの役割は 見た目の設定 Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.
  41. 41. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 41 CSSの役割 HTMLが文書構造を担当。CSSが装飾(見た目)を担当。 Webサイトでは、装飾(見た目)に関する定義は全てCSSで記述するよ う規定されています。 HTML ページの文書 構造を記述 (index.html) CSS ページの装飾 を記述 (style.css) この2つをしっかり分離させてメンテナンスしやすく、かつWEB標準に準拠 したコーディングを目指します。
  42. 42. 42 Webサイトの 仕組みについて Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.
  43. 43. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 43 Webサイトが見られる仕組み Webサーバー ユーザー ②HTTPでファイル送信 ①アドレス入力 リンククリック
  44. 44. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 44 Webサイトの作り方 • 基本は、HTML + CSS • 「動き」は、JavaScriptで作成される
  45. 45. 45 古い時代のWebサイトの仕組み • Webは提供者と利用者が分断されており、 一方的な情報発信であった Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. ユーザー 情報表示
  46. 46. 46 現代のWebサイトの仕組み • 提供者と利用者の垣根がなくなり、従来の利用者が容易 に情報を発信できる – 例として、Twitter、facebookなどが分かりやすい、ユーザー参加型 の仕組みとなっている。 Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. ユーザー 情報追加・更新 情報表示
  47. 47. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 47 Webサイトコンテンツの作り方 • 基本は、HTML + CSS • Webブラウザ側(クライアント側)での「動き」 は、JavaScriptで作成される • ショッピングサイトのようなシステム • ブログやSNSのようなユーザ参加型システム
  48. 48. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 48 Webサイトが見られる仕組み Webサーバー ユーザー ③作成したファイル送信 ①情報発信 ②プログラムで データベースから ページ作成
  49. 49. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 49 現代のWebサイトの仕組みを 支える技術 Webアプリケーション (Webサーバで動くプログラム:PHPなど) =
  50. 50. Webに必要な ファイル Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 50
  51. 51. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 51 Web制作のファイルについて • フォルダ名、ファイル名は必ず半角英数字_-のみを使用 • 構成ファイル – HTMLファイル(拡張子html) – CSSファイル(拡張子css) – Javascriptファイル(拡張子js) • 使用できる画像形式 – jpegファイル(拡張子jpeg, jpg) • フルカラー向け画像 – gifファイル(拡張子gif) • 256色以下のロゴなどの画像 – pngファイル(拡張子png) • 透明箇所がある画像 – svgファイル(拡張子svg) • ベクター形式画像
  52. 52. HTML について Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 52
  53. 53. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 53 マークアップ = 文書構造の設定 • HTMLの記述は、文書の構造を記述すること • 文書のどの部分が、どの要素なのかを目印 (マークアップ) を設定する – タイトル – 見出し – 段落 – リスト(箇条書き) ...etc.
  54. 54. Copyright Ⓒ 2012 Yoshihiro Takahashi. All Rights Reserved. 54 HTMLの流れ SGML HTML HTML 4.01 XML 1.0 XHTML 1.0 1980年代 複雑で使いづらい 情報発信に!! 1999.12 2000.1 もっと文章として ルールを厳しく 1999.2 インターネットに 適合するように HTML 5.0 XHTML 1.1 XHTML 2.0 2014.10 Webサイトとして、ス マホ対応など含め た内容に 2001.5
  55. 55. Copyright Ⓒ 2012 Yoshihiro Takahashi. All Rights Reserved. 55 HTML5 • 登場の理由 – Webサイトは本当に文章??? • メニュー、アニメーション、動画・・・ – Webサイトは、アプリやメディアにもなる!! • XHTMLの限界かも・・・
  56. 56. Copyright Ⓒ 2012 Yoshihiro Takahashi. All Rights Reserved. 56 HTML5の特長 • HTMLとして – 文書構造 + Webサイト構造の意味付け – 図形などの描画 – 動画・音声などメディアのサポート • アプリケーションとして – 各種機能をAPI(Javascript)として提供 • GPS • データベース • 端末の傾き
  57. 57. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 57 マークアップ = 文書構造の設定 • 「タグ」と呼ばれる目印を記述していく • 記述する内容は3つ – どこから = 開始タグ – どこまで = 終了タグ – 要素の種類 = 要素タイプ
  58. 58. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 58 <h1> HTMLの構造 </h1> マークアップ = 文書構造の設定 • HTMLの記述例
  59. 59. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 59 マークアップ = 文書構造の設定 • HTMLの記述例 開始タグ 終了タグ要素の内容 h1要素 <h1> HTMLの構造 </h1>
  60. 60. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 60 マークアップ = 文書構造の設定 • 開始タグを指定したら、終了タグで閉じる • 開始タグと終了タグの入れ子に注意 ○ <h1> この要素は<strong>強調</strong>です。</h1> × <h1>この要素は<strong>強調です。</h1> </strong> • 終了タグのない特殊なタグがある – <br> もしくは <br /> : 改行 – <img src= hoge.jpg> : 画像
  61. 61. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 61 マークアップ = 文書構造の設定 • HTMLの記述例 属性=”値” <h1 id=“aaa” class=“bbb”>HTMLの構造</h1>
  62. 62. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 62 HTMLの構造 <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>○○○○</title> </head> <body> <h1>○○○○</h1> <p> ○○○○ </p> </body> HTML文書は、以下のような構造になっています。 <html> 文書型宣言 Document Type Declaration HTMLのバージョンを宣言するもの。 </html> head要素 文書に関する情報です。 ・文書のタイトルを示すtitle要素 ・付加情報を示すmeta要素 ・関連性を示すlink要素 などがあります。 本体の部分です。 body要素で構成されます。 body要素
  63. 63. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 63 HTMLは文書構造に徹しましょう • HTMLは文書の構造に専念すること – フォントの大きさ、色、フォントフェイス、行間、 文字間隔などの文書の体裁は、初期状態のまま • 文書の体裁(デザイン)の指定 – CSSという別の言語を使用します
  64. 64. <head>内の 要素について Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 64
  65. 65. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 65 代表的なHTMLタグ • タイトル(title) – Webページのタイトルを設定します。 ブラウザの画面上には表示されず、ブラウザのタイトル バーに表示されます – 検索エンジン対策に必須のタグです。 <title>タイトル</title>
  66. 66. <body>内の 要素について Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 66
  67. 67. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 67 ヘッダ ナビゲーション サイド フッタ <header> <nav> <aside> <footer> <body> <article> <section> <h1> <p> <section> <h1> <p> メイン 記事 章 見出し 段落 章 見出し 段落 要素と文書構造の構成 <main>
  68. 68. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 68 代表的なHTMLタグ • 文書のヘッダ (header) – header要素には、セクション(または文書全体)に対す るイントロダクションやナビゲーションの手助けとなる内 容を配置します <header> 見出し(ページのタイトル、セクションの見出し) メニュー(グローバルナビゲーション) イントロダクション(前置き) ロゴ(サイトや企業のロゴ) </header>
  69. 69. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 69 代表的なHTMLタグ • 文書のフッター (footer) – footer要素には、セクション(または文書全体)に関する 情報を配置します <footer> 著作者 連絡先 著作権 発行日時(文書や記事の発行日時) 関連文書へのリンク </footer>
  70. 70. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 70 代表的なHTMLタグ • メインコンテンツ(main) – body要素のメインコンテンツを表し、body内に1つしか 存在できない。 <main> 見出し 段落 記事など </main>
  71. 71. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 71 代表的なHTMLタグ • 文書の記事 (article) – article要素を使用することで、それが1つの独立した記事 であることを表すことができます <article> ニュースの記事 ブログの記事 掲示板の投稿著作者 </article>
  72. 72. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 72 代表的なHTMLタグ • 記事の章や節 (section) – section要素は、その範囲が1つのまとまりであることを表 します。内側に見出し要素(h1など)が含まれることが望 ましいです。 <section> 見出し 段落 </section>
  73. 73. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 73 代表的なHTMLタグ • 余談/わきへ (aside) – aside要素の前後のコンテンツには関係しているけれども、 やや本筋から逸れながらも軽く触れておきたいようなコン テンツ <aside> 見出し 箇条書き 段落 など </aside>
  74. 74. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 74 代表的なHTMLタグ • ナビゲーション (navigation) – nav要素は、外部サイトへのリンクメニューとナビゲー ションとを区別するために使用します。 <nav> グローバルナビゲーション(ヘッダに配置されるリンクメニュー) パンくずリスト(階層を表すリンクメニュー) ページャー(ページ送りのリンクメニュー) ページ内リンク(各セクションに移動するためのリンクメニュー) </nav>
  75. 75. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 75 代表的なHTMLタグ • 見出し1〜見出し6 (heading) – h1~h6要素は、セクションの見出しを表します。h1に近 いほど見出しのランクが高くなり、h6に近いほど低くな ります。 <h1>大見出し</h1> <h2>中見出し</h2> <h3>小見出し</h3>
  76. 76. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 76 代表的なHTMLタグ • 段落 (paragraph) – p要素を使用することで、文章中の1つのブロック (段落)を表すことができます <p> 文章1 </p> <p> 文章2 </p>
  77. 77. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 77 代表的なHTMLタグ • 改行 (break) – br要素は、例えば住所などのように、改行がコンテ ンツの一部を形成する場合に使用することができま す。 <p> 〒111-11<br> 東京都新宿区○丁目○番地<br> ABC株式会社 </p>
  78. 78. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 78 代表的なHTMLタグ • 画像表示(image) – img要素は、画像を文書内に埋め込みます。 – 属性として、ファイル名・横幅・縦幅・代替文字を 設定します。 • ファイル名→src属性にHTMLファイルからのファイル位置 を設定 • 横幅→width属性に数値のみ、もしくは%値で設定 • 縦幅→height属性に数値のみ、もしくは%値で設定 • 代替文字→alt属性に画像の代替文字を設定 <img src= “ファイル名” width=“横幅” height=“縦幅” alt=“代替文字”> 属性の値はダブルクォートで囲む
  79. 79. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 79 代表的なHTMLタグ • リンク(anchor) – a要素は、リンクを表します。 – リンク先は、href属性で設定します。 <a href= “アドレス” >文字</a> <a href= “ファイル名” >文字</a>
  80. 80. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 80 代表的なHTMLタグ • 箇条書き (unorder list, list) <ul> <li>リスト1</li> <li>リスト2</li> </ul> • 定義リスト(definition list) <dl> <dt>用語1</dt> <dd>説明文1</dd> <dt>用語2</dt> <dd>説明文2</dd> </dl>
  81. 81. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 81 代表的なHTMLタグ • 特定範囲を指定 – 文章構造は関係なく、CSSを設定する際に必要な場 合設定します – div要素は、複数のタグをまとめる場合に使用します – span要素は、文章中の特定部分を指定します <div> <h1>見出し</h1> <p>長い<span>文章</span>が続いている。</p> </div>
  82. 82. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 82 代表的なHTMLタグ • 日時(time) – time要素は、機械可読形式にした日付、時刻、タイム ゾーンオフセット、時間など設定します – datatime属性の値として機械可読形式の値を設定する こともできる <time>2016-09-23</time> <time datetime="2016-09-01">2016年9月1日</time>
  83. 83. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 83 代表的なHTMLタグ • 短いテキスト(small) – small要素は、免責・警告・法的規制・著作権・ライセンス要件 などの注釈や細目を表す際に使用します。 その箇所が重要であ るという意味や強調する役割、反対に重要性を弱める意味など はありません。 <dl> <dt>シングルルーム <dd>15,000円<small>朝食込み</small> <dt>ダブルルーム <dd>30,000円<small>朝食込み</small> </dl> <p><small>&copy; 2038 Example.</small></p>
  84. 84. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 84 代表的なHTMLタグ • 連絡先(address) – address要素は、内容に関する連絡先・問合せ先を表す要素で す。 “address”という単語は日本語では“住所”という意味になります が、 住所だからといって<address>~</address>でくくるの は誤りです。<p>タグなどを使用しましょう。 <footer> <address> 詳細につきましてはこちらにご連絡ください。 <a href=“mailto:js@example.com”>窓口</a>. </address> </footer>
  85. 85. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 85 代表的なHTMLタグ • 図表(figure / figcaption) – figure要素は、図表であることを示す際に使用します。 図表と は、文書の本文(メインフロー)から参照されるようなイラス ト・図・写真・ソースコードなどのことです。図表にキャプ ションを付ける場合には、figcaption要素を使用します。 <p>ネコの生態に関しては、<a href="#cat">こちらの 画像</a>でご確認いただけます。</p> <figure id=“cat"> <img src=“cat.gif” alt=“ネコがうたた寝"> <figcaption>ネコの生態</figcaption> </figure>
  86. 86. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 86 代表的なHTMLタグ • 強調(strong) – strong要素は、見出しやキャプションや段落の中で、 より細かい部分や、より陽気な部分や、単なる定型 文のような部分と比べて、大きな違いがあり本当に 重要な部分を区別するために使うことができます。 <p> <strong>警告:</strong> この迷宮は危険です。 警告は以上です。 </p>
  87. 87. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 87 代表的なHTMLタグ • コメント(メモ書き) – コメント内に記述した内容は、ブラウザは無視しま すので、メモ書き等に利用します。 <!-- この内容は無視されます --> <!-- この内容は無視 されます -->
  88. 88. HTMLの文法 チェックをしよう Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 88
  89. 89. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 89 HTMLの文法チェック • W3CによるHTML文法チェック
  90. 90. CSSについて Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 90
  91. 91. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 91 CSSの役割 HTMLが文書構造を担当。CSSが装飾(見た目)を担当。 Webサイトでは、装飾(見た目)に関する定義は全てCSSで記述するよ う規定されています。 HTML ページの文書 構造を記述 (index.html) CSS ページの装飾 を記述 (style.css) この2つをしっかり分離させてメンテナンスしやすく、かつWEB標準に準拠 したコーディングを目指します。
  92. 92. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 92 CSS記述例 •セレクタ → タグの指定 •プロパティ→ タグに設定したい内容 •値 → 設定したい内容に対する値 プロパティと値の間はコロン: 値の右側はセミコロン; セレクタ{ プロパテイ:値; プロパテイ:値; }
  93. 93. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 93 CSSの記述例 • h1要素(タグ)の背景色を青色、文字色を赤色にしたい h1{ background-color:#0000ff; color:#ff0000; /* コメント */ } •セレクタ → h1 •プロパティ → background-color (背景色) → color (文字色) •値 → #0000ff (青色) → #ff0000 (赤色)
  94. 94. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 94 スタイル定義をする方法(1) • 外部CSSファイルによるスタイル設定 – 外部ファイルにスタイルを記述する – HTMLファイルからは、スタイルファイルの場所を指定する • HTML側の定義例 – 通常はCSSフォルダ内に格納 – ファイルの拡張子「.css」 <head> <link rel="stylesheet" href="フォルダ/ファイル名" /> </head>
  95. 95. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 95 CSSの役割 HTML HTML HTML HTML HTML 表示の指定 CSS
  96. 96. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 96 スタイル定義をする方法(2) • head要素内のstyle要素に記述 – head要素の中にstyle要素を加えて宣言する • HTML側の定義例 <head> <style> p {color : #336699;} </style> </head>
  97. 97. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 97 スタイル定義をする方法(3) • インラインstyle属性 – タグの属性として直接書き込む – style = “...” という指定でスタイルシートとして認識される head要素内のstyle要素に記述 • HTML側の定義例 – body要素の中で要素(タグ)の属性として指定 <body> <p style=“color:#f00; font-size:14px;”>文字</p> </body>
  98. 98. CSSプロパティ Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 98
  99. 99. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 99 文字関連の設定 • 文字色 color : 色; • 文字サイズ(単位必須) font-size : 数値; • 文字太さ(数値, bold, normal) font-weight : bold; • フォント font-family : フォント名; • 行間 line-height : 数値;
  100. 100. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 100 フォントの設定 • フォント指定 font-family: フォント名, フォント名; • スマホ時代のフォント指定 font-family:-apple-system, 'Helvetica Neue','Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro','游ゴシック', YuGothic, Meiryo, ‘メイリオ’, Osaka, 'MS ゴシック', sans-serif;
  101. 101. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 101 フォントの設定 • 設定について – 優先したい順番に書く – 和文フォントより欧文フォントを優先 – フォントファミリー名にスペースが入っているか、全角文字が 入っているなら、 ’ ’ で囲う – Windows 8.1以降は’游ゴシック’, Win8~Vistaは’メイリ オ’,WinXP以前は'MS ゴシック‘ – appleの最新OS対応(欧文)は-apple-system – 古いapple系OS対応は、’Helvetica Neue’, ‘Hiragino Kaku Gothic Pro’を指定 – 最後に総称フォントファミリー(「sans-serif」か「serif」) を指定する。該当のフォントが無い環境への対応。
  102. 102. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 102 数値の単位 • px ピクセル:モニタ解像度に応じた単位 • % 親要素の値からの割合 • em 親要素の値からの割合で1文字分の高さが1em • rem root要素<html>からの割合。rootのemという意味 スマホ時代の単位
  103. 103. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 103 背景関連の設定 • 背景色 background-color : 色; • 背景画像 background-image : url(“画像の場所"); • 背景画像繰り返し(repeat, repeat-x, repeat-y, no-repeat) background-repeat : no-repeat; • 背景画像位置 background-position : X位置 Y位置; • 背景一括指定 background : 色 背景画像 繰り返し 位置;
  104. 104. CSSプロパティは 数が多いので ネットで調べよう Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 104
  105. 105. CSSリセット について Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 105
  106. 106. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 106 CSSリセット • IE, Chrome, Firefoxなど各ブラウザは、すべての要素 に対してCSSを設定している。(デフォルトCSS) • デフォルトCSSは、ブラウザによって設定内容が異なる 場合があり、表示崩れの要因となる • 対策として、すべての要素に対して、CSSを設定して ブラウザの差異を吸収する(リセットCSS)
  107. 107. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 107 CSSリセットの方法 • 自分でリセットCSS制作を頑張る – ↓を利用して改造すると楽 • 他の人が作ったものを利用する – すべての要素をリセット • ResetCSS2.0 – http://meyerweb.com/eric/tools/css/reset/ • HTML5Doctor – http://html5doctor.com/html-5-reset-stylesheet/ – ブラウザの差異のみ調整 • normalize.css – http://necolas.github.io/normalize.css/ • sanitaizu.css(モバイル対応) – http://jonathantneal.github.io/sanitize.css/
  108. 108. 特定の要素を 指定 Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 108
  109. 109. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 109 idとclassについて • 複数ある要素(liなど)に対して、特定の要素(3番目のliな ど)だけにCSSで指定する場合、要素に名前をつけるこ とにより実現できる • class属性 – class属性はHTMLタグに「class=“値”」として指定できる – 同じclass属性の値は、HTMLファイル内で何度も使用できる – class属性の値は、半角スペース区切りで複数指定可能 • id属性 – id属性はHTMLタグに「id=“値”」として指定できる – 同じid属性の値は、ひとつのHTMLファイル内で1回のみ使用可
  110. 110. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 110 idとclassの値のルール • 使用できる文字は、半角の以下の文字のみ 英字 数字 アンダースコア_ ハイフン- • 先頭は英字のみ • 英字の大文字・小文字は区別
  111. 111. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 111 セレクタの例 • 主な要素(タグ)の指定方法 セレクタ 説明 div タグ名を選択 #id id名を選択 .class クラス名を選択 p a 子孫要素を選択 p, ul, div 複数要素の選択 dt+dd 隣接要素の選択 img[alt=“abc”] 属性指定による選択 タグ:nth-child(数) ○番目の要素を選択
  112. 112. カラーについて Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 112
  113. 113. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 113 2つのカラーモード:RGB と CMYK • CMYKモード • 色の3原色 • 「C:シアン」「M:マゼンダ」 「Y:イエロー(黄色)」「K:黒」 • 印刷物制作主に利用するモード • RGBモード • 光の3原色 • 「R:赤」「G:緑」「B:青」 • Web制作で主に利用するモード R B G コンピュータにおける色の表現
  114. 114. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 114 CSSによるカラー指定 • 16進数による表記 – #RRGGBB – 各色に対して、00(0)~FF(255)の 16進数で記述 – 例: #ffffff、 #000000、 #ff3366、#a236c4 – 省略形: #ff3366 → #f36 • 16進数とは – 桁の繰り上がり方 • 一般的に利用しているのは10進数で、0~9の10種類の数字を利用 • 16進数は、0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f の16種類の数字を利用
  115. 115. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 115 16進数と10進数による表記比較 • 16進数 – #RRGGBB – 省略形: #ff3366 → #f36 • 10進数 – rgb(r,g,b) • 各色に対して、0~255 の10進数で記述 • 例:rgb(255,255,255)、rgb(0,0,0)、rgb(255,51,102) – rgba(r,g,b,α) • αは不透明度 • 0が透明、1が不透明とし、0~1の数値を設定 • 例:rgba(255,255,255,0.7)
  116. 116. CSSの文法 チェックをしよう Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 116
  117. 117. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 117 CSSの文法チェック • W3CによるCSS文法チェック
  118. 118. リンクの CSS設定 Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 118
  119. 119. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 119 リンクの重要性 • リンク(a要素)はユーザが操作する重要な機能 – クリックできるかどうかを表現する – マウスオーバー時に表現を変化する – 既に訪れたページかどうか伝える • a要素一つに上記の違いを表現する必要がある – リンク擬似クラスを利用する
  120. 120. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 120 リンク擬似クラス • a:link { /* 通常リンクの設定 */ } • a:visited { /* 既に訪れたリンクの設定 */ } • a:hover { /* マウスを重ねたリンクの設定 */ } • a:active { /* マウスボタンを押したリンクの設定 */ } この記述順通りに 記述すること
  121. 121. レイアウトの 基本 Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 121
  122. 122. ボックス モデル Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 122
  123. 123. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 123 ボックスモデル • HTMLのほとんどの要素は、ボックス(箱)と して考える • 重要なポイントは3つ – margin – padding – border
  124. 124. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 124 ボックスモデル content 要素の内容(文字や画像など) 他の要素 margin padding border width height
  125. 125. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 125 ボックスモデル • margin – 要素と要素の距離 • padding – 要素とcontentの距離 • border – 要素の周りの線 – 色、線種、太さの設定が可能 • content – 要素の内容そのもの
  126. 126. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 126 ボックスモデル • 上側の設定 margin-top:10px; padding-top:4px; • 右側の設定 margin-right:10px; padding-right:10px; • 下側の設定 margin-bottom:10px; padding-bottom:10px; • 左側の設定 margin-left:10px; padding-left:10px; marginとpaddingの設定方法
  127. 127. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 127 ボックスモデル • 一括指定 上右下左同時 margin:5px; padding:10px; • 一括指定 上下と右左 margin:3px 6px; padding:2px 7px; • 一括指定 上と右左と下 margin:1px 3px 2px; padding:4px 7px 6px; • 一括指定 上と右と下と左 margin:4px 3px 2px 1px; padding:2px 9px 3px 5px; marginとpaddingの設定方法
  128. 128. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 128 ボックスモデル • 一括指定 上右下左同時 border:線の太さ 線種 色 • 別々の指定 border-top:線の太さ 線種 色; border-right:線の太さ 線種 色; border-bottom:線の太さ 線種 色; border-left:線の太さ 線種 色; borderの設定方法
  129. 129. ボックスモデルの 注意点 Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 129
  130. 130. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 130 ボックスモデル content 要素の内容(文字や画像など) padding border width height box-sizing : content-box; content 要素の内容(文字や画像など) padding border width height box-sizing : border-box;
  131. 131. レイアウト 応用 Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 131
  132. 132. 要素の横並び Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 132
  133. 133. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 133 blockとinlineについて • 通常の要素は block – CSS displayプロパティに block と設定されている – ボックスモデルの内容(margin, widthなど)が設定できる – 要素は縦に積まれる • a要素は inline – CSS displayプロパティに inline と設定されている – inlineは、文章の一部という意味 – ボックスモデルの内容の一部(上下margin, width, height)が 設定できない – 要素は横に並ぶ
  134. 134. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 134 要素を横に並べる方法 • floatプロパティを使用 – 要素を手前に浮遊させ、横に並べることができる – 値は「left」もしくは「right」を設定し、その方向から順番に 並ぶ div div div div{ float:left; } divdivdiv div div
  135. 135. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 135 要素を横に並べる方法 • floatプロパティの問題点 – 要素が手前に浮遊しているため、floatを設定した要素の下側に ある要素全てに影響を与える c b a #a, #b{ float:left; } c ba aとbが手前に浮遊しているため、 aの向こう側にcが移動してしまう aとbが手前に浮遊しているため、 cと一緒にdも移動してしまう d d
  136. 136. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 136 要素を横に並べる方法 • floatプロパティの問題を解決する方法 – floatの影響を与えたくない要素にclearプロパティを設定する c b a #a, #b{ float:left; } #c{ clear:both; } c ba cからfloatの影響を解除 d d
  137. 137. ul Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 137 要素を横に並べる方法 • floatプロパティの問題点2 – ul要素・li要素のように、子要素であるli要素をfloat設定すると、 li要素が手前に浮遊するので、ul要素の高さが維持できない – clearを設定する要素がない li li li li{ float:left; } li ul lilili li
  138. 138. ul Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 138 要素を横に並べる方法(clearfix) • floatプロパティの問題の解決1 – floatを設定した要素の親要素の終了タグ直前に :after で要素を 生成し、その要素に「clear:both」を設定する – :after には、「content:””」「display:block」も設定する li li li li{ float:left; } ul:after{ content:””; display:block; clear:both; } li ul lilili li :after
  139. 139. ul Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 139 要素を横に並べる方法(overflow) • floatプロパティの問題の解決2 – floatを設定した要素の親要素に「overflow: hidden」を設定 – overflowはコンテンツのはみ出しをチェックするが、チェック する際にコンテンツの高さを調べて自動設定する li li li li{ float:left; } ul { overflow:hidden; } li ul lilili li
  140. 140. さらに レイアウト応用 Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 140
  141. 141. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 141 要素を好きな場所に配置する方法 • positionプロパティを使用 – 要素に「position:absolute」と設定するブラウザを絶対的な基 準として要素を配置できる position:absolute ブラウザ top right bottom left
  142. 142. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 142 要素を好きな場所に配置する方法 • positionプロパティを使用 – 要素Aに「position:absolute」を設定し、その親要素である要 素Bに「position:relative」を設定すると、要素Bを絶対的な基 準として要素Aを配置できる position:absolute ブラウザ top right bottom left position:relative
  143. 143. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 143 CSSセレクタの優先順位
  144. 144. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 144 セレクタ a b c d 点数 タグ名 0 0 0 1 0.0.0.1 疑似要素 0 0 0 1 0.0.0.1 nav li 0 0 0 2 0.0.0.2 ul:after 0 0 0 2 0.0.0.2 クラス 0 0 1 0 0.0.1.0 クラスが11個 0 0 11 0 0.0.11.0 疑似クラス 0 0 1 0 0.0.1.0 aside .abc 0 0 1 1 0.0.1.1 a:hover 0 0 1 1 0.0.1.1 id 0 1 0 0 0.1.0.0 style=”” 1 0 0 0 1.0.0.0 CSSセレクタの優先順位 点数が高いセレクタが 優先される
  145. 145. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 145 FTPとチェック・デバッグについて
  146. 146. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 146 FTPについて Webサーバー ユーザー Webデザイナ FTPで 制作ファイルを アップロード HTTPで ファイルを 表示
  147. 147. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 147 FFFTP(Windows) Fetch(Macintosh) • 主なFTPソフトについて FileZilla(Windows・Mac) FTPとデバッグについて
  148. 148. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 148 • DreamweaverでのFTPは便利 FTPとデバッグについて
  149. 149. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 149 誤字/脱字 HTML文法チェック リンクチェック 画像のalt属性 Scriptの動作チェック 画面の表示速度 複数のブラウザ表示チェック ・・・など • 公開前のサイトのチェック項目 FTPとデバッグについて

×