CSSで画像位置を微調整する方法

画像の微妙な位置が画面のバランスを左右することがあります。少しずらしていってもなかなかしっくりこなかったりもしますが、時間をおいて見直すと改善することもあります。不思議なものです。

位置移動はmarginでもpaddingでもできる

基本としてmarginの4辺について数字を変えてみましょう。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で設定します。

設定するなら4つのセレクタを指定しよう

4つ設定していないために、リンクがある状態になったときにデフォルトの挙動になり、見た目が良くないことがたまにあります。リンクがブロック要素になったり、インライン要素になったりするときも、動作を良くチェックしましょう。

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ファイル中で1ページに何度でも同じクラス名を指定できるのが違いです。

.moji_red { color: #f00; }

・IDセレクタ
HTMLファイル中1ページに1回だけしか使えません。
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では文字サイズは7種類しか設定できませんが、CSSを設定するとピクセルをはじめとするさまざまな単位で細かく設定可能です。

デザインの再利用

何ヶ所にもわたって同じ書式を設定するのもCSSの方が便利です。HTMLの中でクラス名を使い回すだけですみますし、CSSのプロパティを変更すれば、一気に大量の文字列の書式を変更することも簡単です。

レイアウトにCSSを使用

CSSはレイアウトを設定するときも威力を発揮します。昔はテーブルを用いてレイアウトを設定していましたが、今はCSSを使うことが多くなっています。メンテナンスも楽ですし、SEO対策でもCSSの方が有利だからです。HTMLファイルが軽くなることと、検索エンジンのロボットが内容を読み取りやすくなるからです。

CSSの記述例

それではCSSの記述例を見てみましょう。

.example {font-size: 15px; }

.exampleはセレクタ(ここではクラス)です。.はクラス名が続くことを表し、exampleはクラス名です。font-sizeはプロパティ名、15pxは値です。

HTMLファイルにexampleクラスが指定されている範囲では、文字サイズを15pxで表示するということです。