「メモ」カテゴリーアーカイブ

［CSS font 設定］

fontプロパティは，CSSでフォントに関する指定をまとめて行う際に使用する．
CSSでfontを使用する場合は環境依存を考慮して，OS標準搭載のフォントを複数しておくのがよい．font-familyでは表示したい優先度の高い順から記述していき閲覧するユーザーのデバイスでfontがない場合は，次へ次へというかたちで選択されていく．

体の記述の仕方は自由だが，明朝体・ゴシックは以下からコピーし使用することを進める．

［明朝体の指定］

p {
	/*font：明朝*/
	font-family: "Palatino Linotype", "Book Antiqua", "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", Palatino, serif;
}

［ゴシックの指定］

h1{
	/*ゴシック*/
	font-family: Univers, Arial, Helvetica, Geneva, "游ゴシック", YuGothic, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}

［文字のプロパティ］
プロパティは下記のような指定が可能．

p {
	/*カラー*/
	color: #444;
	/*サイズ*/
	font-size: 12px;
	/*行間*/
	line-height: 2em;
	/*ウエイト*/
	font-weight:normal;
	/*字間*/
	letter-spacing: 0.05em;
}

［Web Font］
基本的にWebブラウザは端末にインストールされているフォントを呼び出し文字を表示する．端末のフォント如何では，Webデザイナーが意図しない表示がなされフォントに関するWebデザインに制約が生じてしまう．フォントを画像にして表示するという手段はあるが，文章修正のメンテナンス，文章の検索といった点で問題がある．そこでWebサーバー上にフォントファイルを置き，Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントであり，これを使用すると環境依存にならない．ただし，現状和文フォントに関しては，まだコスト面など影響し使用が困難である．

［Web Font（Google font）の使い方］
→Google Font
上記URLからGoogle Font Webサイトに行き，使用したいフォントをセレクト．
その後，右下中間のアイコンを選択．
フォントのウエイト・スタイルを選択

<link href='http://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>

</head>のうえで，CSSを読み込む1行前に
<link href=’http://fonts.googleapis.com/css?family=Lato:100′ rel=’stylesheet’ type=’text/css’>
↑を記述．

h1{
    font-family: 'Lato', sans-serif;
}

CSSで上記のように指定する．

［参考］
【フォント】
http://www.dtp-transit.jp/misc/web/post_1881.html
http://g-azami.tumblr.com/post/76447906591/a-2014-edition-japanese-css-font-family-set-up

【プロパティ（字間・行間など）】
http://www.tagindex.com/stylesheet/text_font/
http://www.htmq.com/style/font.shtml

［CSSとは］
CSS（Cascading Style Sheet: カスケーディング・スタイル・シート）とは，HTML文書に適用して，Web ページのレイアウトを調整したり，色を指定するなど装飾を施し見た目を調整するための言語です．日常的には「スタイルシート」と呼ばれます．

［CSSを適用するには］
HTML 文書にCSS を適用するには，直接HTML にCSS を記述する方法と，CSS ファ
イルを別に用意しておいてリンクする方法があります．外部ファイルで定義する場合，HTML のhead 要素に下記の1 行を記述します．

<link rel=”stylesheet” href=“ファイル名.css” type=”text/css”>

［CSSの書き方の基本］
CSS では，HTML の中に出てくる各要素を，それぞれどういうスタイルで描くかというルールを記述（宣言）していきます．

これは，HTML 文書の中にh1 が適用された要素があれば，その文字の色を赤色にしてくださいという意味です．つまり，「どの要素の｛何を：どうする；｝」と書きます．
h1 という要素には，文字色の他にも変更できる項目がいくつかあります．例えば，h1 要素の文字の書体や，文字の周りの余白の広さなどを指定することができます．これらの変化を与えられる項目のことを「プロパティ」と呼びます． 「#f00」にあたる部分を「値」と呼びます．また，CSS を適用する対象となる要素を指定する部分のことを「セレクタ」と呼びます．

宣言が複数になる場合には，以下のように，コロン（；）で区切って，同様のルールで追記していきます．

h1 {
	color: #f00;
	margin: 10px;
}

［セレクタ］
CSS を適用する対象となる要素を指定するセレクタには，既存のHTML タグを指定する「要素セレクタ」の他にも，制作者が自由に名前をつけて対象として指定できる「IDセレクタ」や「class セレクタ」などがあります．

［IDセレクタ・classセレクタ］
HTML の要素に，ID やclass を追加して記述しておいて，そのID 名やclass 名をセレクタで指定して，CSS を適用することができます．
「ID セレクタ」は，HTML のページ内に一度だけ使用できますが，「class セレクタ」は，ページ内で何度も使用することのできる要素です．

［Memo］
CSSプロパティの種類を確認するには下記のサイトを参考にして下さい．
［HTMLクイックリファレンス］http://www.htmq/com/
スタイルシートについては「スタイルシートリファレンス（目的別）」を参照
代表的なセレクタの種類と記述例
─
要素セレクタ
p {color: #f00;}
─
全体セレクタ
*{color: #f00;}
─
IDセレクタ
#content {color: #f00;}
─
classセレクタ
.memo {color: #f00;}
─
複数セレクタ
h1, h2 {color: #f00;}
─
子孫セレクタ
p strong {color: #f00;}

［ボックスモデル］
「ボックスモデル」とは，HTML 文書の中にある要素が「ボックス」と呼ばれる四角形で構成されているという考え方です．つまり，Web ページ上のタイトルの文字や，記事の文章，画像などのすべてが，それぞれ四角形の中に入った上で，並べられているということです．
CSS では，このボックスの幅や高さを指定したり，ボックス同士の間隔や，配置のルールを指定することによって，画面のレイアウトや見た目の調整を行うことになります．

［ボックスの構造］
1 つのボックスは4 つの領域から構成されます．各領域の境界線は「辺」と呼ばれ，上下左右（top, bottom, left, right）のそれぞれに対して，スタイルを適用できます．
1.     内容（content）：テキストや画像など
2.     ボーダー(border)：枠線
3.     パディング(padding)：内容とボーダーのあいだの余白
4.     マージン（margin）：ボーダーの外側の余白．透明．

［ボックスモデルの全体幅の計算方法］
［ボックスの全体の幅］＝
［左右のマージン］（margin-left, margin-right）＋
［左右のボーダー］（botom-left, botom-right）＋
［左右のパディング］（padding-left, padding-right）＋
［内容の幅］（width）

［Memo］
cssで背景色や背景画像を指定した場合は，パディングとボーダーの領域まで適用され，マージンの部分には適用されません．