ソースコードをCSSのみでおしゃれに表示する・言語ラベルや枠パターン
シンタックスハイライト機能のあるテーマやプラグインを利用すれば言語ごとにタグやクラスの色付けが可能なエディタがありますが、 今回はとにかく軽くしたい方向けの CSSのみで使えるデザインサンプルです。 ...
コピペで!HRタグのラインCSSデザイン14パターン
HRタグ用のサンプルCSSです。 HTML HTMLは、CSSでHRタグ自体に設定する場合は、以下のようにHRタグのみ <hr /> クラスを指定して使い分ける ...
見出し(H2~H5)デザインCSSをまるごとコピペ!4パターン+α
とにかく簡単にコピペで初期の見出しタグを実装する為のラフCSSです。 H2~H5を一度にコピーできるサンプル4バターン、サクっとコピペでも可能です、その他にも見出しサンプルちょっと載せてありますので、 ...
コピペで実装!CSSのみで開閉アコーディオン・テキストやメニュー
クリックで表示内容を開閉するアコーディオンメニューなどをCSSのみで実装する方法です。 アコーディオン 表示サンプル 展開する各ラベルの右側に「+」マークを表示し、クリックアクションでクルクルっと「+ ...
コピペでOK!サイドバーにおしゃれなプロフィール欄を設置:8パターン
プロフィール欄を表示するウィジェットや機能がないテーマにも、CSSとHTMLのみで簡単に設置できるデザインをいくつか。 手順 プロフィール画像を使う場合は画像を用意 プロフィールエリア用 ...
コピペで実装!CSSのみでタブで表示内容を切替える
タブで表示内容を切り替えるデザインをCSSのみで実装する方法です。 たくさん紹介されているサイトがあるのですが、イマイチ、きちんと表示されなかった為、自分用にカスタムしたものになります。 この方法であ ...
コピペで!もしもアフィリエイトのかんたんリンクをカスタマイズ5パターン
もしもアフィリエイトの便利な機能「かんたんリンク」のボタンや枠線などのデザインをカスタマイズする方法です。 コピペのみで簡単に使っていただけるコードを置いています。 デフォルト表示 文字 ...
コピペで簡単!画像枠やテキスト枠デザインCSS・ボックスデザイン
コピペで簡単!シンプルだけど使えるボックスデザインです。画像枠やテキスト枠に利用出来ます。 テキスト枠は以下にもまとめています。 コピペで簡単!BOXデザインCSS・シンプル~アイコンフ ...
コピペで簡単!リストのシンプルデザインCSS
リストスタイルを装飾するシンプルなデザインCSSです。 リスト標準スタイル(UL)は以下の通り リスト リスト この標準のリストスタイル先頭の「・」は非表示にして、疑似要素「Before」を使ってアイ ...
簡単コピペ!すぐに使える文字装飾のCSSデザインサンプル
文字装飾用CSSサンプルです。 ちなみに、CSSを追記せずに、テキストエディタで直接スタイルを記述する事でも装飾は可能です。 例) 下線を引く <span style="border-botto ...
コピペで簡単!BOXデザインCSS・シンプル~アイコンフォント利用まで
コピペで簡単!シンプルだけど使えるボックスデザインです。 画像枠としても使えるボックスデザインは以下にまとめています。 コピペで簡単!画像やテキスト枠デザインCSS・ボックスデザイン デ ...
CSSが反映されない対処法・PC&iPhone&iPadのChromeキャッシュ
CSS編集したのにサイトに反映されない場合、キャッシュが残っている事が原因の場合があります。 そういう場合には、以下の方法で簡単にクリアできます。 Google Chromeを利用してい ...