#author("2023-05-02T16:17:29+09:00;2023-05-02T16:16:10+09:00","default:inoue.ko","inoue.ko") #author("2023-05-02T16:18:19+09:00;2023-05-02T16:17:29+09:00","default:inoue.ko","inoue.ko") *CSS Sample HTML + CSS Sample Code ~ ***CONTENTS #contents2_1 ~ **Sample01 [[HTML5 Semantic>GoogleImage:HTML5 Semantic]] の基本形です。 -''DEMO''：https://koichi-inoue.github.io/CSS_Sample_01/ -''CODE''：https://github.com/koichi-inoue/CSS_Sample_01 &color(red){''注意''}; &color(red){以下のソースは標準ブラウザを利用することが前提なので <main>タグを使用していますが、InternetExplorerではHTML5の<main>タグが使えません。またMicrosoft Edgeでも <main>を inline要素として認識するという異端ぶりなので、そのあたりが標準化されるまでは <main> のかわりに <div id="main"> などとする方がいいでしょう。2017年現在。}; ~ ~ **Sample01 Variations ***基本形 ***基本形（Sample01 と同じ） #container { header, nav, main { section, aside } , footer } -DEMO：https://koichi-inoue.github.io/SampleSite -CODE：https://github.com/koichi-inoue/SampleSite //-DEMO：https://koichi-inoue.github.io/SampleSite //-CODE：https://github.com/koichi-inoue/SampleSite ~ ***header の中に nav があるパターン #image(CSS/sample01.jpg,right,20%) #container{ header{ nav } , main{ section, aside } , footer } #clear ~ ***main の中に ３つのブロックがあるパターン（３カラム） #image(CSS/sample02.jpg,right,20%) #container{ header, main{ nav, section, aside } , footer } #clear ~ ***header, footer が画面幅100%になるパターン #image(CSS/sample03.jpg,right,20%) header{ nav } , main{ section, aside } , footer #clear 上記３つの実現事例（コードまとめ） -&ref(CSS/LayoutVariations.zip); ~ ~ **Sample 02 Sample 01をレスポンシブ（640px）にすると同時に、index.html と works.html の２ページを、ID を使ってレイアウトを書き分けた事例です。 -''DEMO''：https://koichi-inoue.github.io/CSS_Sample_02/ -''CODE''：https://github.com/koichi-inoue/CSS_Sample_02 ~ ***参考 ページごとのレイアウトの描き分けについて #image(Wireframe.png,right,35%) １つのCSSで全てのページを制御するという前提に立てば、全てのページでHTMLの基本構造が同一であることが必要です。このサンプルでは、標準ページ（index.html）のレイアウトに対する、例外ページ（works.html）のレイアウトを、IDの追加と、追加のCSSを書く方法で実現しています。HTMLの構造をワイヤーフレームで比較すると右のようになります。section の部分に IDを追加しただけです。 #clear -works.html の section に以下のようにIDを追加しています。 <section id="gallery"> -style.css に以下のようにスタイルを追加しています。 /******** Gallery Style ********/ section#gallery { display: flex; flex-wrap: wrap; justify-content: space-around; } section#gallery article { width: 160px; margin-right: 1rem; margin-bottom: 3rem; line-height: 150%; } section#gallery article div{ margin-bottom: 0.5rem; } ~ ~ **過去記事 &color(red){これ以下の記事は、float を使ってボックスをレイアウトする内容になっています。現実には古いPC・ブラウザで見ている方も多くいるので、以下のサンプルの方がみんなにやさしい・・のですが、これから学習する方は上記のFlexboxによるレイアウトサンプルを参考にして下さい。}; -ヘッダー直下にメニューが横に並ぶ例 → [[DEMO>https://design.kyusan-u.ac.jp/SampleSite/SampleSiteA/]] -左サイドにメニューが縦に並ぶ例 → [[DEMO>https://design.kyusan-u.ac.jp/SampleSite/SampleSiteB/]] ~ ***index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>Sample Site</title> </head> <body> <div id="container"> <header> <img id="logo" src="images/logo.png" alt="Sample Site"> <h1 id="pageTitle">information</h1> </header> <nav> <ul> <li><a href="index.html">home</a></li> <li><a href="gallery.html">gallery</a></li> <li><a href="#">profile</a></li> <li><a href="#">links</a></li> </ul> </nav> <div id="contents"> <article> <h1>春はあけぼの</h1> <p> 春はあけぼの。やうやう白くなりゆく山際、少し明かりて、<br> 紫だちたる雲の細くたなびきたる。<br> 夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。<br> また、ただ一つ二つなど、ほかにうち光て行くもをかし。雨など降るもをかし。<br> </P> </article> <article> <h1>方丈記</h1> <p> 行く川のながれは絶えずして、しかも本の水にあらず。<br> よどみに浮ぶうたかたは、かつ消えかつ結びて久しくとゞまることなし。<br> 世の中にある人とすみかと、またかくの如し。<br> </P> </article> </div> <footer> © Your Name http://www.xxxxx.com </footer> </div> </body> </html> ~ ***style.css * { margin: 0px; padding: 0px; border: none; line-height: 100%; list-style-type: none; text-decoration: none; } body { font-family: Tahoma, sans-serif; background-color: silver; } #container { margin: auto; position: relative; width: 960px; background-color: white; } header { height: 160px; background-color: #e8e8e8; } #logo { position: absolute; top: 80px; left: 40px; width: 40px; } header h1 { position: absolute; top: 90px; left: 100px; color: #333333; } nav { height: 40px; padding-left: 40px; background-color: #333333; } nav li { float: left; } nav li a{ display: block; width: 80px; padding: 12px 0px; font-weight: bold; color: silver; } nav li a:hover{ color:white; } #contents { margin: 40px; } article { margin-bottom: 40px; } article p { line-height: 180%; } article h1{ margin-bottom: 16px; } footer { clear: both; padding: 40px; text-align: center; background-color: #e8e8e8; } ~ ***参考 Webフォント・マルチカラムの例 [[→DEMO>https://design.kyusan-u.ac.jp/SampleSite/SampleSiteC]] -Webフォントの活用 実験的に、2つのWebフォントを使用させていただきました。 --[[M+ OUTLINE FONTS>http://mplus-fonts.sourceforge.jp/]] 本文（プロポーショナル） --[[Google Web Fonts / Droid Sans Mono>http://www.google.com/webfonts#HomePlace:home]] コード部分（モノスペース） -マルチカラム ~ ~