[CSS]擬似クラス:nth-childの便利な使い方をまとめたスタイルシート -Family.scssリストやセルなどの何個目を選択する時によく利用する擬似クラス:nth-childの便利な使い方26種類をSCSSでまとめられた「Family.scss」を紹介します。 :nth-childでアイテムが5個以上なら選択、5個以下なら選択とかもできるんですね。こんな使い方もできるんだ！ というものまであり、かなり便利です。
![[CSS]擬似クラス:nth-childの便利な使い方をまとめたスタイルシート -Family.scss](https://cdn-ak-scissors.b.st-hatena.com/image/square/b207777a32dc752d935a2b7da91e3e1499edd6c7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016110906.png)
functions.phpでJSやCSSを一元管理する - WordPressテックラボ - [SMART]
CSSやJavaScriptの読み込みはSTYLEタグやSCRIPTタグをheader.phpなどに直接書くこともできますが、WordPressではfunctions.phpでwp_enqueue_style()、wp_enqueue_script()をアクションフックを使って読み込むことが推奨されています。wp_enqueue_style()やwp_enqueue_script()を利用する利点として、CSSやJavaScriptの重複読み込みを回避できたり、functions.php内で一元管理できることなどが挙げられます。 ファイルをキューに登録する関数 wp_enqueue_style() – CSSファイルをキューに登録wp_enqueue_scripts() – JavaScriptファイルをキューに登録 wp_enqueue_script関数 wp_enqueue_scrip
![functions.phpでJSやCSSを一元管理する - WordPressテックラボ - [SMART]](https://cdn-ak-scissors.b.st-hatena.com/image/square/efeb6493234f33406d242c048873a805fca99c63/height=288;version=1;width=512/https%3A%2F%2Frfs.jp%2Fwp-content%2Fthemes%2Fsmart%2Fogpimage.png)
テキストリンクのホバー時に使えるエフェクト・デザインサンプル 15 - NxWorld
文章内のテキストリンクやテキストのみで実装しているようなナビゲーションリンクなどで使えそうなホバーエフェクト・デザインのサンプルです。 文字数が変化したり改行が頻繁に入るような場所などでは正直使い辛くて利用できる場面が限られてしまうものも多いのですが、シンプルなHTMLとCSSで様々な見せ方ができます。 サンプルの中で特にdisplay: inline-block;を記述しているタイプのものが意図しない箇所で改行されたり、逆にされなかったりということがあるので注意して下さい。 実際にどのような動きになってしまうのかはブラウザを縮めて確認してもらったり、または自身で環境を用意して実装・確認をしてもらうとよりわかりやすいと思います。 ここで紹介するエフェクトは、基本的に<a href="#">リンク</a>のようなHTMLに対して実装したものになります。 また、サンプルコードに含まれていません
CSSで実装できる、魅力的なボタンデザイン用サンプル、テクニック30個まとめ
CSSで表現できる、ユニークなボタンデザインをまとめています。一部、jQueryなどプラグインが必要となりますが、CSSのコピー&ペーストで利用できるサンプルやテクニックを、WEB制作のためのコードコミュニティサイト、Codepenよりピックアップしてご紹介します。 コードを見ながらサンプルを確認することができるので、先日まとめたテキストエフェクトを含む、アニメーションを得意とした最先端のデザインテクニックを、今後のウェブデザイン制作に活かしてみてはいかがでしょう。 詳細は以下から。 CSS3の新しい可能性！美しいテキストエフェクト用コードスニペット24個まとめ ※ デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 Collection of Button Hover Effects CSS3で表現された、実践的に使えるボタンデザイン5つを収録していま
Atomic Designの考え方と利点・欠点 – wkr.
Atomic Design はデザインシステムを作る方法論となります。 デザインシステムというのはスタイルガイドやブランドのガイドラインなどを指すようです。 日本だとAbemaTV（アベマ TV）で使われています。 （Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物 | ygoto3.comより） Atomic Design は今までのページ単位と違いコンポーネント単位でデザインカンプを作る考え方です。 作ったコンポーネント同士の組み合わせでページを作ります。 Atomic Design はコンポーネントの単位を 5 つに分けています。 その 5 つの単位は Atoms（原子）・Molecules（分子）・Organisms（有機体）・Templates（テンプレート）・Pages（ページ）です。 各コンポーネントの詳細は次のとおりです。
CSSでテキストをなぞるようにアニメーションしながら色を変える | UNORTHODOX WORKBOOK | Blog
なぞるようにといっても、書き順通りに文字を書いていくようなものではなくて、左から右へ徐々にスライドさせて色を変えるエフェクト。 なんと言ったらいいのかよく分からないのですが、所謂、プログレスバーのように進行しながら、徐々に色を変えていくアニメーションのやり方です。 Javascriptは利用せず、CSSだけで実装してます。JSと組み合わせればもっと色々なことできそうですが、ここでは単純にマウスホバーでアニメーションさせたものを紹介します。 デモ 以下の四角い枠内をマウスホバーしてみてください。 THE PROGRESSIVE ERA テキストの色が左から右へ徐々にスライドしながら変化しているのが分かると思います。古いブラウザには対応していませんが、最新のブラウザであれば問題なく表示できていました。 HTMLとCSS やり方は至って簡単。 HTML <p class="text-progre
【CSS】Webでマルチカラムレイアウトが可能に
雑誌の組版でよくある、マルチカラムレイアウト。Illustratorなどではテキストボックスを2つ作ってスレッドテキストリンクという機能で繋げれば、長い文章は自動で次のカラムへ文章が送られます。 Illustratorのスレッドテキストリンク機能。文章が隣のカラムに送られているのが分かります。 今までWebでは、文章は手動でカラム分けしなければいけなかったのですが、なんと気が付いたらCSSでマルチカラムレイアウトの設定が可能になっていました。 対応ブラウザ おなじみの Can I use から引用。(2016年05月25日現在) IEは10から。Edgeも対応、Chrome Safari Firefoxではベンダープレフィックスが必要です。スマフォのブラウザでも問題無さそう。 ＜2020年01月追記＞ 現在は全ての主要ブラウザで対応可能になりました。 使い方 タグに、カラム数を示すCSSプ
driveway: pure CSS masonry layout aid
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu justo ex. Praesent mollis augue sagittis eros pharetra feugiat. Phasellus dignissim est lacus. Sed nec imperdiet dolor, sit amet mattis ex. Sed sed augue eu neque tristique commodo. Mauris aliquet tortor sollicitudin nibh molestie, id egestas nisl sollicitudin. Aliquam erat volutpat. Donec quis ultrices ligula. Cras sed purus risus.
position: fixed;でページ内リンクの頭出しがずれる件の解決策を考えてみる | Blog | riatw.me
最近の流行りかは分かりませんが、ヘッダー、もしくはナビゲーションだけが スクロールの途中から固定するサイトをつくる機会が増えてきました。 そのデザインを見た時の毎回の悩みは、「ページ内リンクの頭出しがずれるのをどうしよう...」ということでした。 今日もまた同じことで悩んだので少し調べつつ、解決策を考えてみました。 この状況が発生するシチュエーション コンテンツより前に存在する要素（ヘッダー・ナビなど）をposition: fixed;で固定している ネットに載っていた解決策 CSSで解決する方法 頭出しの対象となる要素（見出しなど）に以下のCSSを指定する padding-top: 100px; /* 固定するもののheightと同じpx値 */ margin-top: -100px; /* 固定するもののheightと同じpx値 */ JavaScriptで解決する方法 ページ表示時に
CSS width 100% including overflow
For various reasons, I have a nested ol inside of a div, where the contents of the list exceeds the size of the container. Because the container has a fixed width, the list element's background does not exceed the viewable area of the container, yet the contents scroll properly. I have created a jsFiddle showing a simplified example of what I'm trying to explain. I would like the width of the cont
Label.css - Label every thing!
Each element you want Can be labeled Simple & Easy! Show Me! Easy To Use Just include the CSS file and add "label" class and "data-label" to your code. Then start positioning. Positions & Effects Choose the position of label with classes top, middle or bottom and left or right for the insde mode and outside top or bottom, with two hover effects Float & Fade.
CSSモジュール ― 明るい未来へようこそ | POSTD
ここ最近、CSSに対する考え方が広がりを見せています。皆さんの中には、その転換点を見つけようと、Christopher Chedeauの”CSS in JS”という講演を聞いた方もいるでしょう。2014年11月にNationJSで行われたこの講演は、CSSにおける重大な分岐点となりました。まるで高エネルギー粒子が衝突した後のように、それを機に、数ある多様な考え方が、各々の方向へ渦を描くように広がったのです。その例として、 React Style と jsxstyle 、 Radium を挙げましょう。これら3つは、Reactのスタイリングにおける最新かつ最良、そして最も実行しやすいアプローチに含まれており、 各々のプロジェクトのReadmeファイルでも、 そのように言及しています。もし”発明”が、 adjacent possible（一歩先にある可能性） を探ることの一例であるのなら、Ch
これはかなり気になる！スタイルシートの可能性が広がるReact.jsのCSS版のようなスクリプト -Descartes | コリス
「React: CSS in JS」からインスピレーションを得て、CSSをJavaScriptで記述し、スタイルの定義、変数・関数の利用、レスポンシブやスクロールなどのイベントに動的に値を生成できるスクリプトを紹介します。 Descartes Descartes -GitHub 上記ページではクリックする度に、背景色の値が動的に適用されています。 Descartesの特徴 Descartesの使い方 Descartesの特徴 DescartesはSassやLessのようなCSSプリプロセッサの良い点を取り入れ、CSSをJSONとして記述するとどうだろうと始めたオープンソースのプロジェクトです。スタイルのセットだけでなく、DOMへのアクセスや基本的なイベントリスナーに対応しています。 Descartesの書式は、SassやLessに似ています。 Descartesの基本スタイル パフォーマン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - saadeghi/browser-hack-sass-mixins: Browser hack sass mixin - Apply your SCSS to a specific browser - CSS hacks for: IE, Chrome, Firefox, Edge, Opera
CodePen - demo:CSS Simple Hoverable Dropdown
GitHub - yocontra/react-responsive: CSS media queries in react - for responsive design, and more.
AniJS, A Library to Raise your Web Design without Coding
GitHub - css/csso: CSS minifier with structural optimizations
Layouts - Pure
Transit - CSS transitions and transformations for jQuery