HTML&CSS

YouTubeの埋め込みコードって、標準ではスマホやタブレットに合わせて動画サイズを変更してくれるレスポンシブ仕様になっていない。これじゃあ不便なのでCSSで制御したいところだけど、そうする為には、youtubeのコードを<div>で囲まな...

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

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

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

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

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

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

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

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

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