min-width

min-widthについて

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

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

【FW】トリミング方法

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

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

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

便利なtag,cssジェネレーターまとめ【table box-shadow border-radius グラデーション】

・簡単な操作でテーブルタグを作成できる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

HTML-特殊文字

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

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

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

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

tabel cellpaddingとcellspacing

table cellpaddingとcellspacingについて

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

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

参考サイト: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は横幅を指定します。
max-widthは画像の横幅の最大値を指定します。

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

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

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/

【スライス】イラストレーターでのスライス方法

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

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

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

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

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

Crayon Syntax Highlighter

Crayon Syntax Highlighterは、記事の中でソースコードを綺麗に表示できるプラグインです。
使い方は簡単です。プラグインをインストールすると、記事編集エディタに専用のボタンが追加され、
そのボタンを押すと表示される挿入画面から表示するソースコードを登録します。

このプラグインを利用すると、ソースコードがエディタがのように綺麗に表示できます。
見栄えと使い勝手が良いので非常に役に立つプラグインです。
Webサイト上でHTML/CSSやプログラミングのコードを解説する機会が多い方は、このプラグインを活用しましょう。

1、crayonをインストールできたら、右上にある【crayon】をクリック

2、Paste your code here, or type it in manually.と書かれている所に入れたいソースを記入します。
3、右上にあるAddをクリックします。

4、更新すればこのように表示されます。

参考サイト:http://netaone.com/wp/crayon-syntax-highlighter/
参考サイト:http://naifix.com/crayon-syntax-highlighter/

【CSS】clearfixの方法【float回り込み解除】

floatの回り込みを解除したい(clear:bothをかける)時の方法

【1】:afterを使用

・floatを解除したいセレクタに:afterをつけ以下のプロパティ値を使用する。

セレクタ:after{
content: “”;
display: block;
height: 0;
font-size:0;
clear: both;
visibility:hidden;
}

【参考】floatを解除する手法のclearfix と 次世代のレイアウトの話
【2】その他の解除方法

・以下のdivタグを回り込み解除したいタグの直後に記述する

<div class=”clear”></div>

・CSSで.clear を設定する

.clear{
clear:both;
}

 

 

テキストを画像に置換する方法

テキストを画像に置換する方法

htmlソース

CSS記述例

この記述方法で、htmlの記述変更ができない場合にテキストの文字は見えないようにし、
画像をクリックすれば、リンク先に飛ぶことでできます。

参考サイト:http://html-coding.co.jp/knowhow/tips/rollover/
参考サイト:http://delaymania.com/201209/web/textindent-9999/