- 追加された行はこの色です。
- 削除された行はこの色です。
#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>
© 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]] コード部分(モノスペース)
-マルチカラム
~
~