HTML&CSS

レスポンシブウェブデザイン化するにあたって、inputによる入力フォームの長さがおかしくなったので改善した。 もともと以下のようなソースだったのだけど、 <input type="text" name="q" value="" size="...

サイトをレスポンシブデザイン化する時などに、 ページが再読込みされた時と、ブラウザのサイズが変わった時のページ表示サイズで、任意の処理を設定できればかなり便利。 で、以下がその方法。 $(window).on('load resize', ...

サムネイル画像を複数並べてそのどれかにマウスを乗せると、どれに乗せても同じ場所にその画像が拡大表示される方法を探してみたところ、いろんな情報が出てきた。 ただ、できる限りシンプルにしたかったのだけど、JQUERYやJavascriptを使っ...

CSSで以下のように設定し、あるブロック要素を見えないようにした。 #hoge {display: block;} しかし、 正常にブロック要素が消えたはいいが、IE11や一部Androidブラウザで高さが残ってしまい、それ以降のレイアウト...

Googleさんが4月21日までにモバイルフレンドリーなサイトにしないと、スマホ検索結果の順位を落とす（もしくはフレンドリーサイトを上げる）事を正式に発表した。 ということで、 レスポンシブウェブデザイン化を行なう際に必要なメディアクエリー...

横幅をピクセル指定した（ソリッドレイアウト）サイトにおいて、viewportを使ってスマホ対応させる方法を今まで勘違いしていた。 例えば以下のようなソリッドレイアウトサイトに対して 以下のようにCSS表記していた。 まあこれでも正常にブラウ...

SNSボタンをグループ化してサイトに設置する方法としては、忍者おまとめボタンが手っ取り早い。 だけど、読み込み速度やデザイン等の理由で、どうしても外部サイトを介さないで設置したい場合もある。 ということで、極力横幅の短いソーシャルボタン（以...

文章や画像を左右２つに分けてレイアウトする場合、 テーブルタグを使ってデザインすると楽だけど、なんとなく気持ち悪い。 あと個人的に、左に商品名を入れて右にその説明を入れる事が多いので、定義リスト（dl,dd,dtのリストタグ）でそれを表現す...

例えばこのページのURL を としたい場合 .htaccessに以下を記述して表示するファイルがあるディレクトリに放り込めばOK。 <IfModule mod_rewrite.c> RewriteEngine On Redirect 301...

サイトの更新情報（更新履歴、トピックス、インフォメーション等など呼び方は様々）を表記する際、「更新日」と「更新内容の文」を、html5のコーディング上、どう表記すればいいのか迷ったので調べてみた。 で、html5的には記述方法は色々あるみた...