LogoMark.png

CSS/Sample のバックアップの現在との差分(No.1)


#author("2021-09-25T11:11:19+09:00;2021-09-25T11:11:01+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

~

***header の中に nav があるパターン
#image(CSS/sample01.jpg,right,20%)
 #container{ header{ nav } , main{ section, aside } , footer }
#clear
~

***main の中に 3つのブロックがあるパターン(3カラム)
#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

上記3つの実現事例(コードまとめ)
-&ref(CSS/LayoutVariations.zip);

~
~

**Sample 02
Sample 01をレスポンシブ(640px)にすると同時に、index.html と works.html の2ページを、ID を使ってレイアウトを書き分けた事例です。
-''DEMO'':https://koichi-inoue.github.io/CSS_Sample_02/
-''CODE'':https://github.com/koichi-inoue/CSS_Sample_02
~

***参考
ページごとのレイアウトの描き分けについて

#image(Wireframe.png,right,35%)
1つの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>
         &copy; 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]] コード部分(モノスペース)
-マルチカラム

~
~