クリエイター：コーディング備忘録ブログ – ページ 70 – クリエイター：コーディング備忘録ブログ

<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

2016/12262016/1226 admin コメントをする

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/

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

2016/12222016/1222 admin コメントをする

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

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

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

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

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

Crayon Syntax Highlighter

2016/12222016/1222 admin コメントをする

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

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>クレアネット</title>
</head>

<body>
</body>
</html>

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

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

2016/12212016/1222 admin コメントをする

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

【１】:afterを使用

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

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

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

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

・CSSで.clear を設定する

.clear{
clear:both;
}

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

2016/12212016/1221 admin コメントをする

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

htmlソース

<li class="text_indent"><a href="#">価格帯から選ぶ</a></li>

CSS記述例

.text_indent a｛
url:("指定する画像のＵＲＬ") no-repeat left top;　/* ←画像のURLとリピートしない、画像の位置は左の上 */
width:180px; /*←画像の横幅180px*/
height:44px; /*←画像の縦幅44px*/
display:block; /*←img要素はインライン要素なので、blockと書くことでブロック要素にすることができる。
text-indent:-9999px; /*←テキストの段落を下げる */
｝

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

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