−スタイルシート−
フォントファミリー
■ゴシック
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
■明朝
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif;
■丸ゴシック
font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ゴシックM-PRO","HGMaruGothicMPRO";
文字サイズ
- xx-large … 最も大きいサイズ
- x-large
- large
- medium … 標準サイズ(初期値)
- small
- x-small
- xx-small … 最も小さいサイズ
内部CSS
※画像を右寄せにする!!!
.imgright{margin-left: auto;}
長年の疑問が解消された!!!!!すげええ
◆内部CSSの記述方法
<style type="text/css">
</style>
<section class="wow fadein" data-wow-duration="1s" data-wow-delay="0.5s" style="padding:20px;">
| フォントサイズ | <span style="font-size: 22pt;"> |
|---|---|
| 色指定 | <span style="color: #ff0000;"> |
| 文字中央 | <p style="text-align:center"><a href="https://www.original-cl.com/">→ トップページに戻る</a></p> |
| projection | プロジェクター |
| handheld | モバイル機器 |
| aural | 音声出力 |
| braille | 点字出力 |
| tty | 文字幅が固定の端末機器 |
| all | すべて |
CSSとは?
CSSは「Cascading Style Sheets」は、HTMLで作成したページにデザインを適応する為の技術です。
一般に「スタイルシート」とも呼ばれています。
CSSを利用するとHTMLでは表現出来ないデザインやレイアウトを設定することが出来ます。 また、スタイルをHTMLと分けて記述しておくことで、Webページのデザインの統一やデザインの変更を簡単に行えるようになります。
HTMLに外部でCSSを読み込む方法(タグ)
<head></head>の間に<meta>タグを入れる。xxxxがCSSの名前。任意。
<link rel="stylesheet" type="text/css" href="xxxx.css" />
CSSを適用させるメディアの種類を指定する事も出来る
<link rel="stylesheet" type="text/css" href="xxxx.css" media="screen,print" />
mediaタグを入れる事により、コンピュータの画面とプリント時にCSSが反映されるように設定出来る。 しかし、Netscape Navigator4.xではmediaの属性として「screen」以外が指定されると、そのCSSは読み込まなくなる。 もし、Netscape Navigator4.xにCSSを反映させたい場合には、media属性を指定しないか、 値として「screen」だけを指定する。
| screen | コンピュータの画面 |
|---|---|
| プリンタ | |
| tv | テレビ |
| projection | プロジェクター |
| handheld | モバイル機器 |
| aural | 音声出力 |
| braille | 点字出力 |
| tty | 文字幅が固定の端末機器 |
| all | すべて |
CSSの中で日本語フォント(全角文字)を仕様する場合やコメントを日本語で入力する場合には、文字コードを指定するようにします。 文字コードの指定は必ずファイルの先頭で行う。
@charset "Shift_JIS";
CSSの基本的な書式
セレクタ{プロパティ :値}
複数指定する場合には「;」で区切る。
セレクタ{
プロパティ :値;
プロパティ :値;
プロパティ :値;
}
複数のセレクタを「,」で区切って、
一度の同じスタイルを指定する事も出来る。
→セレクタ,セレクタ,セレクタ{プロパティ :値}
h1, h2, h3 { font-family: sans-serif }
※プロパティと値の前後には、自由に空白文字を入れることが出来る。
グループの中の最初の一つにだけ適用させたい場合
後からDIVで囲んだ最初のPタグの一行にスタイルを適用したい場合には、スタイルシートに contents > p と記述するだけで適用される。
ここはh2を指定しています
あいうえお
かきくけこ
さしすせそ
【 HTML 】
<div class="test01">
<h2>ここはh2を指定しています</h2>
<p>あいうえお</p>
<p>かきくけこ</p>
<p>さしすせそ</p>
</div>
【 CSS 】
div.test01 > h2 + p{
color:#990066;
}
DIV.test01要素のh2のすぐ直下のpタグにのみ適用する。DIV要素ではない場合には、body > h2 + p でもOK。
【 h1の次にh2がきた時のみ、適用 】
h1 + h2 { margin-top: -.5em; }
h2のコメントとかの時に利用できる。又は、h2と直下のpタグ間のマージンの調整等に利用できる。大変便利!!
base
*{
margin:0px;
padding:0px;
font-size:100%;
}
余白を0にして、文字サイズもすべて共通にする記述。
*(アスタリスク)すべての要素に対してスタイルを適用させる事が出来る。またこれは省略も可能。
背景、画像
| 右下 | background-position:right bottom; |
|---|---|
| 中央 | background-position:center center; |
| 背景画像の位置を固定 | background-attachment:fixed; |
フォント、テキスト
| フォント名 | font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; | ユーザーの環境で利用できる種類で、より前に指定されているのもが採用される。 |
|---|---|---|
| フォントの色 | color:#FFFFFF; | |
| フォントサイズ | font-size:14px; | |
| フォントの太さ | font-weight:normal; | 100 200 300 400 500 600 700 800 900で標準(normal)は400 |
| 行間 | line-height:100%; | たまにバグる。 |
| 文字の間隔 | letter-spacing:normal; | emで指定するletter-spacing:1em; 単語の途中にスペースを入れると音声ブラウザや内部検索で正しく認識されない場合があるので、 CSSで指定する。 |
| 一行目のインデント | text-indent:1em; | 最初の文字を一字下げます。 |