CSS

Last-modified: 2018-11-14 (水) 15:23:51 (2153d)

Top / CSS

TIPS

↑

フォームのカスタマイズ

ラジオボタンの代わりに画像でボタンを表す方法を調査しました。
画像と組み合わせたフォームカスタマイズ方法が色々載っていました。

[PHP & JavaScript Room]フォーム要素のカスタマイズ ... ボタン押し画像、ボタン離し画像を重ねる方法。それぞれ１枚の画像となっている。お手軽なのでこちらを採用
[Webクリエイターボックス]CSS3とjQueryでフォームを美しく装飾する方法 ... デザイナManaさんの運営するWebクリエイターボックスは色々勉強になりそうです。ポートフォリオもよくできていて、名刺やAboutもスキルが一見して分かるデザインがいいです。

↑

画像を中心に配置する方法

↑

テキストと画像の縦方向を中央寄せする方法

イメージに次のクラスを指定します。

.middle {
	vertical-align:middle;
}

↑

ラジオボタンサンプル

<fieldset>
	<legend>ラジオボタン</legend>
	<label for="r1">ラベル1</label> 
	<input type="radio" value="1" name="radionone" id="r1"/>　
	<label for="r2">ラベル2</label> 
	<input type="radio" value="2" name="radionone" id="r2" checked="checked"/>　
	<label for="r3">ラベル3</label> 
	<input type="radio" value="3" name="radionone" id="r3"/>
</fieldset>

↑

テーブルをセンタリングする方法

左右マージンにautoを設定します

caption {
	font-size: 1em;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0.5em
}
table {
	background: #008080;
	margin-left: auto;
	margin-right: auto
}

↑

iPhone mobile Safariのフォント表示

フォントサイズ: 16px
日本語フォントタイプ: ヒラギノ角ゴシックProN W3
英数字フォントタイプ: Times New Roman
行間: 17.6px

iPhoneの向きを変えた時のフォントサイズ自動調整をオフにする方法

<body style=”-webkit-text-size-adjust:none;”>

iOSのデフォルトフォントはiOS 7でHelvetica NeueからHelvetica Neue Ultra Lightに変更となりました。
またこちらのリンクも参照してください。iOS7のフォントはヒラギノ角ゴシックW1とW2

↑

CSS