スタイルシート(CSS)の設定方法の色々

htmlでデザインを制御するスタイルシート(CSS)の設定の仕方。
基本中の基本。

外部ファイルを読み込む方法

修正や管理のしやすさから、外部ファイルを使う方法が一般的。
どこでも読込できるが、head部分に記述するとわかりやすい。

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

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

次に実際にスタイルシートを記述するCSSファイル
sample.css

/* 文字コード */
@charset "UTF-8" ;

/* CSSを記述 */
body, html {
 line-height: 150%;
 font-size: 100%;
 margin: 0;
 padding: 0;
 font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
 background-color: #ffffff;
 -webkit-text-size-adjust: none;
 height: 100%;
 width: 100%;
}

/* 文字コード */

@charset "UTF-8" ;

/* CSSを記述 */

body, html {

line-height: 150%;

font-size: 100%;

margin: 0;

padding: 0;

font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif;

background-color: #ffffff;

-webkit-text-size-adjust: none;

height: 100%;

width: 100%;

}

HTMLファイル内で記述する方法

簡単な修正や、スポットで調整する際に。

<style type="text/css">
/* CSSを記述 */
body, html {
 line-height: 150%;
 font-size: 100%;
 margin: 0;
 padding: 0;
 font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
 background-color: #ffffff;
 -webkit-text-size-adjust: none;
 height: 100%;
 width: 100%;
}
</style>

/* CSSを記述 */

body, html {

line-height: 150%;

font-size: 100%;

margin: 0;

padding: 0;

font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif;

background-color: #ffffff;

-webkit-text-size-adjust: none;

height: 100%;

width: 100%;

}

</style>

画面サイズによって読み込むCSSを変える

レスポンシブWEBに対応することで、パソコン、スマートフォン、タブレットと、それぞれに最適化したデザインにできる。

@charset "UTF-8";
/* 画面の最大幅と最小幅で読み込むCSSを変更 */
@import url("sp_style.css")screen and (max-width:640px) ; /* SmartPhone用CSS */
@import url("tb_style.css")screen and (min-width:641px) and (max-width:768px) ; /* Tablet用CSS */
@import url("pc_style.css")screen and (min-width:769px) ; /* PC用CSS */

@charset "UTF-8";

/* 画面の最大幅と最小幅で読み込むCSSを変更 */

@import url("sp_style.css")screen and (max-width:640px) ; /* SmartPhone用CSS */

@import url("tb_style.css")screen and (min-width:641px) and (max-width:768px) ; /* Tablet用CSS */

@import url("pc_style.css")screen and (min-width:769px) ; /* PC用CSS */

How to use “CSS”.

M	T	W	T	F	S	S
« Aug
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Every Day is a New Day.

ちゃーならん