CSS文字さpc操作中

目次

行間、字間など
フォント、
サイズ、太さ、カラー
など
リンク

文字色

{ color:カラー名; }

文字背景色

cssの文字背景色

セレクタ{ background-color:カラー名;}

外部リンク参考サイトさん  cssの文字背景色や文字色について
マーカー風 linear-gradient属性を使う

要素{ background: linear-gradient(transparent 線の太さ 数値%, 線の色 数値%)}

線の太さは0%が一番太く、数値を大きくすると細い線になります。
線の色の後ろの%指定は0%、もしくは線の太さと同じ%にする

間隔

line-height

 行の高さを指定する

要素 {line-height: 行の高さの値(フォントサイズと上下の余白合計)}

px、em、%、数値のみのどれかで指定します。マイナスの指定はできません。数値のみ記述するのが一般的
行の高さの値がフォントサイズより小さい場合は、 行が重なって表示されます。

外部リンク参考サイトさん line-heightについて

letter-spacing

文字間になります

{letter-spacing: 値}
値はpxやem。数値をマイナスにすると文字間が狭くなる。小数点以下も指定できる。

em emでは「0.05em~0.1em」の間で設定するとちょうどよい。

フォントなど

OSによって入っているフォントが異なり、 WindowsとMacやiPhone/iPad(iOS)ではインストールされているフォントが異なる。
ほとんどがゴシック系のフォント 「sans-serif」を使っています。

一括設定 font 文字スタイル(太さ、サイズ、行の高さ、フォント、イタリック体、スモールキャピタル、を
一括指定するプロパティです
)。

"サイズ"と"フォント"の値が必須です。この2つ以外の値は省略できます。
省略した場合、そのプロパティの初期値が適用される

font-family;

font-family:のあとに指定するフォントを記述。

要素 {font-family:フォント名; }

複数のフォントを指定するときはカンマ( , )で区切ります。前に書かれているフォントが優先されます
フォント名にスペースが含まれる場合は「'」(クォーテーション)か「"」(ダブルクォーテーション)でフォント名を囲む。
指定したフォントがOSにない場合には、デフォルトのフォントになります。

「sans-serif」 ゴシック系のフォント 「serif」 明朝系のフォント  外部リンク参考サイトさんfont-familyでのフォント一覧

「メイリオ」 、「游ゴシック」(やや細目)、「ヒラギノ」(iOSやOSXに搭載されている)などがオススメ!

font-weight:

文字の太さを指定する。

normalは通常の太さで初期値になります。
boldに設定すると太字になります font-weight:bold;

数値で指定することもできます。 100、200,300,400,500,600,700,800,900の数値から指定します。

100 が最も細く、900 が最も太くなります。
font-weight: 700;
font-size:  文字サイズを指定するプロパティ値にはパーセントなどが指定。

要素{font-size:数値%;}

キーワード指定の場合
xx-large 最大
x-large
large
medium 標準(初期値)
small
x-small
xx-small 最小

外部リンク参考サイトさん css文字サイズ
color

文字色を設定します。
セレクタ{ color:カラーコード; }

text-stroke Webkit以外での使用はできません。

webフォント

Google Web Fonts グーグルフォント  無料。 HTMLのhead内にコピペ、CSSのfont-familyに設定します。
Font Awesome

いろいろなアイコンを利用できます。

CDNを利用する方法とダウンロードする方法の2種類があります。CDNを利用する方法が手軽に使えます。
Font Awesomeフリー  無料と有料があります。

FontAwesomeのアイコン一覧ページ

HTMLのhead内にコピペします。そのあと、アイコン一覧から使いたいアイコンをクリックすると詳細ページになり、
そこの左側にあるコードをHTMLの使いたい場所に貼ります。

外部リンク参考サイトさん  FontAwesome使い方  

強調

text-shadow: テキストに影をつける
スペースで区切り、水平方向 垂直方向 ぼかし 影の色 を指定します。
長さの値には、pxなどがあります。

要素{text-shadow: 数値px 数値px 数値px カラー名; }

text-emphasis:  文字上部にマークを表示

{text-emphasis:塗りかた 形 色;}

text-emphasis-style  文字上部にマークを表示(カラー表記なし)

{ text-emphasis-style : スタイル 形; }

塗りかた 2種類あります。 filled(塗りつぶし)と、 open(塗りつぶさない)

点の形

circle(円)、 double-circle(二重円)、 dot(点)、 triangle(三角形)、 sesame(ゴマ)等があります。

外部リンク参考サイトさん text-emphasis: の値について
リンクの文字色
リンクの4つの状態に文字色を指定できます。
a:link { color: カラー名; } 未訪問のリンク
a:visited { color: カラー名; } 訪問済みのリンク
a:hover { color: カラー名; } ポイント時のリンク
a:active { color: カラー名; } 選択中のリンク
セレクタ{text-decoration:値;}

下線、上線、取り消し(打ち消し)線、点滅など 文字装飾するときのプロパティです。
すべての要素に適用できます。

値には none、underline、overline、line-through、blink があります
text-decoration:none; なし
text-decoration:underline; 文字に下線を引く
text-decoration:overline; 文字に上線を引く
text-decoration:line-through; 文字に取り消し線を引く
text-decoration:blink; 文字を点滅させる

ブラウザは対応しているのとしてないのがある
text-decoration: none;

text-decorationプロパティを使いリンクの下線を非表示にできます。値をnone;装飾なし

a { text-decoration: none; }

外部リンク参考サイトさん text-decorationについて
a {outline:none;} リンクをクリックした後に残る点線の枠が無くなる。

スタイルの適用

外部リンク参考サイトさん 部分的なスタイルの適用

cssにクラス内容を記述し、htmlにspanタグにclass属性を付けて囲みます。