カテゴリー: コーディング

paddingとは、要素内の余白のことです。

paddingとは上下左右のパディングをまとめて指定するプロパティです。
上下左右を異なるパディング幅にしたい場合は、スペースで区切って複数の値を指定することができます。

4つ値を指定する場合は上 右 下 左の時計回りの順
▼上5px　右10px　下15px　左20px

padding:5px 10px 15px 20px;

3つ値を指定する場合は上 左右 下の順
▼上5px　左右10px　下15px

padding:5px 10px 15px;

2つ値を指定する場合は上下 左右の順
▼上下5px　左右10px

padding:5px 10px;

1つだけ指定する場合は上下左右を一括で指定することになります。
▼上下左右5px

padding:5px;

※padding(パディング)には負の値やautoを指定することはできません。

参考サイト：http://www.htmq.com/style/padding.shtml
参考サイト：http://html-coding.co.jp/annex/dictionary/css/padding/

CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、
ウェブページのスタイルを指定するための言語です。

【HTML】

<h1>クレアネット</h1>

【CSS】

h1{
  color:red;
}

色指定のプロパティ値 rgba(0~255,0~255,0~255,0~1);

rgbと不透明度aで色指定できる。
rgbは0~255または%指定、
aは0~1で指定　※0（完全に透明）～1（完全に不透明）

【使用する時】
color,background-color
だけでなく
borderやbox-shadowなど色指定できるプロパティに使用できる。
特にデザイン画でbox-shadowに透明度を使用している場合が多いので、利用すると再現しやすい。

【opacityプロパティとの違い】
opacityだと全体に透明度の設定がかかる。
例えば背景だけ透過させたい場合、
background-colorにrgba()で透明度を設定すると背景だけに不透明度の設定ができる。

min-widthについて

横幅の可動範囲を指定
max-widthは、最大値
min-widthは、最少値です。

現在のところ、このプロパティはInternetExplorer5.0/5.5/6.0には対応していません。

■自動選択ツールからパスを作成し、トリミングする

・なめらかにする場合
アンチエイリアス　オン
・自動選択ツール[W]で選択範囲作成 > 上部「選択」> 選択範囲を滑らかにする　>選択範囲をパスに変換（必要があればダイレクト選択ツール[A]で修正）
・できたパスをカット >　[Ctrl]+[Alt]+[V]でマスクとしてペースト

参考： Fireworksだけで綺麗な切り抜きをする場合の設定と方法

・簡単な操作でテーブルタグを作成できるWebサービス

URL: Table Tag Generator

・box-shadow border-radius 作成できるWebサービス

box-shadowとborder-radiusジェネレーター

・グラデーションを作成できるWebサービス

URL: Ultimate CSS Gradient Generator

参考：https://liginc.co.jp/designer/archives/2419

ＨＴＭＬ特殊文字一覧は、ホームページ作成時に特殊な文字を使用したいときに利用します。
参考サイト：http://pst.co.jp/powersoft/html/index.php?f=3401

 とはブラウザ上で空白が欲しい時に使います。

 は「Non-Breaking SPace」の略で
英文訳は「ここの空白では改行したくない」「改行なしスペース」

参考サイト：http://blog.fenrir-inc.com/jp/2011/06/post_51.html

table　cellpaddingとcellspacingについて

cellpaddingとは、枠内のマージン（余白）を指定
cellspacingとは、セル同士の間隔を指定

<table border="1" cellpadding="1" cellspacing="6" width="200" height="150">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</table>

▼こんな感じになります。

参考サイト：http://heo.jp/tag/table/padding.html
参考サイト：http://mbsupport.dip.jp/hp/hpt14.htm
参考サイト：http://www.tagindex.com/html_tag/table/table_cellspacing.html

widthは横幅を指定します。
max-widthは画像の横幅の最大値を指定します。

▼（描画領域に合わせて拡大したり縮小したりする）は、画像に対してwidthプロパティを使います。

img{
width:100%; /*横幅に合わせて自動で拡大縮小する*/
}

▼（原寸より大きくはしたくない場合）max-widthプロパティを使えば実現できます。

img{
max-width:100%;/*横幅に合わせて自動縮小はするが、拡大はしない*/
}

widthプロパティの値に「%」を使って割合で指定した場合は、親となるブロックの横幅に対する割合を指定したことになります。
・width: 100%;は「親ブロックの横幅に一致するように拡大縮小する」という指示になり、
・max-width: 100%;は「最大でも親ブロックの横幅に一致させる（＝親ブロックよりも画像の方が大きいなら自動縮小させる）」という指示になる

参考サイト：http://www.nishishi.com/css/image-max-width.html
参考サイト：http://www.htmq.com/style/max-width.shtml
参考サイト：https://dekiru.net/article/13193/

イラストレーターでスライスする際に早い方法まとめ

【１】オブジェクトを選択してスライスを作成
・オブジェクトを選択状態で、上部メニューから　オブジェクト>スライス>作成
・ショートカットキーは[alt]+[o]→[s]→[m]
※オブジェクトとスライスがグループ化されて移動してもついてくる。

・オブジェクトを選択状態で、上部メニューから　オブジェクト>スライス>選択範囲から作成
・ショートカットキーは[alt]+[o]→[s]→[s]
※選択範囲から作成するので全選択したらすべてのオブジェクトの囲んだ範囲でスライスが作成される。個別にはスライスは作成されないので注意。

【２】ガイドから作成
・まずオブジェクトに合わせてガイドで囲む。
・上部メニューから　オブジェクト>スライス>ガイドから作成
・ショートカットキーは[alt]+[o]→[s]→[ｇ]
※まとめてスライスする時に便利

参考：illustratorのaiデータから画像を綺麗にスライスする方法｜Web Design KOJIKA17