{ color:カラー名; }
要素{ background: linear-gradient(transparent 線の太さ 数値%, 線の色 数値%)}
線の太さは0%が一番太く、数値を大きくすると細い線になります。要素 {line-height: 行の高さの値(フォントサイズと上下の余白合計)}
px、em、%、数値のみのどれかで指定します。マイナスの指定はできません。数値のみ記述するのが一般的
行の高さの値がフォントサイズより小さい場合は、 行が重なって表示されます。
{letter-spacing: 値}
値はpxやem。数値をマイナスにすると文字間が狭くなる。小数点以下も指定できる。
OSによって入っているフォントが異なり、
WindowsとMacやiPhone/iPad(iOS)ではインストールされているフォントが異なる。
ほとんどがゴシック系のフォント 「sans-serif」を使っています。
"サイズ"と"フォント"の値が必須です。この2つ以外の値は省略できます。
省略した場合、そのプロパティの初期値が適用される
font-family:のあとに指定するフォントを記述。
要素 {font-family:フォント名; }
複数のフォントを指定するときはカンマ( , )で区切ります。前に書かれているフォントが優先されます。「メイリオ」 、「游ゴシック」(やや細目)、「ヒラギノ」(iOSやOSXに搭載されている)などがオススメ!
文字の太さを指定する。
normalは通常の太さで初期値になります。
数値で指定することもできます。 100、200,300,400,500,600,700,800,900の数値から指定します。
100 が最も細く、900 が最も太くなります。。要素{font-size:数値%;}
xx-large | 最大 |
x-large | |
large | |
medium | 標準(初期値) |
small | |
x-small | |
xx-small | 最小 |
文字色を設定します。
セレクタ{
color:カラーコード;
}
いろいろなアイコンを利用できます。
CDNを利用する方法とダウンロードする方法の2種類があります。CDNを利用する方法が手軽に使えます。
HTMLのhead内にコピペします。そのあと、アイコン一覧から使いたいアイコンをクリックすると詳細ページになり、
そこの左側にあるコードをHTMLの使いたい場所に貼ります。
要素{text-shadow: 数値px 数値px 数値px カラー名; }
{text-emphasis:塗りかた 形 色;}
text-emphasis-style 文字上部にマークを表示(カラー表記なし){ text-emphasis-style : スタイル 形; }
塗りかた 2種類あります。 filled(塗りつぶし)と、 open(塗りつぶさない)
点の形circle(円)、 double-circle(二重円)、 dot(点)、 triangle(三角形)、 sesame(ゴマ)等があります。
外部リンク参考サイトさん text-emphasis: の値についてa:link { color: カラー名; } | 未訪問のリンク |
a:visited { color: カラー名; } | 訪問済みのリンク |
a:hover { color: カラー名; } | ポイント時のリンク |
a:active { color: カラー名; } | 選択中のリンク |
下線、上線、取り消し(打ち消し)線、点滅など
文字装飾するときのプロパティです。
すべての要素に適用できます。
text-decoration:none; | なし |
text-decoration:underline; | 文字に下線を引く |
text-decoration:overline; | 文字に上線を引く |
text-decoration:line-through; | 文字に取り消し線を引く |
text-decoration:blink; | 文字を点滅させる |
text-decorationプロパティを使いリンクの下線を非表示にできます。値をnone;装飾なし
a { text-decoration: none; }
外部リンク参考サイトさん text-decorationについてcssにクラス内容を記述し、htmlにspanタグにclass属性を付けて囲みます。