Movatterモバイル変換

Webデザイン基礎講座01HTML5, CSS

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 Ⓒ 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/

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.

21• 書き出しの方法– Photoshop CC以前からある機能• スライスによる書き出し• スライス作成ツールで、画像エリアを作成する– Photoshop CC以降に追加された機能• レイヤー→右クリック→クイック書き出しなど• どっちがいいのか– 状況に応じて使い分ける– それぞれメリット・デメリットがあるPhotoshop作業-書き出し-Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.

22• スライスの作成– レイヤーから新規スライス• １つのレイヤーからスライスエリアを作成• メニュー［レイヤー］→［レイヤーから新規スライス］– スライス作成ツールで新規作成• 任意のエリアを画像として書き出し場合、［スライス作成ツール］を使って、ドラッグでスライス作成Photoshop作業-書き出し-Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.

Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.25２つのカラーモード：RGB と CMYK• CMYKモード• 色の3原色• 「C：シアン」「M：マゼンダ」「Y：イエロー（黄色）」「K：黒」• 印刷物制作主に利用するモード• RGBモード• 光の3原色• 「R：赤」「G：緑」「B：青」• Web制作で主に利用するモードRB Gコンピュータにおける色の表現

Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.28• 文章の設定/表示– HTML5• HTMLの装飾（レイアウト、文字サイズ、背景色など）– CSS3• 動きなどの表現（アニメーション、インタラクティブ動作）– JavaScript（後日解説）Webサイト制作に必要な技術ブラウザは、このHTMLとCSSの内容を解読して、Webサイトを表示しています。

Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.30コーディング用ツール• Dreamweaver（Adobe社：有償）– サイト全体の制作に適している統合開発環境– FTP機能が便利– リンクチェック、Emmetなど様々な機能が標準搭載• Sublime Text3（有償だけどタダで使える）– さまざまな言語に対応したテキストエディタ– パッケージをインストールし、様々な機能を追加• Brackets（Adobe社：無償）– Web言語に特化したテキストエディタ– 拡張機能をインストールし、様々な機能を追加– Photoshopと連携し、書き出しが可能

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>

CSSで出来ること• 文字や背景に色を付けられる• 文字を大きくしたり、小さくしたりできる• 文章を右寄せ、左寄せにできる• コンテンツを横並びに• 角を丸くできる• 影を付けられる• アニメーションできる• ブラウザの横幅を確認できる

Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.41ＣＳＳの役割ＨＴＭＬが文書構造を担当。ＣＳＳが装飾（見た目）を担当。Webサイトでは、装飾（見た目）に関する定義は全てＣＳＳで記述するよう規定されています。HTMLページの文書構造を記述（index.html）CSSページの装飾を記述（style.css）この２つをしっかり分離させてメンテナンスしやすく、かつＷＥＢ標準に準拠したコーディングを目指します。

Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.51Web制作のファイルについて• フォルダ名、ファイル名は必ず半角英数字_-のみを使用• 構成ファイル– HTMLファイル（拡張子html）– CSSファイル（拡張子css）– Javascriptファイル（拡張子js）• 使用できる画像形式– jpegファイル（拡張子jpeg, jpg）• フルカラー向け画像– gifファイル（拡張子gif）• 256色以下のロゴなどの画像– pngファイル（拡張子png）• 透明箇所がある画像– svgファイル（拡張子svg）• ベクター形式画像

Copyright Ⓒ 2012 Yoshihiro Takahashi. All Rights Reserved.54ＨＴＭＬの流れSGMLHTMLHTML 4.01XML 1.0XHTML 1.01980年代複雑で使いづらい情報発信に！！1999.122000.1もっと文章としてルールを厳しく1999.2インターネットに適合するようにHTML 5.0XHTML 1.1XHTML 2.02014.10Webサイトとして、スマホ対応など含めた内容に2001.5

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. 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. 68代表的なHTMLタグ• 文書のヘッダ (header)– header要素には、セクション（または文書全体）に対するイントロダクションやナビゲーションの手助けとなる内容を配置します<header>見出し（ページのタイトル、セクションの見出し）メニュー（グローバルナビゲーション）イントロダクション（前置き）ロゴ（サイトや企業のロゴ）</header>

Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 74代表的なHTMLタグ• ナビゲーション (navigation)– nav要素は、外部サイトへのリンクメニューとナビゲーションとを区別するために使用します。<nav>グローバルナビゲーション（ヘッダに配置されるリンクメニュー）パンくずリスト（階層を表すリンクメニュー）ページャー（ページ送りのリンクメニュー）ページ内リンク（各セクションに移動するためのリンクメニュー）</nav>

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. 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>© 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.91ＣＳＳの役割ＨＴＭＬが文書構造を担当。ＣＳＳが装飾（見た目）を担当。Webサイトでは、装飾（見た目）に関する定義は全てＣＳＳで記述するよう規定されています。HTMLページの文書構造を記述（index.html）CSSページの装飾を記述（style.css）この２つをしっかり分離させてメンテナンスしやすく、かつＷＥＢ標準に準拠したコーディングを目指します。

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.97スタイル定義をする方法（3）• インラインstyle属性– タグの属性として直接書き込む– style = “...” という指定でスタイルシートとして認識されるhead要素内のstyle要素に記述• HTML側の定義例– body要素の中で要素（タグ）の属性として指定<body><p style=“color:#f00; font-size:14px;”>文字</p></body>

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, 'ＭＳゴシック', sans-serif;

Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.101フォントの設定• 設定について– 優先したい順番に書く– 和文フォントより欧文フォントを優先– フォントファミリー名にスペースが入っているか、全角文字が入っているなら、 ’ ’ で囲う– Windows 8.1以降は’游ゴシック’, Win８～Ｖistaは’メイリオ’,WinXP以前は'ＭＳゴシック‘– appleの最新OS対応（欧文）は-apple-system– 古いapple系OS対応は、’Helvetica Neue’, ‘Hiragino KakuGothic Pro’を指定– 最後に総称フォントファミリー（「sans-serif」か「serif」）を指定する。該当のフォントが無い環境への対応。

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 : 色背景画像繰り返し位置;

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.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.111セレクタの例• 主な要素（タグ）の指定方法セレクタ説明div タグ名を選択#id id名を選択.class クラス名を選択p a 子孫要素を選択p, ul, div 複数要素の選択dt+dd 隣接要素の選択img[alt=“abc”] 属性指定による選択タグ:nth-child(数) ○番目の要素を選択

Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.113２つのカラーモード：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,α)• αは不透明度• ０が透明、１が不透明とし、０~１の数値を設定• 例：rgba(255,255,255,0.7)

Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.120リンク擬似クラス• a:link {/* 通常リンクの設定 */}• a:visited {/* 既に訪れたリンクの設定 */}• a:hover {/* マウスを重ねたリンクの設定 */}• a:active {/* マウスボタンを押したリンクの設定 */}この記述順通りに記述すること

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.130ボックスモデルcontent要素の内容（文字や画像など）paddingborder widthheightbox-sizing : content-box;content要素の内容（文字や画像など）paddingborderwidthheightbox-sizing : border-box;

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. 135要素を横に並べる方法• ﬂoatプロパティの問題点– 要素が手前に浮遊しているため、floatを設定した要素の下側にある要素全てに影響を与えるcba#a, #b{float:left;}c baaとbが手前に浮遊しているため、aの向こう側にcが移動してしまうaとbが手前に浮遊しているため、cと一緒にdも移動してしまうdd

ulCopyright © 2015 Yoshihiro Takahashi All Rights Reserved. 137要素を横に並べる方法• ﬂoatプロパティの問題点２– ul要素・li要素のように、子要素であるli要素をfloat設定すると、li要素が手前に浮遊するので、ul要素の高さが維持できない– clearを設定する要素がないlililili{float:left;}liullilili li

ulCopyright © 2015 Yoshihiro Takahashi All Rights Reserved. 138要素を横に並べる方法（clearfix）• ﬂoatプロパティの問題の解決１– 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）• ﬂoatプロパティの問題の解決2– floatを設定した要素の親要素に「overflow: hidden」を設定– overflowはコンテンツのはみ出しをチェックするが、チェックする際にコンテンツの高さを調べて自動設定するlililili{float:left;}ul {overflow:hidden;}liullilili li

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.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セレクタの優先順位点数が高いセレクタが優先される

Movatterモバイル変換

Change Language

Webデザイン入門１－HTML5・CSSについて－

Embed presentation

Recommended

More Related Content

What's hot

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

More from Yossy Taka

Webデザイン入門１－HTML5・CSSについて－