【文字色一覧】 【タグ一覧】 【カラーコード一覧】
スレ一覧
30.ふたりかくれんぼ(保存)
 ┗212

212 :坂本龍馬
2019/11/03(日) 23:52

Whocaresでcssを使う時のコツ改 3


この記事の続きです。

■ 具体的な記述
基本的に、元々入っている記述としてデザインに干渉しやすいのは

・フォント
・フォントサイズ
・ページ全体の余白

この三つになります。
なので、一番簡単な方法としてはこれら元々入っている記述を加えてプレビューしてしまうことです。

■ 外部cssの場合

body {
font-family: "Hiragino Kaku Gothic ProN", "Osaka", Meiryo, "MS UI Gothic", "MS Pゴシック", sans-serif;
font-size: 12px;
margin: 15px;
}

■ html(投稿欄)に直接記述する場合

<div style="font-family: 'Hiragino Kaku Gothic ProN','Osaka','Meiryo', 'MS UI Gothic',MS Pゴシック', sans-serif'; font-size: 12px; margin: 15px;">ここに本文とかタグ</div>

これで表示が違う…ということはほぼなくなると思います。
元のcssから変えたい(上書きしたい)場合については、

フォントを変えたい:font-family
フォントサイズを変えたい:font-size
余白を変えたい:margin

上記の項目の指定されている数値や表記を弄ることで変えることができる…のですが、外部CSSの場合、優先順位の関係で更に上書きされてしまいます。
なので上記の記述をbodyではなく*セレクタに指定するか、クラス名を命名してdiv等で囲むと反映されるかと思います。

ちなみに、外部フォントを使用する場合は@importと@font-faceを入れた上で*セレクタに指定するか、クラス名をつけてそこに指定するかで使用できるかと思います。(これは普通のcss解説サイトを調べればできると思います)
※htmlに直接記述する方法で外部フォントを使う方法は多分ない…と思います。やり方があればお教えいただきたいです!

以上、具体的な記述についてでした。

ちなみにここまでやって解決しない!!!という場合もなくはないです…
全角空白などが関係している場合もあるので、1から書き直すと案外スルっと反映してくれたりします。

cssに関して僕は、この日記を作るまでクソサイトを作った当時程度の古い知識しか持ち得ておらず(今ってテーブルタグあんまり使わないんだ…へえ…って思いました…)
この日記を作る時から今まで、生放送や仕事の合間にたらたらと勉強しただけなので
そんなに難しいことではなく、ある程度わかっている人なら当たり前くらいの話だとは思うんですけれど、自分の中での整理ついでに参考になればいいなあと思って書きました。

まだまだ勉強中なので、坂ちゃんそれ違くない?法律に触れてない?詐欺やめて??みたいなことがありましたらご一報ください…。
奇声上げながら書き直します……。

おまけ・書いてみての雑感です。興味のある方はどうぞ。


[削除][編集][コピー]



[戻る][設定][Admin]

WHOCARES.JP