::placeholderを使ったプレースホルダーの位置調整と、iPhoneとかだけ位置を個別調整した話 - わたしと納豆ごはん
ブログやサイトによくある検索ボックス。はてなブログにもありますよね。 この検索ボックスに前もって灰色の文字が書き込まれています。はてなブログでは「記事を検索」と書かれているものです。 これ、プレースホルダー（ placeholder ）と言うのですが このプレースホルダーが、iPhoneとかブラウザとかでちょっと位置がズレているように感じることってありませんか？ これの位置をちょっと調整したので、その方法のご紹介です。 スポンサーリンク かなり細かい調整なので、必要ないかもしれませんけどね（笑） ちなみにプレースホルダーについては、こちらの記事が非常に参考になります。 myakura.github.io プレースホルダーの位置調整プレースホルダーの位置調整については、調べてみますといろいろ出てきます。 参考リンク：placeholderを指定したときにAndroidでテキスト表示位置を中央
inputに背景が勝手につくCSSの解決法
iPhoneの時だけ、どうしても余計な背景が出てきてしまう状況がありました。 input要素のボタンをテキストに変更した時にハマったことと解決策をメモしておきます。 この事象についてキーワードを並べると、 CSSを確認しても背景に無いもかかってない。 importantも効かない。 iOS SimulatorでCSS全部確認しても、全く背景色の要素が存在しない。 Androidだと背景は出てこない大丈夫。 完全にはまりました。 このように、inputに背景がでてきてしまいます。 iPhoneの時だけです。Androidはの背景は#fffで白くなっている様子。 これはいわゆるCSSのリセットで解決できました。
【CSS】「width:100%」を指定してもはみ出すときの対処法 | Syumart
CSSでwidth:100%;を指定してもはみ出てしまうときは、あるプロパティを一緒に指定してやると解決します。あるプロパティとは、新しくCSS3で追加されたbox-sizingです。今回の鍵はborder-boxで、これをwidth: 100%;を指定した要素に一緒に指定してあげると、はみ出さずにきっちり収まります。 例 緑色の箱内に「ブロックA」を収める例を示します。 box-sizingを指定しなかった場合、あるいはbox-sizing: content-box;を指定した場合は、画像上側のように右端が少し飛び出してしまいます。 しかし、box-sizing: border-box;を指定した場合は、以下のようにきちんと収まります。 解説 なぜこのようなことをしないといけないかというと、まず、width: 100%;やheight: 100%;における指定はpaddingとbo
携帯・iPhone・スマートフォン対応ホームページ制作 Grand Licenseオフィシャルブログ :: iPhoneでサイトを表示したときのフォントに関するデフォルト値
長ったらしいタイトルですみません・・・・汗 iPhoneでサイトを表示したときに、 デフォルトの状態でのフォントサイズ、フォントタイプ・・・ 行間とか・・・・ どうなっているのでしょう？？？という話しです。 mobile Safariのデフォルトといったほうがよいでしょうか。 ■フォントサイズのデフォルト CSSで特に指定してない場合はデフォルトは16pxで表示されます。 只、iPhoneの向きを変えるとサイズが自動調整され多少変わる場合があります。 この自動調整をさせたくない場合はmobile safari独自CSSで対応します。 例えばbodyに 以上のようなcssを使うことによって自動調節の回避ができます。 ■フォントタイプのデフォルト 日本語の場合は「ヒラギノ角ゴシックProN W3」がデフォルトのフォントになります。 日本語で明朝体は使えません。 半角英数字のデフォルトは「Tim
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
