CSSデザイン

画像を使わずにCSSだけで実装するストライプデザイン集です サンプルではdivにクラス「bg」に適用しています html <div class="bg"></div> チェック柄・ストライプ柄のCSSジェネレーターを作成しました ...

CSSだけでヘッダー追従する動作サンプル See the Pen CSS Header following by yochans (@yochans) on CodePen. CSSだけでヘッダー追従するサンプルコード HTML <d ...

CSSだけでマウスホバー時にバルーンポップアップを表示するサンプルです マウスホバー時にバルーンポップアップ マウスホバーとCSSアニメーションを使ったシンプルなタイプです See the Pen CSS Balloon Popup by ...

See the Pen CSSだけでスライドする横棒グラフ by yochans (@yochans) on CodePen. CSSだけでスライドアニメーションする横棒グラフです animation@keyframesを利用して個別に設定 ...

CSSでセレクタ指定時に除外できるnot()疑似クラス AND条件やOR条件の指定方法です divを除外 div以外の全ての要素に適用するCSSです body:not(div){ color:#000; } divまたはpを除外 divとp ...

idやclassのセレクターが指定されていない要素にだけ適用するCSSを記述する方法のサンプルです サンプルではdivで書いていますが、当然aやpやulなどなんでも大丈夫です idが指定されていないdiv要素に適用するCSS div:not ...

記事中のリンク等の左にリンクアイコンを付ける方法です サンプルではフォントアイコンに「Font Awesome」を利用しています classが付与されていないaタグにアイコンを付ける方法 a:not()::before{ font-fami ...

CSSでできる動的なデザインに使えるattr()式 現状はbeforeやafterの疑似要素のプロパティ「content」にしか使えませんがattr()を使ってできる事を考えてみます attr()式の基本サンプル HTML <p co ...

CSSの「border-radius」と「animation」を使って、うねうね動くスライムリンクボタンをCSSだけで作ってみたい うねうね動くスライムリンクボタンv1 なるほど。 うーん、そもそもborder-radiusが苦手だったです ...

マウスホバー時にメニューをスライド表示させる方法 マウスホバーにてメニュー要素を開閉をさせる方法です 記述は簡単ですが、スマホやタブレット表示には不向きかも MENU HTML特殊文字変換 MHWブログまとめ BLOGS JavaScrip ...

色々な見出しデザインのCSSサンプル集です WordPressの子テーマなど上書きが必要な場合はHタグのborder等を初期化しておくと良いです h2.sample{ border:none; background:none; } が、環境 ...

テキストエリアに限らずですがスマホ表示用にフォームアイテムはスマホ端末表示用に横幅100％ぴったしで表示したい時がありますが、そのまま100％としてもだと微妙にハミ出てしまいます ハミ出していると表示がずれてしまい、特にスマートフォンでの操 ...

Google Code Prettifyやプラグインでシンタックスハイライトをせずとも<pre>と<code>のCSSだけで見やすいCSSに出来ればちょっとでもページを軽くできていいですよね font-family指 ...

checkboxのオンオフでアイコン色をCSSで切り替えているだけです 電源のアイコンマークにはgoogleのmaterial iconを利用しています See the Pen new pen by yochans (@yochans) o ...

CSSで指定した要素のサイズから背景画像をはみ出さない様にする background-sizeを指定する contain：縦横比保持、背景領域に収まる最大サイズになるように背景画像を拡大縮小 cover：縦横比保持、領域を完全に覆う最小サイ ...

filterプロパティ、画像もだけどCSS要素にも便利だったりで結構使うことありますよね 他のプロパティと合わせる事で一枚のアップデード画像・CSSだけで、かなり自由度のあるWEBデザインが可能となります drop-shadowで影をつける ...