10回目授業内容 CSS外部リンク〜イラストレーターの練習〜脱線話
CSS外部リンク
- HTML文法の検証
- 外部スタイルシートの入力①
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSS外部リンク</title> <link rel="stylesheet" href="css/style.css" media="screen,print"> </head> <body> <div id="shopping"> <h2>今日買った物</h2> <ul> <li>豚肉</li> <li>じゃがいも</li> <li>たまねぎ</li> <li>にんじん</li> </ul> </div> </body> </html>
@charset "UTF-8";
* {
margin: 0;
padding: 0;
}
#shopping {
margin: 50px 0 0 50px;
padding: 10px;
border: 1px solid#ccc;
width: 400px;
font-size: small;
}
#shopping h2 {
background-color: #006CCF;
padding: 3px 0.5em;
color: #fff;
font-size: small;
font-weight: normal;
}
#shopping ul {
list-style-type: none;
}
#shopping li {
border-bottom: 1px dotted #ccc;
padding: 3px;
}
-
- hに対してストロング（強調）はつけない→SEO的によくない
- 外部スタイルシートの入力②
@charset "UTF-8";
* {
margin: 0;
padding: 0;
}
body {
font-family:
sans-serif;
font-size: 1.0em;
text-align: center;/*IE6対策*/
}
h1 {
font-size: large;
color: #fff;
margin: 20px 0;
padding: 20px 0;
background-color: #9acf9c;
}
p {
font-size: 0.875em;
line-height: 1.5;
color: #555;
text-align: left;
margin: 0 0 20px 0;
}
address {
font-size: 0.7em;
font-style: normal;
color: #55924f;
text-align: center;
padding top: 8px;
border-top: solid 9px #9acf9c;
}
.box {
width: 480px;
margin: 0 auto;/*順番が違えば影響されやすい*/
}
- 外部スタイルシートの入力③
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>無題ドキュメント</title> <link rel="stylesheet" href="css/style3.css" media="screen, print"> </head> <body> <div class="box"> <h3>デザインの話</h3> <div> <p>物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。</p> <p>物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。</p> </div> </div> <div class="box"> <h3>パッケージの色</h3> <div> <p>パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。</p> <p>パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。</p> </div> </div> </body> </html>
@charset "UTF-8";
* {
margin: 0;
padding: 0;
font-size: 1.0em;
font-family:
"Hiragino Kaku Gothic Pro",
"ヒラギノ角ゴ Pro W3",
Meiryo,
"メイリオ",
Osaka,
"MS P Gothic",
"ＭＳ Ｐゴシック",
sans-serif;
}
.box {
width: 560px;
margin: 30px 0;
}
h3 {
width: 140px;
padding: 2px 0 4px 0;
font-size: 1.1em;
color: #000;
text-align: right;
float: left;
}
.box div {
margin-left: 150px;
border-left: solid 4px #ff7f00;
padding-left: 10px;
}
p {
text-align: justify;
line-height: 1.5;
font-size: 0.875em;
color: #888;
}
- 外部スタイルシートの入力④
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>無題ドキュメント</title> <link rel="stylesheet" href="css/style4.css" media="screen,print"> </head> <body> <div class="content"> <h1>構造主義の四銃士</h1> <p>言語学に限られていた「構造主義」の理説ををそれぞれの分野で展開し、後の世代に多大な影響を与えたのは次の４人です。</p> <ul> <li>ミシェル・フーコー</li> <li>ロラン・バルト</li> <li>クロード・レヴィ＝ストロース</li> <li>ジャック・ラカン</li> </ul> <p>生まれた順番は、次の通りです。</p> <ol> <li>ジャック・ラカン</li> <li>クロード・レヴィ＝ストロース</li> <li>ロラン・バルト</li> <li>ミシェル・フーコー</li> </ol> </div> <div class="content"> <h1>それぞれの功績</h1> <dl> <dt>ミシェル・フーコー</dt> <dd>構造論的な手法による歴史分析を通して、西欧的人間像の系譜を明らかにした</dd> <dt>ロラン・バルト</dt> <dd>言語＝文化が社会の中で「制度」として人々に及ぼす影響を分析した</dd> <dt>クロード・レヴィ＝ストロース</dt> <dd>構造言語学の考え方を人類学の中に導入して構造主義の方法を確立</dd> <dt>ジャック・ラカン</dt> <dd>「フロイトに還れ」を合言葉に、独自の精神分析学理論を展開</dd> </dl> </div> </body> </html>
@charset "UTF-8";
body {
font-size: 0.875em;
}
.content {
margin: 0 0 25px 10px;
width: 500px;
}
h1 {
margin: 0 0 10px 0;
padding: 5px 35px 10px 16px;
background-color: #eaeaea;
border: 1px solid #000;
font-size: 1.6em;
color: #036;
}
ul {
list-style-type: none;
list-style-image: url(../img/01.gif);
}
- 外部スタイルシートの入力⑤
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>縦ナビメニュー</title> <link rel="stylesheet" href="css/style5.css" media="screen,print"> </head> <body> <div class="nav"> <ul> <li><a href="#">メニューのリンク１</a></li> <li><a href="#">メニューのリンク２</a></li> <li><a href="#">メニューのリンク３</a></li> <li><a href="#">メニューのリンク４</a></li> <li><a href="#">メニューのリンク５</a></li> </ul> </div> </body> </html>
@charset "UTF-8";
.nav {
font-size: 0.875em;
}
.nav li {
color: #000;
line-height: 1.2em;
color: #f00;
}
.nav li a {
color: #000;
text-decoration: none;
}
.nav li a:hover {
color: #f80;
text-decoration: underline;
}
- 外部スタイルシートの入力⑥
@charset "UTF-8";
.nav {
margin: 50px;
width: 200px;
font-size: 1.0em;
}
.nav ul {
magin: 0;
padding: 0;
list-style-type: none;
border-top: solid 1px #aaa;
}
.nav ul li {
margin: 0;
padding: 10px 0 9px 1em;
background-color: #f3f3f3;
border-bottom: solid 1px #aaa;
}
.nav li a:link {
color: #000;
text-decoration: none;
}
.nav li a:hover, .nav li a:active {
color: #f80;
}
- 外部スタイルシートの入力⑦
@charset "UTF-8";
.nav {
margin: 50px;
width: 200px;
height: auto;
}
.nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.nav li {
font-weight: bold;
border-bottom: solid 1px #fff;
}
.nav li a:link {
color: #fff;
font-size: 0.9em;
text-decoration: none;
display: block;
padding: 10px 10px 9px 1em;
background-color: #393;
}
.nav li a:visited {
color: #ff9;
}
.nav li a:hover, .nav li a:active {
background-color: #f90;
}
