もう少しこうだといいのに、でもCSSなんて触ったことないしよく分からない…だからそのまま使ってる。
そんな利用者の方に少しでもイメージ通りを目指して頂けるよう解説ページを設けてみました。
またCDP制作側としては多少なりともタグについて興味を持ってもらえれば嬉しい限り。
もしも増やしてほしい解説項目等ありましたらウェブ拍手からお気軽にどうぞ。
「当サイトのCDPをちょこっと改造して使ってみよう」というコンセプトのページです。
>>基本構造
>>文字の大きさを変える
>>文字の色を変える
ダウンロードしたstyle.cssを開いてみましょう。
えー、早速よく分からない英語ばかりが並んでいるように見えるかと思います＾＾；
しかし実際にデザインの大枠を作っている部分はそんなに多くはありません。
まずは一番最初にある /* HTML要素（一部#ID）*/ *{ ここ } と
そして中央の折り返し線すぐ下にある /* 各#ID＆.class */ div#PAGETOP{ ここ } です。
ということはこの２つの部分を弄ると、後の細かい部分を抜きにしてもころっと雰囲気が変わります。
更に言えば /* HTML要素（一部#ID）*/ body{ ここ } とかも使っていたりするんですが…
ともかくこれだけではよく分からないので実際に数値を動かしてその変化を体感してみましょう！
cssの一番最初にある /* HTML要素（一部#ID）*/ *{ ここ } を見て下さい。
font:normal normal normal 100%/150% "ＭＳ Ｐゴシック",Osaka,Verdana,serif;
という箇所があると思います。ちなみに当サイトではほぼこの値が定位置です（笑）
ではこの 100% の部分を 110% 辺りに変えてみましょう。
すると色んな場所の文字が一括で倍以上の大きさになって読みやすいやらでかすぎるやらですね。
96%(100%)〜105% くらいが読みやすい気がしますが、気に入った数値にしてみて下さい。
また 15px などにするとブラウザの文字表示サイズに関係しない一定のサイズを取ります。
*この方法で変わらない場所(hタグ他)に関しては下手に数値を変えるとデザインが潰れるので注意。
cssの最初から三番目にある /* 基本構造 */ body{ ここ } を見て下さい。
color:#○○○; という箇所があると思います。○の部分には英数字があって暗号のようです。
ではこの #○○○ の部分を red に変えてみましょう。#も消し忘れずにー。
すると色んな場所の文字が一括で真っ赤っかになって目がチカチカしていると思います。
他にも blue や green などの英語を指定することもできます。
当サイトでは見易さ重視という名のモノクロ一辺倒が多いので、カラフルに模様替えしてみては？
この場所以外にも color:#○○○; は色んな場所で指定がしてあるので自由に変えてみて下さいね。
ちなみに #○○○ の形を取る色の指定方法はカラーコードと呼ばれているものです。
インターネットでカラーコードを調べれば色見本サイトも見つかるので参考に。