スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

style.cssの簡単な説明

同人音楽特設用テンプレートのstyle.css(ベースにはいっているもの)の簡単な説明です。
初心者向け……に書いたつもりですが、わからないことは検索していただく前提です。

本文中、引用のblockquoteを使用しているところは
この色 ■■■の文字が上から順番に説明している文章で
この色 ■■■の文字は補足説明みたいなものです。

★読む前に
(CSSだけの話ではありませんが)
全部を0にしたあと、個別に数値を追加する、など上書きするやり方が多く出てきます。
ファイルは上から読まれていきますが、同じものがあれば上書きされていきます。
一部分だけ上書きをすることで、そこだけ違うデザインを適用するなどで使われます。

「color:#999;」、「margin:5px 15px;」など省略した書き方が幾つか出てきます。
これについては、該当のものを、CSSリファレンス等で検索してご確認ください。

margin(マージン)とpadding(パディング)とborder(ボーダー)は密接にかかわりがあります。
便宜上マージンを「外側余白」、パディングを「内側余白」と呼びますが、
それは、ボーダーの外側か、内側か、という意味です。

そのままCSSにコピーして貼りつけると、デザイン設定がうまくいかないので気をつけてください。

CSS部分は追記に折りこんでます。
--------------- 同人音楽特設用テンプレート style.css

@charset "UTF-8";

・文字コードはUTF-8ですという宣言


/* CSS Document */

/*---------- 全体設定 ----------*/
*{
margin:0;
padding:0;
color:#999;
font-size:12px;
border:none;
line-height:22px;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
}

・全てのマージン(外側余白)を0にする。
・全てのパディング(内側余白)を0にする。
・全ての文字の色を#999(#999999)にする。
・全ての文字サイズを12pxにする。
・全てのボーダー(線)をなしにする。
・全ての文字の行間を22pxにする。
・全てのフォントをヒラギノ角ゴ Pro W3にする。それがなければメイリオ、Osaka、MS Pゴシックという順番で表示に使用するフォントを決定。


「*」は「全ての」という意味だと思っていただければ。同じ「*」でも、「/**/」←この中はコメントアウトです。
line-heightについては、ないほうがいいよ、px指定よりは他の単位とかをというのもあります。
font-familyになぜ英語表記のフォント名があるのかというと、一部のブラウザではフォント名が英語表記でないと読まれないからです。ヒラギノ角ゴが最初になっていることなどfont-familyについてはこちらのブログ(→webデザイナーのナナメガキ/CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係)を参照ください。


p{margin:5px 15px;}

・段落のマージン(外側余白)を上下5px、左右15pxにする。

pは段落に関する設定です。
*{}内で全てのmarginを0にしているので、ここで個別に追加しています。


a{ color:#666;
font-weight:bold;}
a:hover{color:#000;}

・リンク色を#666(#666666)にする。
・リンクの文字を太字にする。
・リンクにマウスが乗った際の色を#000(#000000)にする。


aはリンクに関する設定です。
a:hoverはマウスが乗った際、a:visitedは既に見たページである場合の色、などの設定があります。
:hoverはほかにも応用できます。div#content:hoverとか。


/*---------- Container ----------*/
div#container{
background:#FFF;
border-left:solid 1px #000;
border-right:solid 1px #000;
width:800px;
margin:0 auto;
}

divというボックスの#containerという名前が付いているものだけに(HTMLでの表記は<div id="container">)、下記の設定をします。
・背景色を#fff(#ffffff)にする。
・左側に実線 1pxの#000(#000000)の線をいれる。
・右側に実線 1pxの#000(#000000)の線を入れる。
・ボックスの幅を800pxにする。
・マージン(外側余白)を上下0、左右を自動にする。


margin:0 auto;による中央揃えをしています。
以前は<center>というHTMLタグを使っていたかもしれませんが、CSSで中央揃えができます。
CSSで「div#container」と書いた場合は、HTMLでdivのid="container"のみに設定します。
divを消した場合はid="container"を付けたところ全てに設定できます。


/*---------- Header ----------*/
div#header h1{
text-align:right;
font-size:10px;
padding:5px;}

divというボックスの#headerという名前が付いているものの中にある、h1だけに、下記の設定をします。
・文字を右に寄せる。
・文字サイズを10pxにする。
・パディング(内側余白)を上下左右5pxにする。


h1は見出し1です。その他にh2〜と数字を増やすことで別の見出しが使えます。数字を飛ばすことはよくないと言われているので、CSSでフォントサイズなどを設定するのが良いです。
padding:5px;という表記は上下左右全て、という意味になります。


/*---------- Contents ----------*/
div#contents{margin:30px;}

divというボックスの#contentsという名前が付いているものだけに(HTMLでの表記は<div id="contents">)、下記の設定をします。
・上下左右外側余白を30pxにする。


div#contents h2{
padding:10px 0 0 0;
font-size:14px;
letter-spacing:2pt;
clear:both;
}

divというボックスの#contentsという名前が付いているものの中にある、h2だけに、下記の設定をします。
・パディング(内側余白)を上10px、右0、下0、左0にする。
・文字サイズを14pxにする。
・字間を2ptにする。
・回り込みを解除する。


clear:both;は、float:right;やfloat:left;を使用した際に大切なおまじないです。
これをいれないとどうなるのか……というのはご自分の目で確かめてください。
そのほうが分かりやすいと思うので。


div#detiles dl, div#detiles p{margin:0 0 5px 400px;}

divというボックスの#detilesという名前が付いているものの中にある、dlと、divというボックスの#detilesという名前が付いているものの中にある、pだけに、下記の設定をします。
・マージン(外側余白)を上0、右0、下5px、左400pxにする。


「,」はandです。
同じデザインを付ける場合は、このように連結して書くとCSSの行数も減り綺麗になります。


div#detiles dt{font-weight:bold;}

divというボックスの#detilesという名前が付いているものの中にある、dtだけに、下記の設定をします。
・文字を太字にする。


div#detiles dd{margin:0 0 15px 0;}

divというボックスの#detilesという名前が付いているものの中にある、ddだけに、下記の設定をします。
・マージン(外側余白)を上0、右0、下15px、左0にする。


div#detiles img{
float:left;
margin:0 0 0 15px;
}

divというボックスの#detilesという名前が付いているものの中にある、imgだけに、下記の設定をします。
・左寄せにして、その後に続くテキストや画像を隣に回り込ませる。
・マージン(外側余白)を上0、右0、下0、左15pxにする。


float:left;、float:right;を使用することで、新聞や雑誌のような段組をつくることができます。


/*---------- Footer ----------*/
div#footer{
text-align:center;
padding:10px;}

divというボックスの#footerという名前が付いているものだけに(HTMLでの表記は<div id="footer">)、下記の設定をします。
・文字を中央寄せにする。
・内側余白を上下左右10pxにする。


div#footer address{font-style:normal;}

divというボックスの#footerという名前が付いているものの中にある、addressだけに、下記の設定をします。
・文字のスタイルを標準にします。


addressは、連絡先・問合せ先など作った人の情報を載せるためのタグです。
アドレスちょうだい!=連絡先ちょうだい!って通じますよね。
手癖でこのタグをいれていますが、著作表示の部分がaddressである必要はない、はずです。間違ってたらごめんなさい。
著作表示自体はお忘れなく!

通常addressの文字のスタイルは斜体(イタリック体)で、今回は標準にしています。




------
以上CSSの簡単な説明でした。

フォントと色は同じだからーと

h2,h3,h4{
font-family: "Times New Roman", Times, serif;
color:#000;
}

とやってから

h2{
font-size:100px;
text-align:right;
padding:100px 5px 5px 20px;
font-weight:normal;
margin-bottom:-50px;
color:#ccc;
z-index:-1;
}
h3{
padding:0;
font-size:24px;
line-height:40px;
color:#999;
margin:20px 0 0 20px;
padding:0;
border-bottom:solid 1px #ccc;}

なんて、個別に設定してやってることがよくあります。(このCSSは今のOzoneAsteriskのです。)

Pagination

Utility

Search

リゼットの処方箋

2Dパズル系ポイント・アンド・クリックアドベンチャーゲーム!!

ブラウザであそべる無料ゲームです。
フォント制作でクレジットしていただいております。リゼット先生かわいいです。

M3-2015春











MOJAおしながきはこちら

C86








M3-2014春



melodybanner400.png




MOJAおしながきはこちら

About

雛瀬シズキ
グラフィックデザインとかWebデザインとかしてる人。

乙女寄りゲーム制作:
OzoneAsterisk
音系フリーダムサークル:
MOJA
コンセプトCDサークル:
Rit.
総合創作系企画サークル:
0から始めよう!

O3*Wiki 更新記録

創作Wikiの更新記録です。
(RSS読み込み)
    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。