CSS初心者の学習用にオススメです。
結果をみながらCSSのデザインを作れます。
「あれ、colorだっけ？font-colorだっけ？」みたいな状況から脱することが出来ると思います。
軽い気持ちで作り始めたら、沼にハマりました（いつものやつ）。
ガチで作るとキリがなさそうなので、とりあえず動く段階で区切りとしました（汗
他にも色々機能つけたいのですが、予定よりかなり時間がかかってしまったので…
始めはCSS全体を扱えるようにしようとしたのですが、とてもじゃないけど「ブロック要素」（というか見出し）だけで手いっぱいになってしまいました。
CSSの要素のうち「ブロック要素」は、シンプルにテキストとブロック分けがメインの機能。
見出しである<h1>や、<div>、<p>などが含まれます。
一応<table>もブロック要素に含まれます。
「インライン要素」はフォームとして機能を有しているもの。
<input>や<select>はこちらに含まれます。
見出しの基本
見出しとは、htmlで使う<h1>～<h6>までのテキスト表示のことです。
通常のテキスト表示<p>と比べると、デフォルトで様々なCSSの影響を受けていますね。
実際に使ってみると
《htmlコーディング》※head/body部分のみ
<head>
<meta charset="UTF-8">
<title>見出し行とCSSデザイン</title>
<style>
</style>
</head>
<body>
<h1>『見出し行1』のテスト</h1>
<h2>『見出し行2』のテスト</h2>
<h3>『見出し行3』のテスト</h3>
<h4>『見出し行4』のテスト</h4>
<h5>『見出し行5』のテスト</h5>
<h6>『見出し行6』のテスト</h6>
<h7>『見出し行7』のテスト</h7>
<h8>『見出し行8』のテスト</h8>
<h9>『見出し行9』のテスト</h9>
<h10>『見出し行10』のテスト</h10>
</body>出力結果
このような感じで、h1～h6まで設定されているのが確認できます。
自動で前後に改行コードが入るのは、デフォルトのCSSでdisplay:blockが設定されているのが原因です。
display:inline-block;を設定することで改行しなくなりますので、覚えていると役に立つことがあるかもしれません。
ちなみにh1～h6に（自動で）設定されていると思われるCSSはこのようになっています。
h1～h6のCSSデザイン
h1 {
display: block;
font-size: 2em;
font-weight: bold;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
}
h2 {
display: block;
font-size: 1.5em;
font-weight: bold;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
}
h3 {
display: block;
font-size: 1.17em;
font-weight: bold;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
h4 {
display: block;
font-size: 1em;
font-weight: bold;
margin-top: 1.33em;
margin-bottom: 1.33em;
margin-left: 0;
margin-right: 0;
}
h5 {
display: block;
font-size: 0.83em;
font-weight: bold;
margin-top: 1.67em;
margin-bottom: 1.67em;
margin-left: 0;
margin-right: 0;
}
h6 {
display: block;
font-size: 0.67em;
font-weight: bold;
margin-top: 2.33em;
margin-bottom: 2.33em;
margin-left: 0;
margin-right: 0;
}
今回はそんな「見出し」をメインにCSSを触っていきたいと思います。
ツールの使い方
登録
「登録」画面では、使うstyleを選択します。
一応見出し以外でも手入力できるようにはしています、想定通り動くかは不明。
styleに関しても主要なものはselect入力できるようにはしましたが、多分足りないと思うので手動入力もできるようにしています。
同要素、同styleに関しては上書き処理になります。
CSS登録を押すと、テーブルにデータが登録されます。
テーブル操作
こんな感じで、登録したデータが管理されています。
表示はタグ名でソートされます。
「設定値」エリアは変更可能エリアになっていますので、数値などを変えたい時に使ってください。
style名をクリックすると、行がグレーアウトして対象外になります。
「削除」ボタンは行のデータが消えます。
出力確認＆コード保存
出力文字に関しては、テキストエリアで指定できます。
現在生成しているコードを確認できます。
コードはボタンを押すことでコピー可能です。
最後に
前回の記事でも書きましたが、まずサイトの見出し情報の初期化をするのが大変でした。
作るのに苦労したので、CSSを始めたばかりの人がこのページにたどり着いてくれることを祈ります。
自分も最初に勉強する時にこんなツールがあればもう少し理解が早かったかも。
styleに関しては動作チェックしてないものもおおいので、動かないstyleがあったらすいません。
よっぽど使ってくれる人がいるようであれば、機能追加や色々な手直しも考えますが、今回は本当は軽い気持ちで始めたツールだったので、中途半端ではありますが基本的には現段階で区切りとしたいと思います。
さぁ、今度こそゲーム記事を書きたい（笑）
コメント