【スマートフォン閲覧時に挿入される外部CSS】
ご質問があったのでページを作ってみました。
スマートフォン閲覧時にナノから自動で挿入される外部CSSの全てです。
デフォルトのHEAD内タグの設定が、する・しないに関わらず、スマートフォンと判断された端末には下のように外部CSSが挿入されます。
なお、当サイトで公開しているベースCSSは、これらの設定をいったんリセットするようにCSSを上書きしています。おかげでいつもCSS長くてすみません…。
▼出力されるタグ
＜link rel="stylesheet" href="/static/css/smartphone/common.css"＞
▼内容
body {
margin: 0;
-webkit-text-size-adjust: none;
font-size: 16px;
font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'モリサワ 新ゴ R'';
}
img {
border: 0;
}
.clear {
clear: both;
}
.text-red {
color: red;
}
.center {
text-align: center;
}
hr.dot {
height: 1;
color: #CCCCCC;
display: block;
border: 0px;
border-bottom: 1px dotted;
padding: 0;
}
/*--- textarea --*/
textarea {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee),
color-stop(1, #fff) );
background-color: #e8e8e8;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #999;
padding: 7px 0;
height: 5em;
font-size: 14px;
width: 90%;
}
textarea:focus {
height: 10em;
}
input[type="text"] {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee),
color-stop(1, #fff) );
background-color: #e8e8e8;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #999;
padding: 7px 0;
width: 90%;
height: 20px;
font-size: 14px;
}
input[type="text"].narrow {
width: auto;
}
input[type="number"] {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee),
color-stop(1, #fff) );
background-color: #e8e8e8;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #999;
padding: 7px 0;
width: 30px;
height: 20px;
font-size: 14px;
}
input[type="password"] {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee),
color-stop(1, #fff) );
background-color: #e8e8e8;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #999;
padding: 7px 0;
width: 90%;
height: 20px;
font-size: 14px;
}
select {
font-size: 15px;
height: 35px;
margin: 0 0 8px;
padding-left: 10px;
padding-right: 10px;
}
select.wide {
width: 90%;
}
input[type="submit"] {
text-align: center;
width: 80%;
height: 40px;
font-weight: bold;
color: #808080;
-webkit-box-shadow: 0px 1px 2px #808080;
-webkit-border-radius: 4px;
border: 1px solid #b2b2b2;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff),
color-stop(0.50, #ffffff), color-stop(1, #efefef) );
font-size: 14px;
}
input[type="submit"].narrow {
width: auto;
padding-left: 15px;
padding-right: 15px;
}
input[type="checkbox"] {
width: 25px;
height: 25px;
margin: 10px 10px 10px 0px;
}
input[type="radio"] {
width: 25px;
height: 25px;
margin: 10px 10px 10px 0px;
}
#footer-cr {
text-align: center;
}
プチ解説
以下は入力フォームとかの属性の説明と使用例です。
私が把握している所だとこんな感じです。
【textarea】--複数行入力フォーム。メールフォームの本文の所に使われています。ユーザー側ではコピーボックスに使われる場合も多いですね。
【input[type="text"]】--一行入力フォーム全般。複数行入力は基本的にできません。拍手とかメールフォームの名前欄とかは全部これ。
【input[type="text"].narrow】--使用場所確認できず。
【input[type="number"]】--小説機能のページジャンプ機能の入力欄。数値の入力欄。CSS3。PCではCSS3未対応ブラウザもあるので『type="text"』に変わる。
【input[type="password"]】--パスワード入力欄。
【select】--プルダウンメニュー。セレクトボックス。ブログ機能のカテゴリ表示や小説機能の章ジャンプなど。
【select.wide】--使用場所確認できず。
【input[type="submit"]】--送信ボタン全般。拍手ボタン、小説機能の名前変換登録・削除ボタンなど全部これ。
【input[type="submit"].narrow】--小説機能ページジャンプのボタン。…なぜか章ジャンプのボタンと区別されてる。個人的には一緒でいい気がする。
【input[type="checkbox"]】--複数選択できるチェックボックス。メールフォームやアンケートページに使われ、機能のコメント入力フォームの『管理人にだけ表示する』の左のボタンはこれ。
【input[type="radio"]】--一つだけ選択できるチェックボックス。メールフォームやアンケートページに使われる。
つまりは、な話
スマートフォンでの閲覧時に入力フォームが幅広なのは、この外部CSSでinputとtextareaの横幅が90%に設定がされているからなんです。そして送信ボタンは80%。
……個人的にはちょっと広すぎます。
当サイトのベースCSSでは一行入力フォームは65%、テキストエリアは70%、送信ボタンはauto（文字数で可変）に設定しなおしてあります。
なお、CSSで
input,textarea{width: ○px}としただけでは変わってくれません。
詳しくは検索サイトなどで『CSS 優先順位 属性』などで調べられると分かりますが、【input】と【input[type="属性"]】では、後者の方が優先度が高い為、後者の設定＝横幅90%が適用されるというわけです。
当サイトのCSSが
input[type="text"], input[type="password"], input[type="number"], 〜〜と長ったらしくなっているのはこうした事情もあります…。
余談ですが、時々ユーザーテンプレートで、スマートフォン閲覧時に横スクロールがでてしまうものを見かけます。
横幅600pxとかで設定されてしまっている場合、文字は画面端で折り返されるのでまだいいんですが、入力フォーム等は画面サイズに縮んではくれません。枠幅が基準となります。
上の例だと600pxの90%…540pxの幅になりますのでiPhoneなどの横幅320pxの機種だと画面外に飛び出ちゃいます。
特にテキストエリアがそうなっていると、メールフォームやコメントの本文部分が画面から飛び出してしまって、使い勝手が非常に悪いです。
文章入力中、文字数が画面サイズをこえた辺りから一文字打つ毎に画面が左にずれていくので軽く酔いかけたことがあります。あれは本当に宜しくない。入力する気力をガッツリ奪われます。
サイトを作る際はご注意下さいね。