HTML/CSS6-2 スマホサイト作成 CSSコーディング編１ の続きになります。
上記ページを学習していない方は上記ページを済ませてから作成してください。
お問い合わせフォームのコーディングをしていきます。
フォームの背景色は#2ac287、文字色は#fffにします。文字の余白としてpadding3%を指定します。
p要素については、margin-bottomを0.6remで指定します。
コンタクトフォーム内のh2タグは文字色を#A4FF77の指定にします。
フォーム内のtable要素については全体の96%になるように指定し、margin 0 autoを使い中央揃えにします。
テーブル内th要素は全体の30%にして、テキストを右揃えの指定に、フォントサイズを0.7rem、文字の太さはnormal、行間として、0.3remほど文字を下げて表示させましょう。
/*お問合わせフォーム*/
#contactUs {
background-color: #2ac287;
color: #fff;
padding: 3%;
}
#contactUs p {
margin-bottom: 0.6rem;
}
#contactUs h2 {
color: #A4FF77;
}
#contactUs table {
width: 96%;
margin:0 auto;
}
#contactUs th {
width: 30%;
text-align: right;
font-size: 0.7rem;
font-weight: normal;
padding-top: 0.3rem;
}
#contactUs td {
width: 70%;
padding-bottom: 0.5rem;
vertical-align: top;
}
エミュレーターで確認して各CSSが反映されていればOKです。
次にフォーム要素のコーディングです。
textareaは高さを10remで指定します。
input type text は高さを1.5remに指定します。
input type textとtextareaは幅100%、box-sizingでborder-box （padding と border の幅を要素の幅と高さに含める）を指定します。border-style:はnoneで指定します。
box-sizingというのは、ボックスサイズ(width, height ) の算出方法を 指定する際に使用するプロパティです。
css の世界では, width に 300px と指定していても padding や border-width が指定されていた場合, 実際に表示される要素の幅は width + 両サイドのpadding + 両サイドのborder-width でした.
つまり指定した要素は 260px + (15*2)px + (5*2)px = 300px として表示されているわけです.
対する下の要素は border-box を指定しているので padding や border-width の幅に関係なく width に指定した値, つまり 300px として表示されています.
このように box-sizing に border-box を指定しておくことで, 指定した width の通りに要素を表示してくれるようになります.
一応モダンブラウザはひと通り対応していますが ベンダープレフィックスを指定しないと反映されません。
input type submitは幅30%、行の高さと高さを1.6rem、padding-reftを1remに指定します。
背景色を#B8FFBC、文字色を#31B25D、フォントサイズを0.8rem、文字の間隔を1remに指定します。border-style:はnoneで指定します。
cursorでマウスポインターの指定を行います。今回は、pointerで指定しましょう。
textarea {
height: 10rem;
}
input[type="text"] {
height: 1.5rem;
}
input[type="text"], textarea {
width: 100%;
box-sizing:border-box;
border-style: none;
}
input[type="submit"] {
width: 30%;
line-height: 1.6rem;
height: 1.6rem;
padding-left: 1rem;
background-color: #B8FFBC;
color: #31B25D;
font-size: 0.8rem;
letter-spacing: 1rem;
border-style: none;
cursor: pointer;
}
エミュレーターで確認してください。コメント入力エリアやボタンのCSSが確認できれば大丈夫です。
またカーソルの確認は通常のPCに戻すとわかりやすいかもしれません。
次にaside部分のコーディングをしていきます。
aside section ともに padding 3% margin-bottom を0に指定します。文字は中央揃えにしましょう。
asideの h3タグ は フォントサイズ 0.8rem margin-bottom 1remに指定します。
/*aside*/
aside section {
padding:3%;
margin-bottom: 0;
text-align: center;
}
aside h3 {
font-size: 0.8rem;
margin-bottom: 1rem;
}
エミュレーターで確認してテキストがセンターにあればOKです。
google map部分の装飾をします。
クラス指定したaccessmap のポジションを relative padding-bottomを 60% 高さを0 overflow hiddenを指定します。
accessmap内のiframe はポジションを absolte 上から0 左から0 幅を100%、ボーダーなし、高さも100%で指定します。
/*google map*/
.accessmap {
position: relative;
padding-bottom: 60%;
height: 0;
overflow: hidden;
}
.accessmap iframe {
position: absolute;
top: 0;
left: 0;
width: 100% ;
border: 0;
height: 100%;
}
エミュレーターで確認してください。
次にfooter部分のコーディングです。
footerは 背景色を#d77943 文字色は白、overflow: hiddenを指定して、はみ出した要素を隠すようにします。padding-top を1remで指定しましょう。
footer内のsectionは padding4% 幅42% margin-bottomを0 左回り込を指定します。
/*footer*/
footer {
background-color: #d77943;
color: #fff;
overflow: hidden;
padding-top: 1rem;
}
footer section {
padding:4%;
width: 42%;
margin-bottom: 0;
float: left;
}
次にh4タグ リストタグなどをコーディングしていきます。
footer sectionの h4タグは 文字色が白、 margin-bottom を1remに指定します。
footer section のliタグは 行の高さを 1.5remに指定します。
liタグの リンク時 に対して 文字色白、テキストデコレーションなし、フォントサイズ0.8remを指定します。
footer smallに対しては displayを ブロックに、paddingは1rem、フォントサイズ 0.8remを指定し 回り込み解除の指定をします。
footer section h4 {
color: #fff;
margin-bottom: 1rem;
}
footer section li {
line-height: 1.5rem;
}
footer section li a {
color: #fff;
text-decoration: none;
font-size: 0.8rem;
}
footer small {
display: block;
padding: 1rem;
font-size: 0.8rem;
clear: both;
text-align: center;
}
だいぶすっきりしてきました。
最後は go to top 部分のコーディングです。
まず、文字を z-indexで20000と指定します。
z-indexの詳細はこちらで確認してください。
position は fixed で固定させます。 場所の指定は 下、右から10pxのところに固定しましょう。
リンク時は display blockに、幅は4rem、高さは3rem、行の高さは3rem フォントの太さをboldに、文字色は白、文字は中央揃え、
背景色ですが、rgbaで指定します。rbgaについてはこちらを参考にしてください。
background-color: rgba(242,154,118,0.7); と指定します。
フォントサイズは2rem テキストデコレーションなしと指定します。
アニメーションとして、transitionを指定します。transitionというのは時間的変化をつけるためのCSSアニメーションの指定です。
hoverなどでスタイルが変化する際、通常はすぐに切り替わりますが、transitionを使うと時間をかけて変化するなど様々な設定をすることが可能になります。
今回は all 0.2s linear と指定しましょう。
最後に角丸指定で 0.3remを指定します。
マウスオーバー時の指定は、rgba(255,100,50,0.7)を指定します。
footer section ul liに対して回り込み解除を指定して終了です。
/* go to top */
#gototop {
z-index: 20000;
position: fixed;
bottom: 10px;
right: 10px;
}
#gototop a {
display: block;
width: 4rem;
height: 3rem;
line-height: 3rem;
font-weight: bold;
color: #fff;
text-align: center;
background-color: rgba(242,154,118,0.7);
font-size: 2rem;
text-decoration: none;
transition: all 0.2s linear;
border-radius: 0.3rem;
}
#gototop a:hover {
background-color: rgba(255,100,50,0.7);
}
footer section ul li {
float: none;
}
エミュレーターで角丸の上へボタンが表示されたら大丈夫です。マウスオーバー時の動作はPC用の表示で確認してください。
今回はスマホ用CSSのみ作成しました。
今まで学習を進められた方は、この後、このCSSを元にレスポンシブ対応のCSSを作成してください。
レスポンシブ対応のCSSが完成した場合、今回は画像差し替えなしでも課題提出OKです。
今回作成したCSSの完成版は下記になります。