CSSのショートハンドの書き方

CSSのプロパティではいくつか省略しての記述(ショートハンド)が認められています。その中で、margin(padding)・バックグラウンド・フォント・リストをご紹介します。

マージン記述(4点記述)

マージンの値を4つ記述します。左からtop・right・bottom・leftの順に適用されます。

div {
margin : 0 5px 10px 15px;
}

マージン記述(3点記述)

マージンの値を3つ記述します。左からtop・right/left・bottomの順に適用されます。

div {
margin : 10px 20px 0;
}

マージン記述(2点記述)

マージンの値を2つ記述します。左からtop/bottom・left/rightの順に適用されます。

div {
margin : 0 auto;
}

マージン記述(1点記述)

マージンの値を1つ記述します。上下左右全方向に適用されます。

div {
margin : 10px;
}

バックグラウンド記述

バックグラウンドをショートハンドで書くと、background-color・background-image・background-repeat・background-position(x座標/y座標)の順に適用になります。background-positionは、x座標はleft・center・right/yの部分はtop・center・bottomで指定できるほか、数値でも指定ができます。
数値で指定する場合は背景を指定する要素の左上から始まります。マイナスの値も認められます。ただし、数字と位置指定の組み合わせ(たとえば 10px center など)だと一部のブラウザで不具合が出る場合があります。

div {
background : #CCC url(images/bg.gif) no-repeat 0 0;
}

フォント指定

フォントをショートハンドで書くと、font-style・font-weight・font-size/line-height・font-famillyにの順に適用されます。

div {
font : italic bold 12px/1.5 Verdana, Arial, Helvetica;
}

リスト

リストをショートハンドで書くと、list-style-type・list-position・background-imageが適用されます。

div {
list-style : square inside url(images/bullet.gif);
}

Dreamweaver CS3でのショートハンド設定方法

Dreamweaverの初期設定ではショートハンドは適用されず、個別指定の長い形でCSSが設定されます。

ショートハンドに対応される方法…[編集]-[環境設定] (Windows) または [Dreamweaver]-[環境設定] (Macintosh) を選択して [環境設定] ダイアログボックスを表示し、[CSS スタイル] カテゴリで CSS 編集環境設定を変更します。

関連する投稿

Jimdo

オススメ書籍

10日でSEO&アクセスアップ Jimdoデザインブック

かっこいいだけではなく、人が集まるホームページを作る!

「Jimdo」(ジンドゥー)でのホームページの作成方法と運用方法を解説した書籍。解説記事を順番に読み進めて行くことで、Jimdoを使ったホームページの作成・運用・宣伝・集客の基本を、10日間で習得するのが本書のコンセプトです。12章構成の解説の中で、Jimdoの基本操作とホームページの作成、デザインとコンテンツ(内容)のレベルアップ、そしてSEOやリスティング広告を含む宣伝・集客の基本を解説しています。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


ABOUTこの記事をかいた人

株式会社マジカルリミックス 代表取締役CEO/JimdoExpert 宮城県出身。コンピューター系の専門学校を卒業後、仙台のデザイン会社に入社。 Webサイトのデザイン・コーディングをはじめとし、各種デジタルメディアのデザインに従事。2002年退職後すぐにマジカルリミックスを創業。2007年に法人化で株式会社マジカルリミックスを設立。Webサイト運用に関するコンサルティング、社内向けITトレーニング、セミナー出演、執筆など。2005年から仙台の専門学校で、非常勤講師としてWeb制作講義を担当。 主な著書に『10日で作るかっこいいホームページ Jimdo(ジンドゥー)デザインブック』(エムディエヌコーポレーション)『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』(共著、同)『基礎から覚える、深く理解できる。Webデザインの新しい教科書』(同)。