色々な図形を描画するCSSサンプルコード集

2021-02-10CSS,CSS デザイン サンプル集

CSSを使って色々な図形を描画するサンプルコード集になります。 CSSで図形の中にテキストなどを含める場合の注意点 CSSの図形要素内にテキストなどを含める場合は、基本的にそれらがpadding込みで要素のサイズを上回ると図形自体のサイズし ...

box-reflectでテキストや画像などを反射表示させる方法

CSS,CSS デザイン

CSSのFilterにあるbox-reflectを使って、テキストや画像などを反射表示させる方法の紹介です。 box-reflectの基本 box-reflectはCSSベンダープレフィックスで機能するCSSのひとつです。2020年6月現在 ...

吹き出しのCSSデザイン一覧

2021-02-10CSS,CSS デザイン サンプル集

CSSで作った吹き出しデザインの色々なパターンの一覧です。 CSSの吹き出しデザイン ノーマル シンプルなCSS吹き出しパターンです。下の方にカラーバリエーション用のCSSも置いてあります。 See the Pen CSS balloon ...

簡単なドット絵を作成

2020-10-01CSS,CSS デザイン

CSSだけで簡単なドット絵(Pixel Art)を作成する方法の紹介です。 3×3のCSSドット絵サンプル CSSで作る3×3のシンプルなドット絵サンプルです。 See the Pen Pixel Art 3x3 by yochans (@ ...

要素のサイズでテキストを丸めて末尾に3点リーダーを付与する方法

2021-02-08CSS,CSS テキストデザイン

CSSだけで要素のサイズに合わせてテキストを丸めて(省略して)末尾に3点リーダーを付与する方法の紹介です。 テキストを丸める処理は、head内のdescriptionに使う事も多くPHPの出力で行うケースもありますが、コンテンツ要素内であれ ...

スワイプで横スクロールするスライドメニューを実装する方法

CSS,CSS デザイン

CSSだけで実装するスワイプ(フリック)で横スクロールするスライドメニューの実装サンプルです。 スワイプで横スクロールするメニューの動作サンプル スワイプで横スクロールするメニューを実装した動作サンプルです。 See the Pen MEN ...

position stickyでスクロールしたら上部固定表示にする方法

CSS,CSS デザイン

CSSのpositionプロパティのstickyを使って、途中にある要素をスクロール後に上部固定表示にする方法の紹介です。 positionプロパティでstickyを指定した要素はtopプロパティで指定した位置までスクロールすると縦軸固定表 ...

display-flexで子要素を縦横中央揃えをする方法

2021-05-08CSS,CSS フレックスボックス

CSSのflexbox(display:flex)を使って子要素を縦横中央揃えにする方法の紹介です。 display:flexで子要素を縦横中央揃えをする方法 See the Pen CSS Vertical and horizontal ...

display flexでリストを横並び&折り返す方法

2020-10-03CSS,CSS フレックスボックス

display:flexを指定してリストタグの<li>をCSSで横並びにさせる方法と、折り返す方法、簡単なデザインデンプレート集の紹介です。 サンプルでは見やすくする為に、li要素は少しだけ装飾しています。最後に簡単なリストボタ ...

css

CSS,CSS アニメーション サンプル集

文字やボールなどの要素を弾ませるバウンドアニメーションのCSSサンプル集です。 このページの各アニメーションにanimationプロパティと@keyframes(キーフレーム)を使ったサンプルコードを紹介しています。 ボールをバウンドアニメ ...

雨が降るCSSアニメーションサンプル集

2021-05-03CSS,CSS アニメーション サンプル集

ピュアなCSSのみで雨を降らせてみたアニメーションサンプル集です。 雨が降るパターンの各アニメーションにanimationプロパティと@keyframes(キーフレーム)を使ったサンプルコードを紹介しています。 背景に雨が降るCSSアニメー ...

キラキラ光らせるアニメーション

2020-10-01CSS,CSS アニメーション サンプル集

CSSのみで文字や画像などをドットタイプの星などでキラキラ光らせるアニメーションサンプル集です。 CSS関連のページは作成していますが、幾分センスと根気が足りないのでイマイチ感は多めにみてやってください。 背景をキラキラ光らせるCSSアニメ ...

css

2020-01-15CSS,CSS アニメーション サンプル集

文字や要素をスライド(横移動)表示するCSSアニメーションのパターンサンプル集です。 このページでは各アニメーションにanimationプロパティと@keyframes(キーフレーム)を使ったサンプルコードを紹介しています。 transfo ...

css

2020-10-01CSS テキストデザイン サンプル集,CSS

h2やh3などの見出しタグのデザイン等使えるボーダーにグラデーションを使ったCSSサンプル集です。 共通HTML <h2 class="sample1">sample1</h2> <h2 class="sample2">s ...

文字毎・行ごとにテキストの色を変える

2020-09-30CSS,CSS テキストデザイン

ピュアなCSSの機能では要素に対してはn番目でのスタイル割り当てができるものの、n文字目やn行目の指定してスタイルを割り当てる事はできません。 通常CSSだけでn文字目、n行目毎にスタイルを当てる場合はspanタグなどを使って要素として反映 ...

背景色とテキスト色を相互に入れ替える装飾

2020-10-01CSS テキストデザイン サンプル集,CSS

CSSのグラデーションを使って背景色とテキスト色を相互に入れ替えツートンカラーにするCSSサンプル集です。 疑似要素のcontent:attr()を使った方法もありますが、ここではlinear-gradient()やbackground-c ...

css

2020-09-27CSS,CSS アニメーション 基本

animation-play-stateプロパティを使ってCSSアニメーションの一時停止と再生で指定可能な値と、実装する方法のまとめ、動作サンプル集になります。 動作中の再生や停止は、JavaScriptを使った実装が基本になりますが、マウ ...

css

2020-09-27CSS,CSS アニメーション 基本

こちらはCSSアニメーションの再生方向指定プロパティ(animation-direction)で指定可能な値と、比較用の動作サンプル集になります。 animation-directionの設定方法 CSSアニメーションの再生方向はanima ...

css

2020-09-27CSS,CSS アニメーション 基本

こちらはCSSアニメーションのイージングプロパティ(animation-timing-function)で指定可能な値と、比較用の動作サンプル集になります。 animation-timing-functionの設定方法 CSSアニメーション ...

css

2020-09-27CSS,CSS アニメーション 基本

animationプロパティを使ったCSSアニメーションは人気で様々な場所で利用されていますが、アニメーションの繰り返し設定や、繰り返し繰り返しではなく一回、アニメーションの終点で停止する設定の各動作パターンの紹介です。 animation ...

2020-10-01CSS テキストデザイン サンプル集,CSS

CSSを使ってHTMLに表示するテキストをメタルっぽく装飾するサンプル集になります。 また、チェック柄以外にもテキストをシャドウ、立体、ストローク、ネオン、ストライプからグラデーション、メタル風、鏡面反射などにするCSSサンプルも紹介してい ...

2020-10-01CSS テキストデザイン サンプル集,CSS

CSSのみでテキストをチェッカー柄やギンガムチェック・タータン・チェックなどのチェック柄に装飾するサンプル集です。 各柄のカラーバリエーションも紹介しています。 また、チェック柄以外にもテキストをシャドウ、立体、ストローク、ネオン、ストライ ...

2020-10-01CSS テキストデザイン サンプル集,CSS

CSSを使ってテキスト文字に影、立体、光沢などを付けて装飾するサンプル集です。 シャドウ系、立体系、ストローク、ネオン、ストライプからグラデーション、メタル風、鏡面反射などカテゴリにわけて紹介していきます。 賛否はあるかもしれませんが、フォ ...

2020-01-14CSS,CSS アニメーション サンプル集

CSSだけで流れる文字を作成するCSSアニメーションサンプルパターン集になります。 共通HTML <div><p class="text">流れる文字のCSSアニメーション</p></div> 右から左へ流れる文字の ...

2021-02-03CSS,CSS デザイン

CSSを使って作る旭日旗のサンプルコード集です。 旭日に16本の旭光が射す旭日旗のCSSデザインで、影付きや青色バージョンも作成しました。 旭日の位置や大きさ、旭光の幅などをCSSで簡単に編集できるようにしました。 旭日旗、ノーマル See ...