「HTML/CSS」カテゴリーアーカイブ

HTML/CSSに関する記事です。

[HTML/CSS]ケータイサイト（携帯サイト/ガラケーサイト）の郵便番号入力用テキストボックスのコード

2015年3月31日 yellow

<form action="#">
  <font size="2" color="#000000">〒<input type="text" size="6" istyle="4" format="3N" mode="numeric" maxlength="3" value="" name="" id="" />-<input type="text" size="7" istyle="4" format="4N" mode="numeric" maxlength="4" value="" name="" id="" /><br />
  <input type="submit" value="確認" name="" id="" /><br /></font>
</form>

</form>

以下の機能を満たしています。
・フォームボタンとテキストボックスのフォントサイズ＝2、カラー＝#000000（黒）
・半角数字モード
・入力桁数制限（〒[3桁]-[7桁]）
・3携帯キャリア対応（i-mode docomo端末、EZweb au端末、Yahoo!ケータイ softbank端末）

[参考]
http://www.plusmb.jp/2008/10/24/948.html
http://www.abe-tatsuya.com/web_prog/mobile_web/input_attributes.php
http://www.symmetric.co.jp/blog/archives/109

HTML/CSS

[HTML/CSS]テーブルについての注意点

2015年3月7日 yellow

CSSセレクタの tr 指定はブラウザによっては動作しないことがある。
tr 指定は使用せず、th と td に代替指定すると良い。

.sampleTable {
}
.sampleTable th {
	vertical-align:middle;
}
.sampleTable td {
	vertical-align:middle;
}

.sampleTable {

}

.sampleTable th {

vertical-align:middle;

}

.sampleTable td {

vertical-align:middle;

}

.sampleTable {
}
.sampleTable tr {
	vertical-align:middle;
}
.sampleTable th {
}
.sampleTable td {
}

.sampleTable {

}

.sampleTable tr {

vertical-align:middle;

}

.sampleTable th {

}

.sampleTable td {

}

HTML/CSS

[HTML/CSS]セパレータ・区切り線・水平罫線

2015年3月2日 yellow

以下、サンプルコード

<hr class="line" />

1	<hr class="line" />

/*
セパレータ・区切り線
*/
.line {                              /* hrタグに付ける（最大3ライン対応の水平罫線） */
	display:block;
	border:none;                     /* 左右のボーダーを消すために必要 */
	margin:0;
	padding:0;
	height:1px;                      /* 上線px＋中線px＋下線px＝高さpx */
	border-top:solid 1px #CCC;       /* 上線の色、pxを指定 */
	background:none;                 /* 中線の色を指定 */
	border-bottom:none;              /* 下線の色、pxを指定 */
}

セパレータ・区切り線

.line { /* hrタグに付ける（最大3ライン対応の水平罫線） */

display:block;

border:none; /* 左右のボーダーを消すために必要 */

margin:0;

padding:0;

height:1px; /* 上線px＋中線px＋下線px＝高さpx */

border-top:solid 1px #CCC; /* 上線の色、pxを指定 */

background:none; /* 中線の色を指定 */

border-bottom:none; /* 下線の色、pxを指定 */

}

HTML/CSS

[HTML/CSS]青色グラデーションのボタンのソースコード（aタグ、inputタグ共通）

2015年2月28日 yellow

選択

aタグに指定
<a href="#" class="selectBtn">選択</a>
inputタグに指定
<form action="#">
<input class="selectBtn" name="input" type="submit" value="選択" />
</form>

aタグに指定

inputタグに指定

</form>

/*
選択ボタン
デザイン上青色グラデーションのボタン
*/
.selectBtn, a.selectBtn {
	display: inline-block;
	cursor: pointer;
	background: #0058D4;
	background: -moz-linear-gradient(#639FE8, #0058D4);
	background: -webkit-gradient(linear, left top, left bottom, from(#639FE8), to(#0058D4));
	border: none;
	color: #FFF;
	font-weight: 400;
	font-size: 16px;
	font-family: "メイリオ", "Meiryo", verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
	text-align: center;
	line-height: 100%;
	padding: 18px 0px 16px;
	width: 7em;
}
.selectBtnKanri:hover, a.selectBtnKanri:hover {
	background: #3280E2;
	background: -moz-linear-gradient(#94BDEF, #3280E2);
	background: -webkit-gradient(linear, left top, left bottom, from(#94BDEF), to(#3280E2));
	text-decoration: none;
}

選択ボタン

デザイン上青色グラデーションのボタン

.selectBtn, a.selectBtn {

display: inline-block;

cursor: pointer;

background: #0058D4;

background: -moz-linear-gradient(#639FE8, #0058D4);

background: -webkit-gradient(linear, left top, left bottom, from(#639FE8), to(#0058D4));

border: none;

color: #FFF;

font-weight: 400;

font-size: 16px;

font-family: "メイリオ", "Meiryo", verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳＰゴシック", "MS PGothic", Sans-Serif;

text-align: center;

line-height: 100%;

padding: 18px 0px 16px;

width: 7em;

}

.selectBtnKanri:hover, a.selectBtnKanri:hover {

background: #3280E2;

background: -moz-linear-gradient(#94BDEF, #3280E2);

background: -webkit-gradient(linear, left top, left bottom, from(#94BDEF), to(#3280E2));

text-decoration: none;

}

HTML/CSS

[HTML/CSS]ID名とクラス名の違いと注意点について

2015年2月28日 yellow

——– ID名について ——–

・HTML属性に複数のID名を記述してはいけない

<div id="sample1 sammple2"></div>

1	<div id="sample1 sammple2"></div>

・1ページ内に1度しか記述してはいけない

<div id="sample"></div>
～
<div id="sample"></div>
～

～

～

——– クラス名について ——–

・HTML属性に複数のクラス名を記述してよい

<div class="sample1 sammple2"></div>

1	<div class="sample1 sammple2"></div>

・１ページ内に何度でも記述してよい

<div class="sample"></div>
～
<div class="sample"></div>
～

～

～

HTML/CSS

[HTML/CSS]内部リンクのアンカーの設置の仕方について

2015年2月26日 yellow

リンクボタン
<a href=”#work”>仕事</a>
アンカー
<a name=”work” id=”work”></a>

アンカーの設置場所は、対象のタグの外側の直前につける

例）対象（h2タグ）の外側の直前につけている
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
<a name=”work” id=”work”></a>
<h2 class=”contentTitle”>仕事</h2>
<p>テキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキスト</p>
<a name=”study” id=”study”></a>
<h2 class=”contentTitle”>勉強</h2>
<p>テキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキスト</p>
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑