2010年11月24日

CSSの基礎 〜文字・画像・背景など〜

HTML/CSSを使ってのサイトデザインを行っています。
使いこなせては全くいないけど、どうやってサイトがデザインされてるのかなんとなく分かってきた。


【この課での目標】

CSSを用いてのサイトデザイン

【教材範囲】

はじめてのホームページHTML入門 の141〜191ページ

【成果物】

http://programming.so.land.to/20101124-1.html
※Chromeだと見れません。

【つまづいた箇所・解決法】

CSS上の効果を二つ使う方法がわからない。
→spanで二度囲んでやる。

CSS上に書き込んだ結果が表れない。
→;の書き忘れ。

span crass="◯◯"が有効にならない
→CSS上で.の打ち忘れ。

画像の挿入の際にフォルダの中に入れておくと検知されない
→同じ層へ。

positionの後のcenter、topなどは半角スペースで並列化能。


【未解決の悩み】

text-indent: -1.5em;
が表示されず。


【ソース】

※タグの囲み(<)を半角から全角に置換してあります。

〜HTML〜

<html>
<head>
<title>CSSを使った記述</title>

<link rel="stylesheet" type="text/css" href="20101124.css">

</head>
<body>
<h1>CSSを使った記述の練習<span id="small">〜少しずついじっていきます〜</span></h1>

<div id="padding-20151015">
こんにちは。<br>
<span id="big-t">CSS</span>を使って<br>
<span id="big-t2">サイトのデザイン</span>を行っています。<br>
</div>

<div id="margin-1em">
<span id="cap-i">この行では斜体表示を行います。</span><br>
<span id="over-t">この行では上線を表示します。</span><br>
<span id="under-t">この行では下線を表示します。</span><br>
</div>

<p class="l-space-25">
ここでは文章の行間の調整あたりを行っています。<br>
PCはMacでテキストソフトはmiを使っています。<br>
何が一番使いやすいんだろ。<br>
</p>

<p class="background">
画像の背景表示<br>
テスト
</p>

<p id="indent-t" class="bottom-em40">
文章の一文字目にだけ空白を加えます。<br>
色々とやってみて、
ちゃんと出来ているかテスト。

<div id="photo-border">
<image src="india01.jpg">
<span id="big-t"><span id="under-t">写真です。</span></span>
</div>

<div id="right-a" class="padding-20151015">2010/11/24</div>
</body>
</html>


〜CSS〜



body {
color: gray;
background-image: url(gradient.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-color: pink;
}

h1 {
color: #ff6600;
font-size: 2.5em;
text-align: center;
padding: 0.5em;
border-style: double;
letter-spacing: -0.15em;
}

#small {
font-size: 50%;
}

#right-a {
text-align: right;
}

#big-t {
font-weight: bold;
padding: 0.2em;
border-style:solid none solid none;
border-width: 3px;
border-color: #ff6666;
background-color: #ffff00;
line-height: 40px;
}

#big-t2 {
font-weight: 900;
text-indent: -2em;
}

#cap-i {
font-style: italic;
}

#indent-t{
text-indent: 1em;
}

#over-t{
text-decoration: overline;
}

#under-t{
text-decoration: underline;
}

.bottom-em40{
padding-bottom: 5em;
}

#padding-20151015{
padding: 20px 15px 10px 15px;
}

#margin-1em{
margin: 1em;
}

#photo-border{
margin-bottom: 1em;
padding: 1em;
border-style: solid;
border-width: 1px;
background-color: #ccff99;
background-image: url(gradient.jpg);
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}

p {
line-height: 1.5em;
}

.l-space-25 {
letter-spacing: 0.25em;
}

.l-space-25:first-letter{
color: #ff6600;
font-size: 200%;
border: solid 2px;
padding: 3px;
margin: 3px;
}

.background{
background-image: url(gradient.jpg);
}
posted by yuuya1986 at 13:22| Comment(0) | HTML/CSS | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。