HTML/CSS 21件

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

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

コピペ用コード

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

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

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

実務で使ったCSSレイアウト(2016年8月更新)

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

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

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

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

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

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

デモを見る 2017/07/29 見返すと微妙なことをしているが、こんなこと考えていたという振り返りのため残しておく。 FlexboxはCS…

テキストリンクのホバー線は、border を指定するとそこそこ使える。

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

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

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

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

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

テキストの左右に線を引く [IE8対応]

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

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

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

jQuery・Animate.css の合わせ技でフルFlashサイトライクな動きを実現

デモを見る ファイル一式をダウンロードする Sublime Text専用・Animate.cssパッケージを利用します。 アニメや映画などを…

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

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

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

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

ボーダーをレタープレス風にして凸凹を表現

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

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

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

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

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

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

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

_reset.scss 作り直す

1つ前の記事で、HTMLタグのデフォルトスタイルを調べていたところ、_reset.scssで不要なコードを多数記述していることに気づきました…