カテゴリー別アーカイブ: CSS

Dreamweaver-パネルでcssを作成しよう!-カテゴリ「ボックス」

「Dreamweaver-パネルでcssを作成しよう」第4回目はカテゴリ「ボックス」プロパティを見直していきます。
(前回のカテゴリ「ブロック」はこちら)

width
横幅を指定します。
height
高さを指定します。
Float
配置を指定します。

left
左寄せの指定をします。またはその後に続く要素に関しては、左寄せに指定した要素の右に回り込みをするよう指定します。

right
右寄せの指定をします。またはその後に続く要素に関しては、右寄せに指定した要素の左に回り込みをするよう指定します。

none
特に何も指定しません。

clear
回り込みの解除を行います。

left
左寄せされた要素の回り込み解除を指定します。

right
右寄せされた要素の回り込み解除を指定します。

both
右又は左寄せされた全ての要素の回り込み解除を指定します。

none
回り込み解除はしません。

padding
余白の指定をします。marginはある領域とある領域の間の余白であるのに対し、paddingはひとつの領域の中での余白です。

top
上の余白を指定します

right
右の余白を指定します

bottom
下の余白を指定します

left
左の余白を指定します

margin
余白の指定をします。paddingはひとつの領域内での余白であるのに対し、marginはある領域とある領域の間の余白です。

top
上の余白を指定します

right
右の余白を指定します

bottom
下の余白を指定します

left
左の余白を指定します

img01_02

marginやpaddingはショートハンドプロパティを使用することで表示を簡潔に整理することができます。
padding: {10px 20px 30px 40px;} (左側(10px)から、上右下左)
padding: {10px 20px 40px;} (左側(10px)から、上・左右・下)

ちなみに、divなどで囲ったおおきなボックス(くくり)を、web上の画面内で
左右に対しまん中表示させる際には、
margin:0 auto; (上下は0、左右はauto)指定をします。
webサイト全体が画面の左寄せで表示されているサイトが今でもよくみられますが最近では画面センターで表示されるよう設定するのが通常です。

カラーミーの価格表示設定

カラーミー(ECサイト)で、通常価格よりも商品をお安く販売をする際、
例えば「本来は20,000円だけど、今は15,000円でオトクに販売しています!」
という時、その値引き額(「5,000円も安くなってるんですよ!」ということ)をユーザーに知らせたいですよね。

そんなときは、商品登録の際、「定価」と「販売価格」の両方に入力すれば自動で2つの価格が表示されるわけですが、
「定価」に打ち消し線をつけ、かつ、線の色だけ赤にしたい!
というお声がございましたので、その際のコーディング方法をお伝えします。

カラーミーの
「お店を作る」「デザインを設定する」→「商品詳細」html編集をクリックし、以下の箇所を探しましょう。

htmlサンプル1—————————-————————–

<tr>
<th>定価</th>
<td><{$product.price}></td>
</tr>

————————————————————————

ここに定価表示の設定がされているため、スタイルをかけて調整していきます。

tdタグの欄に以下を追加し、CSSで打ち消し線の色を設定します。
定価の数字も赤で問題ないかたは、spanタグの設定は不要です。

htmlサンプル2————————————

<tr>
<th>定価</th>
<td><p class=”line-red”><span><{$product.price}></span></p></td>
</tr>

CSSサンプル——————————————————–

p.line-red{text-decoration:line-through;color: red;}

p.line-red span{color:#000;}

————————————————————————

これで定価の数字は黒色、打ち消し線のみ赤、の設定ができました。
↓↓↓こんな感じ

sample_1

「定価」と「販売価格」を設定した商品については、基本的には全ページ共通の表示となりますのでご注意くださいませ。

それでは~

Dreamweaver-パネルでcssを作成しよう!-カテゴリ「ブロック」

「Dreamweaver-パネルでcssを作成しよう」第3回目はカテゴリ「ブロック」プロパティを見直していきます。
(前回のカテゴリ「背景」はこちら)

word-spacing
単語と単語の間の間隔を指定します。(値で数値を指定)
letter-spacing
「word-spacing」が単語間の間隔なのに対し、「letter-spacing」は文字と文字の間隔を指定します。
vertical-align
親要素に対して、縦方向の位置を指定する際に使用。こちらはインライン要素とテーブルのセルにのみ適用でき、ブロック要素には適用できません。

top
上揃え

middle
中央揃え

bottom
下揃え

text-top
テキストの上揃え(テーブルでは無効)

text-bottom
テキストの下揃え(テーブルでは無効)

super
親要素の上付き文字の位置に表示(テーブルでは無効)

sub
親要素の下付き文字の位置に表示(テーブルでは無効)

text-align
テキストの配置位置を指定。

left
左寄せ

right
右寄せ

center
中央揃え

justify
均等割付。「text-justify」との併用が必要。

text-indent
最初の段落、一行目のインデント(字下げ)幅を指定する際に使用。値で指定します。
white-space
テキストを自動で改行、空白についての指定します。

normal
自動改行

pre
自動改行せず、空白・タブ・改行はそのまま表示。

nowrap
自動改行せず、複数の空白・タブ・改行をひとつの空白に置換して表示。

display

none
表示されません

inline
インライン要素として表示

block
ブロック要素として表示

inline-block
インライン要素のように前後に改行はなしですが、横幅縦幅の指定は可能

list-item
リストとして表示

run-in
前後の状況により、インラインまたはブロック要素になります。

compact
前後の状況により、インラインまたはブロック要素になります。

table
テーブル要素になります。

inline-table
インラインテーブルになります。

table-row-group
テーブルのtbody要素になります。

table-header-group
テーブルのthead要素になります。

table-footer-group
テーブルのtfoot要素になります。

table-row
テーブルのtr要素になります。

table-column-group
テーブルのcolgroup要素になります。

table-column
テーブルのcol要素になります。

table-cell
テーブルのth要素、td要素になります。

table-caption
テーブルのth要素、caption要素になります。

inherit
継承

Dreamweaver-パネルでcssを作成しよう!-カテゴリ「背景」

「Dreamweaver-パネルでcssを作成しよう」第2回目はカテゴリ「背景」プロパティを見直していきます。
(前回のカテゴリ「タイプ」はこちら)

Background-color
背景色を指定する際に使用。
Background-image
背景画像を指定する際に使用。「参照」ボタンで画像をアップします。noneは画像なしですね。
Background-repeat
背景画像の繰り返しパターンを設定します。

no-repeat
繰り返しなしの表示。1回のみ背景画像を表示。

repeat
縦横に背景画像を繰り返して表示。

repeat-x
横方向にのみ背景画像を繰り返して表示。

repeat-y
縦方向にのみ背景画像を繰り返して表示。

Background-attachment

fixed
背景画像の位置を固定するためスクロールしても動きません。

scroll
スクロールに伴い背景画像も移動。

Background-position
背景画像の表示を開始する位置を指定。(X)は横位置、(Y)は縦位置を示します。

left・center・right
背景画像の左・まん中・右側など、表示開始位置を指定。

(値)px・%など
背景画像の左上からの距離を指定。例えば、background-position: 10% 20%; の場合、背景画像の左端から10%、上端から20%の位置で背景画像を表示します。

背景画像のリピートについて補足:
画像サイズを小さくしてリピートさせることで画像容量を減らすことは出来ますが、その分表示するために負荷がかかります。とくにスマートフォンなどは読み込みに時間がかかるとユーザーのストレスにつながります。また、逆に画像サイズを大きくすると画像の重さでサーバーに負荷がかかります。
ではどうすることが最適なのでしょう?
web業界では、「一般的にどうしているか」ということが重要になります。
一般的に、1ページあたりの画像の容量はどれくらいなのかを調査し、自分がアップする1ページあたりの画像の総容量がその前後でおさまっているか、大幅にオーバーしていないかなどを見直し、リピートさせるのが適切か、1枚画像でアップするのが適切かを判断するようにするとよいですね。

Dreamweaver-パネルでcssを作成しよう!-カテゴリ「タイプ」

以前の職場ではドリームウィーバーがはいっておらず、ずっとテキストエディターでコーディングをしていたドリームウィーバー初心者コーダーです。

当時、テキストエディターに慣れはじめていた私は「タグの意味もCSSの意味も覚えられるし、手入力でよかったかも~ドリームウィーバーなんていらなわ~」と思っていました。
ここしばらくはコーディングそのものから遠ざかっていたため、相変わらずめったにドリームウィーバーは使用していなかったのですが、この数ヶ月コーディングに携わる機会があり、ドリームウィーバーを見直していたところ、それまでの考え方が180度間違っていたことに気がつきました。

「ごめんなさい、ドリームウィーバーさん、あなたはスバラシイです…」

そんなわけで、ドリームウィーバーの機能を初心者目線で改めて見直していきたいと思います。
今回は、これまで全くもって無視し続けてきたパネルです。
パネルを使用しての新規CSS入力機能を使用することで、劇的に効率を上げていくことができます。
でもよくみると、「このプロパティってどういう意味?使ったことないけど…」なんてものがちらほら。
そこで、今回はカテゴリ「タイプ」に表示されるプロパティの意味を見直していきます。

ちなみにパネルを使用してのCSS入力は、以下の図の赤いまる枠「新規CSSのルール」をクリックするとダイアログボックスが表示され、クラスなどの名称を入力して進めます。
sample?

カテゴリのタイプに記載されているプロパティ

sample2

font-family
フォントの種類を指定する際に使用。 フォントの種類はカンマ( , )で区切って複数の種類を並べることが可能です。ダブルクオーテーションで囲むことも忘れずに!
font-size
pxやemなどの単位をつけて文字サイズを指定。
font-style
フォントのスタイルを指定する際に使用。
「normal」標準の表示形式。
「italic」イタリック体。
「oblique」斜体。
日本語フォントの場合、イタリック体と斜体の表示はほとんど同じ表示のようです。
line-height
行の高さを指定する際に使用。line-heightが30pxでfont-sizeが12pxの場合、30px(line-height)から12px(font-size)を引いた、残り18pxが行間として上下に9pxずつ割りあてられるというわけです。
font-weight
フォントの太さを指定する際に使用。
「normal」標準の表示形式。
「bold」太字にする。
「lighter」一段階細くする。
「bolder」一段階太くする。
font-variant
「normal」標準の表示形式。
「small-caps」英字の小文字の表示形式を、小文字サイズのまま、表示形式は大文字とする際に使用。
text-transform
「none」標準の表示形式。
「capitalize」単語の先頭文字を大文字で表示。
「lowercase」全てを小文字で表示。
「uppercase」全てを大文字で表示。
text-decoration
「underline」下線付テキスト。
「overline」上線付テキスト。
「line-through」打ち消し線テキスト。
「blink」テキストが点滅しますが、サポートしていないブラウザが多いようです。
「none」標準の表示形式。
Color
テキストの色を指定。
使用頻度が低いものもありますが、一通りの意味は押さえておきたいですね。
次回は背景プロパティーについて記載していきます~。

フロートの解除

まったくもってやっかいなフロート。解除がうまくいかないとレイアウト崩れの原因になってしまいますね。そんなやっかいなフロートに立ち向かうための王道の解除方法をご紹介いたします。

ul li で、liにフロートをかけた場合

li
のフロートを解除する場合、
ul内にはliタグしか入れられないため、
王道解除のひとつである<br />で clear:both;といった手法での
解除ができません。でもフロートの解除は終了タグの直後になければいけない、でもいれられない…

そんなときは!

ulの高さがなくなってしまう対処方法

ulに
overflow: hidden;
のスタイルを設定します。
厳密にはフロートの解除ではありませんが、
レイアウトの崩れなどの不具合を解除することが可能です。

■html
<ul>
? <li>サンプル1</li>
? <li>サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2</li>
? <li>サンプル3</li>
? <li>サンプル4</li>
? <li>サンプル5</li>
</ul>

■css
ul {
??? background: #C36;
??? overflow: hidden;
}
li {
??? background: #FF3;
??? margin-top: 5px;
??? margin-bottom: 5px;
??? height: 100px;
??? float: left;
??? width: 100px;
}

フロートに悩まされているかたはお試し下さいね!

それでは~