CSS category archives 2016年3月19日 CSS モーダルウィンドウ（ポップアップウィンドウ）をjQueryとCSSで簡単に作る手順 プラグインなどを使わずに簡単にモーダルウィンドウを設定する方法を探していたところ、バッチリのjsソースを見つけました。 ウィンドウの高さの取得や、オーバーレイのフェードイン・フェードアウトなどを、すべてCSSで作るよりも、jQueryで指定したほうがオールドブラウザでも …（続きを読む） 2016年3月18日 CSS ドロワーメニュー（ハンバーガーメニュー）を簡単な jQueryとCSSだけで作る手順 ヘッダー部分のグローバルナビゲーションを、スマホビューの縦持ちの時だけドロワーメニュー（ハンバーガーメニュー）にしたくて、プラグインや既存ライブラリなどを使わない、ごくシンプルな作り方を調べました。 jQuery の「.toggleClass」を使えば、あとは CSS …（続きを読む） 2016年3月9日 CSS background-attachment: fixed がスマホで効かない問題は ::before で解決！ Webページの背景画像を、background-size: cover で background-attachment: fixed にしたいとき、PCブラウザでは意図どおりに表示するのに、iOS Safari ではウマくいかない事態になりました。 調べてみると、iOS …（続きを読む） 2015年8月1日 CSS display:table-cell の親に display:table を指定しないと意味無い CSSのfloatを解除するclearfix で「display:table」を使いました。 clearfixでは、table内のセル(trやtd)が0ならぺったんこで何も表示しない特徴を利用しましたが、 実際のレイアウトで「display:table」を使う場合は、必 …（続きを読む） 2015年8月1日 CSS CSSのセレクタ「擬似要素 ::after」で「ふきだし」を作ってみた CSSのfloatを解除するclearfix で「擬似要素 ::after」を使います。 その擬似要素 ::after についてまとめ、::after の特徴を使って「ふきだし」も作ってみました。 擬似要素 ::before と ::after 擬似要素の中の ::be …（続きを読む） 2015年4月24日 CSS リンクのアウトラインを消したい！ リンク(a要素)のためのCSSリセット（その他リンク周りのCSSを整える） 前回メモったCSSリセットの中でも念入りにやっておきたいのがリンクのためのCSSリセットだ。 特にリンクのアウトラインの除去。 テキストや画像に貼ったリンクをクリックすると、ブラウザのデフォルトで点線のアウトラインが残るが、これが邪魔なときもある。これを消すためのCSS …（続きを読む） « < 1 2 > » スポンサーリンク
2016年3月19日 CSS モーダルウィンドウ（ポップアップウィンドウ）をjQueryとCSSで簡単に作る手順 プラグインなどを使わずに簡単にモーダルウィンドウを設定する方法を探していたところ、バッチリのjsソースを見つけました。 ウィンドウの高さの取得や、オーバーレイのフェードイン・フェードアウトなどを、すべてCSSで作るよりも、jQueryで指定したほうがオールドブラウザでも …（続きを読む）
2016年3月18日 CSS ドロワーメニュー（ハンバーガーメニュー）を簡単な jQueryとCSSだけで作る手順 ヘッダー部分のグローバルナビゲーションを、スマホビューの縦持ちの時だけドロワーメニュー（ハンバーガーメニュー）にしたくて、プラグインや既存ライブラリなどを使わない、ごくシンプルな作り方を調べました。 jQuery の「.toggleClass」を使えば、あとは CSS …（続きを読む）
2016年3月9日 CSS background-attachment: fixed がスマホで効かない問題は ::before で解決！ Webページの背景画像を、background-size: cover で background-attachment: fixed にしたいとき、PCブラウザでは意図どおりに表示するのに、iOS Safari ではウマくいかない事態になりました。 調べてみると、iOS …（続きを読む）
2015年8月1日 CSS display:table-cell の親に display:table を指定しないと意味無い CSSのfloatを解除するclearfix で「display:table」を使いました。 clearfixでは、table内のセル(trやtd)が0ならぺったんこで何も表示しない特徴を利用しましたが、 実際のレイアウトで「display:table」を使う場合は、必 …（続きを読む）
2015年8月1日 CSS CSSのセレクタ「擬似要素 ::after」で「ふきだし」を作ってみた CSSのfloatを解除するclearfix で「擬似要素 ::after」を使います。 その擬似要素 ::after についてまとめ、::after の特徴を使って「ふきだし」も作ってみました。 擬似要素 ::before と ::after 擬似要素の中の ::be …（続きを読む）
2015年4月24日 CSS リンクのアウトラインを消したい！ リンク(a要素)のためのCSSリセット（その他リンク周りのCSSを整える） 前回メモったCSSリセットの中でも念入りにやっておきたいのがリンクのためのCSSリセットだ。 特にリンクのアウトラインの除去。 テキストや画像に貼ったリンクをクリックすると、ブラウザのデフォルトで点線のアウトラインが残るが、これが邪魔なときもある。これを消すためのCSS …（続きを読む）
category archives
2016年3月19日
category archives