HTML/CSS 22件

[YouTube]埋め込み動画をレスポンシブさせる確実なやり方

どのブログを見ても、詰めが甘く参考にならないので書いておく。 デモを見る コードの要点 埋め込みiframeをボックス要素で二重にネスト ブ…

コピペコード

個人の保存用です。 HTML CSS / Sass JavaScript / jQuery gulp   HTML [crayon…

【バグ】モダンブラウザで発生する謎バグと解決策(2016年5月)

目次 CSSが一切効かなくなる Flexbox / column を指定すると float みたいに浮く Flexbox / space-b…

【HTML/CSS】実務で使ったレイアウトまとめ(2016年8月更新)

デモを見る 目次 画像と背景ありテキストの横並び、テキストは天地中央 ブロック化リンクのテキストを天地中央に配置 画像を含むボックスの角を斜…

【HTML/CSS】JavaScript 無しで画像をロールオーバーアニメーションさせるときのコツ

デモを見る ファイル一式をダウンロードする off / on 画像を絶対配置で重ねる :hover は画像をネストする親要素に指定 :hov…

【Flexbox】2つの弱点とその対応策。Flexboxは万能ではない。

Flexboxが使われ始めた2011年頃には、いかに万能であるかよく喧伝されていました。 しかし以下2つの条件下において、Flexboxの利…

【Flexbox】ヘッダーでよくあるレイアウトは height / font-size / padding を使い分けると上手くできる [IE10対応]

デモを見る ファイル一式をダウンロードする Flexboxは大変便利ですが、万能ではありません。しかしCSSを細かく調整することで、その力を…

【HTML/CSS】テキストリンクのホバー線は、border を指定すると便利なことに気がついた

2016/05/24 アニメーションするアンダーラインを追加しました。   ボーダー See the Pen ホバー線 / sol…

【HTML/CSS】要素並列が難しい場合は table を使って時間短縮 [IE10対応]

デモを見る ファイル一式をダウンロードする table タグは便利です。 Flexbox / float / inline-block / …

【Flexbox】基本操作と実務で使えるレイアウトスタイルまとめ [IE10対応]

デモを見る ファイル一式をダウンロードする 本記事に改行(flex-wrap)の記述はありません。 先日、IE10以下切り捨て案件のコーディ…

【HTML/CSS】テキストの左右に線を引く [IE8対応]

デモを見る ファイル一式をダウンロードする 先日仕事で設置する必要があり、コリスさんの記事を参考にしましたが、IE11でバグが発生してすぐに…

【jQuery】フルFlashのようなサイト制作は、8要点を押さえれば乗り切れる

デモを見る ファイル一式をダウンロードする エンタメ系サイトのコーディングなどでは、CSS3とjQueryを駆使したフルFlashっぽい仕上…

【jQuery】Animate.css との合わせ技で、フルFlashサイトみたいな動きを作る [IE10以上]

デモを見る ファイル一式をダウンロードする 本記事のデモは Sublime Text で使っています。 アニメや映画などを紹介するエンタメ系…

【バグ】opacity や translate 4つのバグと解決策

2017/01/29 Mac OS / Safari 限定で translate バグのスクロールフリーズが再発しました。面倒くさいので直し…

【HTML/CSS】JavaScriptを使わないシンプルなパララックスの作り方 [IE7対応]

デモを見る ファイル一式をダウンロードする 動きのないシンプルなパララックスは、JavaScript無しで簡単に作ることができます。フルブラ…

【HTML/CSS】レスポンシブコーディングの数値指定は、相対/絶対を使い分けると楽

相対指定を厳守せねばならぬコーディングルールがない限りは、数値を指定するCSSプロパティで、絶対指定を取り入れると一気に楽になります。 スマ…

【HTML/CSS】ボーダーをレタープレス(型押し)風にして凸凹を表現する

検証済みブラウザとOS IE 8~ Firefox Google Chrome Safari Windows 7 OS X Yosemite…

【HTML/CSS】地味に使える6つの小技

どれも最近使ったものですが、頻繁に使う機会はありません。ただ、頭の片隅に置いておくと便利です。 目次 テキストの画像置換 アイコンフォントと…

【バグ】あまり遭遇しない、5つのマニアックなバグを修正する

どのバグもすぐには問題を突き止められず、解決までに数時間~半日を要してしまいました。各ブラウザのレンダリング差異による原因がほとんどですね。…

【HTML/CSS】人気ランキングの順位をWebフォントと背景色で装飾する

ブログの人気記事ランキングなどの順位表示は、「CSSカウンタ」を使えば簡単にできます。Webフォントを読み込み、背景に色をつけて、見映えよく…