CSS/Sample
をテンプレートにして作成
LECTURE
担当科目一覧
ソーシャルデザイン概論/2024
ソーシャルデザイン演習/2024
情報デザイン論/2024
情報デザイン演習IIA/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*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){以下のソースは標準ブラウザを利用することが前...
~
~
**Sample01 Variations
***基本形（Sample01 と同じ）
#container { header, nav, main { section, aside } , foot...
//-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 } , foo...
#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.htm...
-''DEMO''：https://koichi-inoue.github.io/CSS_Sample_02/
-''CODE''：https://github.com/koichi-inoue/CSS_Sample_02
~
***参考
ページごとのレイアウトの描き分けについて
#image(Wireframe.png,right,35%)
１つのCSSで全てのページを制御するという前提に立てば、全て...
#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 を使ってボックスをレ...
-ヘッダー直下にメニューが横に並ぶ例 → [[DEMO>https://des...
-左サイドにメニューが縦に並ぶ例 → [[DEMO>https://design....
~
***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="Samp...
<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>
夏は夜。月のころはさらなり、闇もなほ、...
また、ただ一つ二つなど、ほかにうち光て...
</P>
</article>
<article>
<h1>方丈記</h1>
<p>
行く川のながれは絶えずして、しかも本の...
よどみに浮ぶうたかたは、かつ消えかつ結...
世の中にある人とすみかと、またかくの如...
</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.kyu...
-Webフォントの活用
実験的に、2つのWebフォントを使用させていただきました。
--[[M+ OUTLINE FONTS>http://mplus-fonts.sourceforge.jp/]]...
--[[Google Web Fonts / Droid Sans Mono>http://www.google....
-マルチカラム
~
~
終了行:
*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){以下のソースは標準ブラウザを利用することが前...
~
~
**Sample01 Variations
***基本形（Sample01 と同じ）
#container { header, nav, main { section, aside } , foot...
//-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 } , foo...
#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.htm...
-''DEMO''：https://koichi-inoue.github.io/CSS_Sample_02/
-''CODE''：https://github.com/koichi-inoue/CSS_Sample_02
~
***参考
ページごとのレイアウトの描き分けについて
#image(Wireframe.png,right,35%)
１つのCSSで全てのページを制御するという前提に立てば、全て...
#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 を使ってボックスをレ...
-ヘッダー直下にメニューが横に並ぶ例 → [[DEMO>https://des...
-左サイドにメニューが縦に並ぶ例 → [[DEMO>https://design....
~
***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="Samp...
<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>
夏は夜。月のころはさらなり、闇もなほ、...
また、ただ一つ二つなど、ほかにうち光て...
</P>
</article>
<article>
<h1>方丈記</h1>
<p>
行く川のながれは絶えずして、しかも本の...
よどみに浮ぶうたかたは、かつ消えかつ結...
世の中にある人とすみかと、またかくの如...
</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.kyu...
-Webフォントの活用
実験的に、2つのWebフォントを使用させていただきました。
--[[M+ OUTLINE FONTS>http://mplus-fonts.sourceforge.jp/]]...
--[[Google Web Fonts / Droid Sans Mono>http://www.google....
-マルチカラム
~
~
ページ名:
