CSSで画像位置を微調整する方法
画像の微妙な位置が画面のバランスを左右する事があります。少しずらしていってもなかなかしっくりこなかったりもしますが、時間をおいて見直すと改善する事もあります。不思議なものです。
位置移動はmarginでもpaddingでもできる
基本としてmarginの４辺について数字を変えてみましょう。paddingの数字を大きくすると、余白の所に背景色が表示されるからです。背景色がすべて白一色の時等、周りと同じ色の時はpaddingで変えても良いでしょう。paddingは正の数字しかとれませんが、marginは負の数字を使って隣の要素に接近させる事も可能です。隣り合う要素のmarginの値が正で大きい時はmarginの値を少し変えても動かない場合があるかもしれません。
レイアウトを寝かせる
レイアウトや配色は同じような作業を続けていくと、目が肥えていっていつまで経っても作っている人にとって良くできたと思える仕上がりにたどり着かない時があります。そんな時は、違う事をやったり、休んだりして時間を空けると解決策が見つかったり、いつの間にかできばえが良くなっていたりします。不思議です。文章は寝かせるとアラが見えてくるのでそれとは対照的です。
最後はブラウザで確認
CSSはブラウザによっては若干動作が違うかもしれません。できれば様々なブラウザでぱっと見だけでもいいのでチェックをした方がよいでしょう。せっかく苦労して作ったページなので、見に来る人にはちゃんとしたものを見てもらいたいですから。
広告
関連コンテンツ
CSSで背景の設定
背景の設定もルール定義ダイアログで行う事ができます。今回はbodyタグについて背景を設定してみましたが、他のタグ、ID、クラスに対してもセレクタを変えるだけで同じように設定する事ができます。
背景を設定する方法
①画面右中段CSSスタイルパネルで「新規CSSルール」をクリック
②「新規CSSルールダイアログ」で「セレクタータイプ」をタグ、「セレクタ名」をbody、ルール定義を新規スタイルシートファイルにし（既存のスタイルシートファイルに追加したい時は既存のファイルを指定）、「OK」ボタンを押す
③「スタイルシートファイルの別名で保存」ダイアログでCSSファイルに新しく名前を付けて作成・保存する。
④カテゴリ「背景」で背景色を「Background-color」、背景画像を「Background-image」で指定します。
⑤設定が終わったらOKを押します。
背景画像の繰り返し
Background-repeatプロパティで横方向や縦方向に画像の背景イメージを繰り返す事ができます。グラデーションイメージを繰り返して美しい背景を作る事ができます。
背景はバックグラウンド
背景はページの印象に大きな影響を与えます。ここを調整する事によってサイトにかなり個性が出てきます。柔らかいイメージにするのも、黒い印象を与えるのも背景のなす技です。しかし無難な印象を与えたい時は白や淡い色が良いでしょう。眼に優しいというのもありますし。
CSSで文字リンクの色を変更
文字リンクの色もCSSで設定できます。設定するセレクタの順番があるようなので気をつけましょう。
文字リンクの色を設定する方法
①画面右中段CSSスタイルパネルで「新規CSSルール」をクリック
②「新規CSSルールダイアログ」で「セレクタータイプ」を複合、「セレクタ名」をa:link、ルール定義を新規スタイルシートファイルにし（既存のスタイルシートファイルに追加したい時は既存のファイルを指定）、「OK」ボタンを押す
③「スタイルシートファイルの別名で保存」ダイアログでCSSファイルに新しく名前を付けて作成・保存する。
④カテゴリ「タイプ」で文字色を「Color」で指定します。
⑤設定が終わったらOKを押します。
設定する順番
a:link(まだ見ていないリンク)
a:visit(既に見たリンク)
a:hover(リンクにマウスカーソルを重ねた時)
a:active（リンクをクリックした瞬間）
の順番が正しいようです。
もしプロパティの順番が前後したらCSSスタイルパネルの一覧からマウスでセレクタ項目をつかんで順番を上下できるのでやってみましょう。
下線を消すのも簡単
下線を消すのはtext-decorationプロパティをnoneにするだけです。
背景色も設定すると効果的
a:hoverセレクタに背景色を設定するとリンクが目立って効果的です。背景カテゴリのbackground-colorで設定します。
設定するなら４つのセレクタを指定しよう
４つ設定していないために、リンクがある状態になった時にデフォルトの挙動になり、見た目が良くない事がたまにあります。リンクがブロック要素になったり、インライン要素になったりする時も、動作を良くチェックしましょう。
CSSで段落のスタイルを設定
CSSで段落のスタイルを設定するにはpタグについてプロパティの値を設定します。
CSSの設定の流れ
①画面右中段CSSスタイルパネルで「新規CSSルール」をクリック
②「新規CSSルールダイアログ」で「セレクタータイプ」をタグ、「タグ名」をp、ルール定義を新規スタイルシートファイルにし（既存のスタイルシートファイルに追加したい時は既存のファイルを指定）、「OK」ボタンを押す
③「スタイルシートファイルの別名で保存」ダイアログでCSSファイルに新しく名前を付けて作成・保存する。
④カテゴリ「タイプ」で行間を「Line-height」、フォントを「Font-family」、文字サイズを「Font-size」、文字色を「Color」で指定します。
⑤設定が終わったらOKを押します。
設定の例
背景白の場合、文字の色は黒が読みやすいですが、柔らかい感じを出すために少し灰色を混ぜるのも良いと思います。文字サイズは16pxが自然な感じです。行間は1.5em、フォントはゴシック系が好き嫌いが少ないかもしれません。
いろいろいじってみよう
CSSスタイルパネルの横罫線を上にマウスで引き上げると、セレクタ毎の個々のプロパティが表示されます。一時的に無効にする事もできます。プロパティの追加をクリックすれば、ドロップダウンでプロパティを設定する事もできます。CSSの設定はファイルをまたぐので面倒な事も多いのですが、Dreamweaverの手助けを上手に使って慣れていきたい所です。
CSSのボックスモデル
CSSのボックスモデルでは四角形の周りにそれを囲む四角形が何重もある構造を思い浮かべて領域を考える必要があります。
content領域について
一番内側にある領域はcontent領域といい、画像や文字などが表示される範囲です。幅はwidth、高さはheightで指定します。
padding領域について
content領域を取り囲むようにpadding（余白）領域があり、padding領域の外辺にはborder領域があります。padding領域は、top(上)・right(右)・bottom(下)・left(左)方向に範囲（幅または高さ）を指定でき、padding-top、padding-right、padding-bottom、padding-leftプロパティで指定します。padding領域では背景色や背景画像を表示できます。
border領域について
border領域は幅を指定できます。border-top-width,border-right-width,border-bottom-width,border-left-widthのプロパティが用意されています。border領域では直線や破線など線を太さや色を指定して引く事ができます。
margin領域について
borderの外側が最も外側でmargin領域があります。隣り合うボックスと間を空けるためのものです。margin-top、margin-right、margin-bottom、margin-leftプロパティが用意されています。
単位について
単位はpx,%,emなどが多く使われるようです。
divタグとは
divタグはブロックレベル要素をまとめるためのタグです。HTMLで指定するだけでは特に何かをするわけではありません。しかしCSSでスタイルを指定するレイアウトの設定等に威力を発揮します。
divタグの意味
divタグとは似たような意味を持つブロックレベル要素をまとめるためのタグです。他のタグでは見出しタグでもpタグにしてもまとめるという用途では不十分です。
divタグの動作
HTMLファイルにdivタグを入れても色・形・文字・動作などブラウザ上の見かけではまったく作用はありません。CSSと関連づける事により見かけ上の効果が出てきます。
idとクラスで意味づけ
divタグのid属性は固有の名前付けです。class属性は分類して種類を決めたものです。idとclassにより、divタグでまとめた意味がわかるようにソース上で表示する事ができます。
divタグの用途
ブロックレベル要素なのでレイアウトに重宝します。floatプロパティと組み合わせればブロックを右に寄せたり、左に寄せたりできます。入れ子にする事でdivのエリアを何列にも表示するレイアウトを作れます。
インライン要素はspanを使う
ブロックでなくテキストのインライン要素の場合はspanタグを使います。これもHTMLだけでは特に効能はありません。divと同様にidやclassを指定します。CSSでプロパティを設定してやっと見た目に効果が出てきます。
Dreamweaverでdivタグを設定するには
まずはdivタグの範囲を選択します。挿入パネルの「Divタグを挿入」ボタンを押します。クラスまたはid名を入れてOKを押します。Divタグの挿入に成功するとデザインビューでその範囲が点線で囲まれると思います。これを繰り返していってCSSでレイアウトに関連したプロパティ（例えばfloat,clear,widthなど）を設定していけば、段組などができるようになります。
CSSのセレクタと適用方法
CSSのセレクタの種類とCSSの適用方法についてです。
セレクタの種類
・クラスセレクタ
任意の範囲にクラス名をつけてスタイルを指定する事ができます。
ID要素と似ていますがCSSファイル中にドットで指定する事と、HTMLファイル中で１ページに何度でも同じクラス名を指定できるのが違いです。
例
.moji_red { color: #f00; }・IDセレクタ
HTMLファイル中１ページに１回だけしか使えません。
CSSファイルではID名に#をつけて指定します。
例
#content { width: 600px; }・タグセレクタ
タグ名をキーにスタイルを設定します。
例
p { line-height: 1.5em; }・複合セレクタ
タグの子供要素やリンク要素についてスタイルを設定できます。
例
a:link { color: #0FF; }・ユニバーサルセレクタ
*をセレクタにしたもの。すべての要素にスタイルを適用できます。
例
* { color: #000; }HTMLファイルへの適用方法
・style属性による埋め込み
HTMLタグの中にstyle属性を追加し、スタイルを個々に指定する方法です。
例
<span style="color:#f00;">赤文字</span>・style要素でまとめる
HTMLファイルのHead要素内に、そのHTMLファイル中のスタイルをまとめて記述する方法です。
例
<style type="text/css">
* { color: #000; }
p { line-height: 1.5em; }
</style>・外部スタイルシート
HTMLファイルとスタイルシートを別にし、HTMLファイルからリンクする方法です。
CSSといえば一般にこのケースが多いようです。仕様上最も推奨されています。
例
<link rel="stylesheet" href="style.css" type="text/css">CSSとは
CSSはCascading Style Sheets（スタイルシート）の略です。CSSを使う事でWebページのデザインを従来より詳細に設定する事ができます。HTMLに情報を、CSSに見た目を記述する事で、HTMLの中に両方を詰め込んでいた時代に比べ人間からも機械からも情報をより読み取りやすくなりました。CSSはW3C（World Wide Web Consortium）という団体により、Web標準の技術として推奨されています。
デザインの詳細化
例えば文字に対して、HTMLでは文字サイズは７種類しか設定できませんが、CSSを設定するとピクセルをはじめとするさまざまな単位で細かく設定可能です。
デザインの再利用
何ヶ所にもわたって同じ書式を設定するのもCSSの方が便利です。HTMLの中でクラス名を使い回すだけですみますし、CSSのプロパティを変更すれば、一気に大量の文字列の書式を変更する事も簡単です。
レイアウトにCSSを使用
CSSはレイアウトを設定する時も威力を発揮します。昔はテーブルを用いてレイアウトを設定していましたが、今はCSSを使う事が多くなっています。メンテナンスも楽ですし、SEO対策でもCSSの方が有利だからです。HTMLファイルが軽くなる事と、検索エンジンのロボットが内容を読み取りやすくなるからです。
CSSの記述例
それではCSSの記述例を見てみましょう。
.example {font-size: 15px; }.exampleはセレクタ（ここではクラス）です。.はクラス名が続く事を表し、exampleはクラス名です。font-sizeはプロパティ名、15pxは値です。
HTMLファイルにexampleクラスが指定されている範囲では、文字サイズを15pxで表示するという事です。