毎日更新！アウトワード精鋭スタッフのブログです。

夏がやってきましたね。

私にはウレシイ季節です

去年より一つ歳を重ねたので、今年の夏はいつもより少し控えめに黒くなろうと思う今日この頃です。

本日はお仕事ネタ。

今までtableぐみで作っていたモノを、携帯版導入を考えたコード化をしてみようということで

ちょっとやってみました。

※「IE6でddに3pxのズレボン」がないように参考サイトを見ながら自分なりに作ってみました。

参考サイト：http://develo.org/2008/05/03/0104.html

▼こんな感じのシンプルな「お問い合わせフォーム」

【HTMLソース】

----------------------------------------------------------------------------------------------------------------------------------------------------------------

<dl class="gray02">
<dt>お名前</dt>
<dd><input type="text" class="fTxt01" /></dd>
<dt>フリガナ</dt>
<dd><input type="text" class="fTxt01" /></dd>
<dt>メールアドレス</dt>
<dd><input type="text" class="fTxt01" /><p>※半角文字でご入力ください。</p></dd>
<dt>お問い合わせ内容</dt>
<dd><textarea class="fTxtarea"></textarea></dd>
</dl>

----------------------------------------------------------------------------------------------------------------------------------------------------------------
 

【CSS】

----------------------------------------------------------------------------------------------------------------------------------------------------------------

.gray02 {
    border-left: 1px solid #B0B0B0;
    border-right: 1px solid #B0B0B0;
    border-bottom: 1px solid #B0B0B0;
    background-color: #F6F6F7;
    color: #4B4B4B;
}

.gray02 dt {
    margin: 0;
    margin-right: -160px;
    padding: 5px 0;
    border-top: 1px solid #B0B0B0;
    float: left;
    clear: both;
    display: inline;
    width: 160px;
    text-indent: 5px;
    font-weight: bold;
}

.gray02 dd {
    margin-left:160px;
    padding: 5px;
    border-left: 1px solid #B0B0B0;
    border-top: 1px solid #B0B0B0;
    background-color: #fff;
}

.gray02:after {
    content:"";
    display:block;
    clear:both;

}

/* for IE6 */
* html .gray02{
    display:inline-block;
    
}

/* for IE7 */
*+html .gray02 {
    display:inline-block;
}

----------------------------------------------------------------------------------------------------------------------------------------------------------------

（※フォームのinputのクラス名については省略しました）

今回も「after」さんを使用しました。

参考サイトでは、pxの代わりにemを使ってますが私はpxにしてみました。

.gray02 dtのpaddingで、左に5pxとる代わりにtext-indentで5pxずらしています。

オレンジ色部分がなんとなくミソっぽいです。

IE6,7,8で見てみましたが許容範囲の動作でした。（IE6の3pxズレも問題なし。）

これ応用して色々作ってみます。

ではでは。

ゲリラ豪雨！雷！

昨日から2日連続です。

どうも会社の近所は雷落ちやすいようです。

昨日はPC2回落ちましたとさ。。。

ノートにしてよかった。

あんにょん～

神宮です。

先日、3泊4日で韓国へ旅行へ行ってまいりました。

今回は福岡国際空港からAIRです　

キレー

出発ー！ソウルってば近い！！

離陸したと思えばもう到着です・・・

もちろん、今回も食べてきましたよ～

薬膳参鶏湯でございます。なつめや高麗人参などたくさんはいっています。

そして、人参酒はサービスです。

元気っ！元気っ！！

サムギョプサルです。周りを囲んでいるのは卵です。ハジメテミタ

ブタミンパワー

そして・・・今回衝撃的な出会いをしてしまった宇宙一おいしい冷麺です

こんな冷麺ない！ダシが絶妙！！麺が最高！！！です

（きらきらしているのはシャリシャリの氷です）

ちなみに韓国では冷麺は冬の食べ物らしいですよ

あ、見たらまた食べたくなりました。皆さんもソウルに行かれた際は是非食べてね