Movatterモバイル変換


[0]ホーム

URL:


Yossy Taka, profile picture
Uploaded byYossy Taka
2,828 views

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

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

Embed presentation

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

Recommended

PDF
Web勉強会(HTML+CSS+JS入門の入門)
PDF
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
PDF
Webの仕組みとプログラミング言語
PDF
WebデザイナのためのjQuery入門。
PDF
JavaScript Basic 01
PDF
スマホアプリ開発-プロモーション・集客・サポート・広告収入-
PDF
JavaScript Basic 02 jQuery
PDF
JavaScript basic, jQuery animation
PDF
クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~
PPTX
メンテナブルなJsってなんだろう
PDF
WordPressで作るポートフォリオサイト
PPTX
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
PDF
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
PDF
Scc2014 :jQueryの仕組みを完璧に理解する
PDF
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
PDF
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
PPTX
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
PDF
「最新デフォルトテーマをひも解きながら、オリジナルテーマへとカスタマイズするヒントを学ぼう。」in ゆるゆるカフェ
PDF
知っておきたい「Web制作イマドキの注目ポイント」
PDF
Web development fundamental_v2
PDF
WordPressってこんなCMS
PDF
WordBench京都版 _sハンズオン
PDF
Webページが表示されるまで
PDF
⑳CSSでアニメーション!その1
PDF
⑮jQueryをおぼえよう!その1
PDF
WordPressでウェブサービスを作ろう! #wbNagoya
PDF
JavaScriptで出来る、あんなことこんなこと
PDF
JavaScript04 jquery プラグインを使おう
PPT
Webdirection
PDF
プロトタイプ時代の
WordPressテーマの作り方・考え方

More Related Content

PDF
Web勉強会(HTML+CSS+JS入門の入門)
PDF
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
PDF
Webの仕組みとプログラミング言語
PDF
WebデザイナのためのjQuery入門。
PDF
JavaScript Basic 01
PDF
スマホアプリ開発-プロモーション・集客・サポート・広告収入-
PDF
JavaScript Basic 02 jQuery
PDF
JavaScript basic, jQuery animation
Web勉強会(HTML+CSS+JS入門の入門)
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
Webの仕組みとプログラミング言語
WebデザイナのためのjQuery入門。
JavaScript Basic 01
スマホアプリ開発-プロモーション・集客・サポート・広告収入-
JavaScript Basic 02 jQuery
JavaScript basic, jQuery animation

What's hot

PDF
クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~
PPTX
メンテナブルなJsってなんだろう
PDF
WordPressで作るポートフォリオサイト
PPTX
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
PDF
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
PDF
Scc2014 :jQueryの仕組みを完璧に理解する
PDF
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
PDF
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
PPTX
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
PDF
「最新デフォルトテーマをひも解きながら、オリジナルテーマへとカスタマイズするヒントを学ぼう。」in ゆるゆるカフェ
PDF
知っておきたい「Web制作イマドキの注目ポイント」
PDF
Web development fundamental_v2
PDF
WordPressってこんなCMS
PDF
WordBench京都版 _sハンズオン
PDF
Webページが表示されるまで
PDF
⑳CSSでアニメーション!その1
PDF
⑮jQueryをおぼえよう!その1
PDF
WordPressでウェブサービスを作ろう! #wbNagoya
PDF
JavaScriptで出来る、あんなことこんなこと
PDF
JavaScript04 jquery プラグインを使おう
クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~
メンテナブルなJsってなんだろう
WordPressで作るポートフォリオサイト
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
Scc2014 :jQueryの仕組みを完璧に理解する
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
「最新デフォルトテーマをひも解きながら、オリジナルテーマへとカスタマイズするヒントを学ぼう。」in ゆるゆるカフェ
知っておきたい「Web制作イマドキの注目ポイント」
Web development fundamental_v2
WordPressってこんなCMS
WordBench京都版 _sハンズオン
Webページが表示されるまで
⑳CSSでアニメーション!その1
⑮jQueryをおぼえよう!その1
WordPressでウェブサービスを作ろう! #wbNagoya
JavaScriptで出来る、あんなことこんなこと
JavaScript04 jquery プラグインを使おう

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

PPT
Webdirection
PDF
プロトタイプ時代の
WordPressテーマの作り方・考え方
PDF
アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎
PDF
ウェブデザインの本質と、構成要素
PPT
Webサイト入門
 
PDF
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
KEY
HTML5での制作、いつから始める?
PDF
_WEB の作業が楽になるテクニック総まとめ 第7回
PDF
終わりなきWebの旅
PDF
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
PDF
Mtddc hokkaido-2010-ideamans-session
PDF
Attractive HTML5
PDF
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
PDF
Concentrated HTML5 & Attractive HTML5
PDF
Visual Web Developer 2010 とExpression Web 4 で構築する HTML5 と JavaScript
PDF
Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -
PDF
更に進化するCSSの表現力と 新しいWebツール [Reloaded]
PDF
Web制作勉強会 #1
PPTX
FITC2014 モダンなWeb
PDF
マークアップ講座 02 CSS
Webdirection
プロトタイプ時代の
WordPressテーマの作り方・考え方
アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎
ウェブデザインの本質と、構成要素
Webサイト入門
 
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
HTML5での制作、いつから始める?
_WEB の作業が楽になるテクニック総まとめ 第7回
終わりなきWebの旅
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
Mtddc hokkaido-2010-ideamans-session
Attractive HTML5
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
Concentrated HTML5 & Attractive HTML5
Visual Web Developer 2010 とExpression Web 4 で構築する HTML5 と JavaScript
Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -
更に進化するCSSの表現力と 新しいWebツール [Reloaded]
Web制作勉強会 #1
FITC2014 モダンなWeb
マークアップ講座 02 CSS

More from Yossy Taka

PDF
Javascript入門-デジタル時計を作りながらJavaScriptを学ぼう-
PDF
Canvasでペイントアプリ作成
PDF
Canvasによるデジタル時計制作入門
PDF
canvasによるアナログ時計の作成
PDF
HTML5 Local Storageを利用したメモ帳アプリ
PDF
Ajax非同期通信によるサーバー通信
PDF
JavaScriptによるvideo audio要素のコントロール入門
PDF
JavaScriptによるgoogle maps apiの使い方
PDF
ハイブリッドアプリについて-PhoneGapアプリ制作の入り口-
PDF
Bracketsを使おう
PDF
Canvas入門01-図形描画とJS活用-
PDF
JavaScriptのオブジェクト:Mathオブジェクト、Dateオブジェクト
PDF
WebサイトへのYotutube動画の設置
PDF
Emmetの使い方
PDF
JavaScript 基礎文法のまとめ
Javascript入門-デジタル時計を作りながらJavaScriptを学ぼう-
Canvasでペイントアプリ作成
Canvasによるデジタル時計制作入門
canvasによるアナログ時計の作成
HTML5 Local Storageを利用したメモ帳アプリ
Ajax非同期通信によるサーバー通信
JavaScriptによるvideo audio要素のコントロール入門
JavaScriptによるgoogle maps apiの使い方
ハイブリッドアプリについて-PhoneGapアプリ制作の入り口-
Bracketsを使おう
Canvas入門01-図形描画とJS活用-
JavaScriptのオブジェクト:Mathオブジェクト、Dateオブジェクト
WebサイトへのYotutube動画の設置
Emmetの使い方
JavaScript 基礎文法のまとめ

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

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

[8]ページ先頭

©2009-2025 Movatter.jp