【CSS】使える背景パターン、実装サンプル25選（コピペで簡単です） | 125naroom / デザインするところ（会社）です。
.bg_pattern { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #fff; z-index: -1; } .Paper_v2 { background-image: repeating-linear-gradient(to bottom, transparent 25px, rgba(0, 0, 0, 0.04) 26px, rgba(0, 0, 0, 0.04) 26px, transparent 27px, transparent 51px, rgba(0, 0, 0, 0.04) 52px, rgba(0, 0, 0, 0.04) 52px, transparent 53px, transparent 77px, rgba(0, 0, 0, 0.04) 78p
CSSで表現する背景パターン51種＋【コピペで簡単！/アニメーション有】
サイトを制作する際にちょっとしたワンポイントとして、ボックスやボタンの背景にパターンを使いたい場面があるかと思います。 そんな時、わざわざフォトショやイラレで画像を作るのは結構面倒ですよね。 そこで今回はCSSをコピペするだけで使える51種類以上の背景パターンをご紹介します。 種類豊富で色々なシーンで使いどころがあるかと思いますので、気に入った背景があればぜひお気に入りに登録しておきましょう！ ギンガムチェック風CSS背景パターンSee the Pen texture by Miriam (@karaWhiteDragon) on CodePen. 28種類のグラデーションストライプCSS背景パターンSee the Pen Cards with simple stripe backgrounds by Ana Tudor (@thebabydino) on CodePen. ハーフトーンC
CSS | borderで波状の線、曲線を作成する方法 | 1 NOTES
borderで波状（波線）の線CSSのborderで作った波状の線です。 おそらく、このページにアクセスした殆どの方が「これじゃない」と思っていらっしゃる事でしょう。 私もそうです、もっと、こう、緩やかな波にしたい。 See the Pen CSS | Wavy line ｄesign 01 by yochans (@yochans) on CodePen. <div class="wavy-line"> <div></div><div></div><div></div><div></div> </div>.wavy-line { --wave-w: 50px; /* 波の大きさ */ --wave-h: 25px; /* --wave-wの半分くらい */ display: flex; /* 波を横に並べる */ height: 100px; /* 必須ではない */ margin-le
CSS Scan - The fastest and easiest way to check and copy CSS
button .btn .demo-btn .first-demo-btn 272x50 Arial 16px background-color: #C2FBD7; border-radius: 50px; border-width: 0; box-shadow: rgba(25, 25, 25, 0.04) 0 0 1px 0, rgba(0, 0, 0, 0.1) 0 3px 4px 0; color: #008000; cursor: pointer; display: inline-block; font-family: Arial, sans-serif; font-size: 1em; height: 50px; padding: 0 25px; transition: all 200ms;
Underscores
Theme Name Theme Slug Author Author URI Description WooCommerce boilerplate _sassify! What is Underscores? Hi. I'm a starter theme called _s, or underscores, if you like. I'm a theme meant for hacking so don't use me as a Parent Theme. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for. My ultra-minimal CSS might make me look like theme tartare
CSSでテキストを彩る装飾サンプル集
CSSを使ってテキスト文字に影、立体、光沢などを付けて装飾するサンプル集です。 シャドウ系、立体系、ストローク、ネオン、ストライプからグラデーション、メタル風、鏡面反射などカテゴリにわけて紹介していきます。 賛否はあるかもしれませんが、フォントサイズの調整時に崩れないようにする為に各サイズは一部でemを利用して指定しています。 シャドウ 共通HTML <p class="sample">ONE NOTES</p> シャープな影 text-shadowを使ったシンプルなテキストシャドウCSSコードです。広がりを抑えシャープな影にしています。 See the Pen CSS Text Design : Shadow by yochans (@yochans) on CodePen. .sample { font-size:5em; text-align:center; line-height:
CSSアニメーションで動く背景に！CSSアニメーションバックグラウンド12選
動的なWEBデザインは今では当たり前。 ただ実装しようと思うとサイトが重くなってしまったり、ゴチャゴチャしたりしてしまいますよね。 そこで今回は軽量かつ、シンプルでオシャレな実用的な動く背景CSSをご紹介します。 ぜひ自身の制作するサイトに組み込んでみてはいかがでしょうか。 ホタルが飛ぶアニメーション背景CSSSee the Pen CSS Fireflies by Mike Golus (@mikegolus) on CodePen. グラデーションの色が変化するアニメーション背景CSSSee the Pen Pure CSS3 Gradient Background Animation by Manuel Pinto (@P1N2O) on CodePen. 動く方眼アニメーション背景CSSSee the Pen Pure css infinite background animati
画像と吹き出しテキストで会話風にするHTMLとCSS。 | Fantastech（ファンタステック）
カスタマイズのゴール 今回のカスタマイズのゴールはこちらです。 LINEのような色にすることもできます。 もちろん、レスポンシブに対応するようにしました。では、コードをご紹介します。 HTMLコード まずはHTMLのコード。下記のコードの日本語の部分を変更するだけで「左からの吹き出し」が作れます。 <div class="balloon"> <figure class="balloon-image-left"> <img src="画像のパス（URL）" alt="画像名"> <figcaption class="balloon-image-description"> 人の名前や画像の説明 </figcaption> </figure> <div class="balloon-text-right"> <p> 吹き出しの中のテキスト </p> </div> </div> 「右からの吹き出し
独自レイアウトの基本
Jimdoは、オリジナルのテンプレートを作成・使用することができます。 HTMLやCSS、またJavaScriptであなただけのオリジナルのテンプレートを作成して、オリジナリティのあるホームページにしましょう。
jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
コピペで使えるシンプルでおしゃれな囲み枠CSSサンプル | office FITPlus-お金とITのお悩みなら横浜のFP事務所へ
アメブロカスタマイズ コラム コピペで使えるシンプルでおしゃれな囲み枠CSSサンプル アメブロでのお知らせ、WordPressサイトでのまとめ、メルマガデザインなど、いろいろな場面で使える囲み枠のサンプルを作ってみました。コピペして活用してみてください。 シンプルな背景色での囲み枠 背景色だけで表現したシンプルだけど使いやすい囲み枠です。文字が見やすいよう淡い色を用意しました。 アメブロの記事下の文章やセミナーのお知らせ枠にどうぞ 枠の中には自由に文章を書きます。 アメブロでの記事内やメルマガで使用する場合＜インラインCSS＞ <div style="padding:20px;width:80%;background:#FEDFE1;border-radius:8px;color:#724938"> アメブロの記事下の文章やセミナーのお知らせ枠にどうぞ<br/> 枠の中には自由に文章を書き
flexboxを使いこなす！CSSで高さが違う横並びボックスの高さをぴったり揃える簡単な方法｜ネットのすき間でヤッテキュー！
りょうま(@ytq_ryoma)です。 ランディングページなどをコーディングをしていて、よくつまづいてしまうポイント。 「横並びしたボックスの高さがあわない・・・」 この悩みは必ずといっていいほど多くの方が直面します。 でも安心してください！flexboxプロパティを使えば、親要素はもちろん、子要素の高さもぴったり揃えることができます！ flexboxとはフレキシブルなレイアウトを可能にするプロパティレスポンシブデザインがない一昔前は、floatプロパティを使って横並びを実現していました。 そんでもって高さの違うボックスは、「heightLine.js 」を使って・・・シュコシュコ といった具合に、JSを組み合わせて横並びボックスの高さを揃えていました。 しかしフレキシブルで簡単に横並びのレイアウトができてしまうところがflexboxのいいところ。 悩ましかった横並びレイアウト、しかも高さ
Flexアイテム全体の主軸に沿った位置または余白を制御 | CSS3逆引き | Webサイト制作支援 | ShanaBrian Website
CSS div.flex-container { display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:-moz-flex; display:flex; -webkit-box-pack:center; -moz-box-pack:center; -webkit-flex-pack:center; -moz-flex-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; -moz-justify-content:center; justify-content:center; }
Web制作がめっちゃ捗る！CSS変数の基礎と実践テクニック
進化し続けるCSSの仕様の中でも使い勝手がいいのが、CSS変数。キーカラーやサイズなど、あとから修正するのが面倒な要素はCSS変数を使って工数を減らし、ストレスを軽減しましょう。 SassやLessなどのプリプロセッサーは、CSSのコードベースを、メンテナンスしやすい整った状態にするのに役立ちます。変数、mixin（ミックスイン）、loop（ループ）などCSSコーディングに動的な機能を追加すると、繰り返し処理を最小限にし、開発時間を短縮できます。 CSSの一部として動的な機能がいくつか登場しています。CSS変数（CSS variables：カスタムプロパティ）はブラウザーの対応状況もとてもよく、すでに利用可能です。「CSS版mixin」は準備段階です。 この記事では、CSS開発ワークフローにCSS変数を組み入れる方法を紹介します。スタイルシートのメンテナンス性が向上し、DRYの原則（繰り返
CSSで画像を左右反転させる方法
scaleでは、負の値が設定できます。 x軸でマイナス1を設定すると、あら不思議。 左右反転させることが出来ます。 ぼくは業務でもかなりの頻度で使っています。 rotate(180deg)でもできるけど… 左右対称の画像の場合、rotate(180deg) で180度回転させることでも反転させられます。 .flip-horizontal { transform: rotate(180deg); } ただし、こちらはあまりおすすめできません。 画像の中心がずれている場合、きれいに左右反転させることができないのです。 これは transform-origin: 50% 50% を指定しても解決できません。 ですので、画像の反転は transform: rotate(-1, 1) がおすすめです。 上下反転するには もし上下反転させたければ、scale(1, -1) とy軸に設定すればいいのです
rel=preload - HTML: ハイパーテキストマークアップ言語 | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2021. * Some parts of this feature may have varying levels of support. Learn moreSee full compatibilityReport feedback preload は <link> 要素の rel 属性の値で、その HTML の <head> の中で読み取りリクエストを宣言し、ページのライフサイクルの早期の、ブラウザーの主なレンダリング機構が起動する前に読み取りを始めたい、すぐに必要なリソースを指定することができます。これにより、そのリ
要素の順番を入れ替えられるflexboxのorderを活用しよう
Flexboxはスマートフォン用のCSSに適用させる レスポンシブサイトを作る時に便利なFlexbox・・・非常に使い勝手がいいものの、IEなどの一部のブラウザでは対応していないものもいくつかあるので、なかなか使う事ができません。 早く対応するブラウザばかりになってもらいたいものですが、古いOSを使い続ける方がいたり、どうしても前のバージョンのブラウザを使わなければいけない理由があったりと、古いものや対応しきれていないものを切り替えるタイミングが難しいものです。 そうした状況の中で、Flexboxはなかなか使う事ができないなぁと思っていました。以前までは。 CSS3に完全対応していない環境になっているものはさすがに移行できませんが、スマートフォンであれば多くの端末でCSS3に対応したブラウザがインストールされています。 スマートフォン向けのWebサイトなら「Flexboxが使える」という事
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Potlab Icons — Animated SVG icons for web projects
デシノン｜コピペではじまるWEBづくり
【CSS】box-shadowで影をつける方法とサンプル集
