A Free Gallery of Fantastic and Unique CSS Gradients.

この記事では、CSS FlexboxとGridをつかってお好みのレイアウトを作成するコツやポイントをまとめた使い方ガイドやチートシート、ゲームなどをまとめて紹介しています。 ゲーム感覚で新しいCSSプロパティを学習することができたり、記述方法をど忘れしてしまったときなどにも便利で、お好みのレイアウトをオンラインで作成できるツールもあります。覚えようと思ってなかなか手がつかなかったひとも、これならすぐにはじめることができますよ。 CSS Gridの使い方ガイド、チートシート、ゲームまとめ Grid Garden CSS Gridレイアウトプロパティを使うことで、人参に水を与えながら自分の農園を育てていく、ゲーム感覚でGridプロパティを学ぶことができます。ゲームの各レベルでは、ゲーム達成に利用できる他のプロパティについてもサンプル例と一緒に解説されています。 Bonus – CSS Dine

前置き CSSでの余白の取り方について、後輩に「margin-topとmargin-bottomどっち派ですか？」と聞かれたので、 回答内容を記事として残します。 昔、会社のOJTで学んだことの共有となります。 原則 1. 基本的にmargin-topを使う 理由としては、そちらの方が後々調節しやすいからです。 また、後述の優先度で設定していけば、margin-bottomの出番はほぼなくなります。 2. どうしても無理な場合にbottomを使う margin-bottomは他の方法ではどうしても設定が無理なケースのみ使いましょう。 3. 隣接セレクタをうまく使うとトルツメしやすい 特定の要素同士が並んだ時だけマージンを取る＝余白の打ち消し設定が不要になります。 設定の優先度 要素がいくらネストしても下記の優先度は変わりません。 この優先度で余白を設定していけば、margin-bottom

直近だと…（2022/01/13追記） あれから4年近く経ち、私も転職したことで、デザイナーではなくなりました…。 この記事がたまに見られてるっぽいので、一応アップデートしておきます。 現代だと、gap という、まさしくこの記事の意図を表現するプロパティが出来たため、そちらを使うことを推奨します。 この記事の内容で書かれていた方は、コード内を margin-top で検索すれば、置き換えはそんなに難しくないのではないかと思います。 この記事は... 「CSSで「余白」を制してデザイナーに好かれよう」というとても素晴らしい，本当に有難い記事が上がっていたのを見て，じゃあデザイナー(主語がでかい)は余白をどう考えているのかを，CSSを書いている一デザイナーの身から書き下してみよう、というものです． 「余白」の意味の書き下しと『marginは下ではなく「上」で取る！』ことが多い理由の分析 「余白

ウェブページのテキストはいくつかの文字サイズの組み合わせで出来ています。それぞれの文字サイズは情報の階層構造を表現するなどの役割を担いますが、同時にお互いが適切なバランスで調和しているべきです。そのため文字サイズはページやコンポーネントごとに場当たり的に決められるべきではありません。プロジェクトを通じて一貫したシステムを形成している必要があります。 そういった調和と一貫性を持った文字サイズのシステムを作るために、私たちのチームでは「調和数列」に基づいて一連の文字サイズを決めることがあります。調和数列とは等差数列（隣接する項が共通の差を持つ数列）の各項の逆数からなる数列です。 1, 2, 3, 4, 5, 6 ... // 等差数列 1, 1/2, 1/3, 1/4, 1/5, 1/6 ...　// 調和数列 実際に調和数列を用いて文字サイズを算出する例を以下に示します。 $font-siz

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

In the web development family, JavaScript has developed a bit of a reputation as the angry, rebellious teenager going through a new phase every year and telling you you're just too old to understand. CSS on the other hand has always been the studious, well-behaved kid who always stays polite and never makes a rash decision. But don't take things for granted: despite being over 20 years old, there'

Cookie Compliance We use cookies to give you the best possible website experience. By using CodyHouse, you agree to our Privacy Policy.

【第3弾】少しのコードで実装可能な15のCSS小技集CSS小技集シリーズの第3弾！「【第2弾】少しのコードで実装可能な20のCSS小技集」から3年が経ち、さらに便利でサクッと使えるコードが続々登場！特にこれまではJavaScriptで実装していたものがCSSだけで実現できるようになったりと、進化が凄まじいです。初心者さんからベテランさんまで要チェック！ 【第 2 弾】少しのコードで実装可能な 20 の CSS 小技集 目次スムーズスクロールスクロールスナップスクロールすると要素を固定画像をトリミングCSS で計算式を書くテキストを円形に回り込ませるWeb フォントを使った時の表示遅延を回避するテキストに波線を引くテキストの上に記号を表示表のセルの幅を統一する入れ子になったリストもカウントするフォームのプレースホルダーの文字色を変更しましまのラインメディアクエリーを使わずにタイル型レイアウト

position: sticky;とは、ヘッダやナビゲーション、サイドバーなど指定した要素をスクロールした際にぴたっと指定した位置に貼り付ける（スティッキー）便利なプロパティです。 position: sticky;の基礎知識、機能の仕組み、そして実際にどのようなコードで機能し、機能しないのか、便利な使い方などを紹介します。 CSS Position Sticky - How It Really Works! by Elad Shechter 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに position: sticky;はじめの一歩 position: sticky;の仕様 position: sticky;の便利な使い方 ブラウザのサポート 終わりに -参考記事 はじめに CSSのposition: sticky

Windows メイリオ 'メイリオ', Meiryo, 愛のあるユニークで豊かな書体 Meiryo UI 'Meiryo UI', 愛のあるユニークで豊かな書体 游ゴシック YuGothic,'Yu Gothic', 愛のあるユニークで豊かな書体 Windows8.1~ 游明朝体 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体', 愛のあるユニークで豊かな書体 Windows8.1~ Yu Gothic UI 'Yu Gothic UI', 愛のあるユニークで豊かな書体 Windows10~ ＭＳ ゴシック 'ＭＳ ゴシック', 愛のあるユニークで豊かな書体 ＭＳ Ｐゴシック 'ＭＳ Ｐゴシック','MS PGothic', 愛のあるユニークで豊かな書体 MS UIゴシック 'MS UI Gothic', 愛のあるユニークで豊かな書体 MS明

パッと見は1枚のイメージなのですが、そこにホバーすると複数枚のイメージがあるように見せるアニメーションをCSSで実装したものです。 リンク先でイメージが複数枚あるとかクリックすると複数枚表示するイメージモーダル（ライトボックス）が開くのを伝えたいときに使えるかと思います。 共通のHTML・CSS ここで紹介しているサンプルは基本的に下記のようなHTMLをベースに使用しています。 CSS次第ではあるので厳密にその順番である必要はないですが、img要素は1つ目で初期表示で表示させたいものを指定し、2つ目以降はホバー時に表示させたいものを指定していく想定になります。 <a href="#" class="images-preview"> <img src="img01.jpg"> <img src="img02.jpg"> <img src="img03.jpg"> <img src="img0

デスクトップ・タブレット・スマホなどの異なるスクリーンサイズに応じて設定したブレークポイントをベースに、font-size, margin, padding, positionなど各プロパティの値を一元管理できるSassの超軽量ライブラリを紹介します。

今年、携わった案件のほとんどがレスポンシブWebデザインでした。 今更ですが、私がレスポンシブWebデザインのコーディングでやっていることや気を付けていることを整理してみたいと思います。 User Agent Style Sheetの対応 ブラウザのデフォルトで設定されているスタイルシートの差異を埋めるCSSは「Normalize.css」をよく使います。 デザインによっては、Eric Meyer’s的なRest CSSの方がやりやすい場合もあるので、そこは見た目に臨機応変に対応してます。 CSS Flexible Box 私が受け持つ案件では、最新ブラウザ、及びInternet Explorer 11（IE11）のみの対応が増えたため、近年では、Flexible Boxをカジュアルに使用できるようになりました。 個人的には、広い画面では横並びだったものを、displayプロパティを変更す

Fluid-responsive value/calculation generator for CSS/Sass. To linearly scale font-size, margin, padding, etc. across viewport widths.

追記とおことわり。 コメントで「対処法と書いてるのにダメなパターンあるじゃないか！」とか、「こういうのはダメなんじゃない？」とかいうのがちらほら出ているので、おことわりを入れさせていただきます。 まず、この記事は:hover使用時に生じる期待していない動きを100％改善できる、いわゆる銀の弾丸となるものではありません。 あくまでも色々な変化に対応しやすいコーディング方法を紹介しているだけなので、「コピペでできたら楽でいいなー」と期待している方はブラウザバック推奨です。 また、コーディングレベルがやべぇ！と言っておきながら自分の方もおかしな点を指摘され、自分のやばさも露呈しております。 修正してお詫びします。 本文ここから 調べてみたらWeb界隈のコーディングレベルがやばかった、という話。 冗談ではなく本当にやばい。 発端。 侍エンジニア塾の炎上から考える、この問題の本質について この記事を

About reserved postingIf you register a secret article by the day before the same day, it will be automatically published around 7:00 on the same day. About posting periodOnly articles submitted after November 1 of the year can be registered. (Secret articles can be registered anytime articles are posted.)

CSS GridとFlexboxは、CSSで現在主流となるレイアウトのテクノロジーです。 CSS GridとFlexboxは表面的には似ているように感じるかもしれません。しかし、実際には異なるタスクに使用され、それぞれ異なるレイアウトの問題を解決します。 Flexboxが適してる場合、CSS Gridが適している場合、また両方を使用する場合、さまざまなレイアウトの問題を正しく解決する方法を紹介します。 Grid vs. Flexbox: Which should you choose? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ページ全体のレイアウト 隙間が必要なレイアウト 1次元と2次元のレイアウト ラッパー CSS Gridは将来、Flexboxを時代遅れにするでしょうか？ ページ全体のレイアウト CSS Gridはコ

ITCSSは、OOCSSやBEM、SMACSSのようなCSS methodology(方法論)の１つでInverted Triangle CSS(逆三角形CSS)の略称。 提唱したのは、csswizardryのHarry Roberts氏。 ITCSSに関するドキュメントはあまり多くない。 セルビアでITCSSについて紹介している動画がYoutubeにあがってる。そのときのスライドがManaging CSS Projects with ITCSS // Speaker Deck。 ITCSSは、プロジェクトのCSSをより良く管理していくのに、以下のことが必要としていて、 A sane environment that is accessible to lots of people. To tame and manage source order and the cascade. To cr

CSSで組版（印刷打つの紙面を構成）を行うCSS組版が、技術系同人誌（主に技術書典）界隈や、一般の出版業界でも盛り上がりを見せています。 今回、CSS組版・パブリッシング交流会というところで登壇した内容を記事にいたしました。また、記事の最後には、同イベントでのCSS組版について感じたことも報告としてまとめました。 実際に行ったCSS組版の方法 MarkdownからHTMLにどう変換するかの模索結果 が今回の記事の内容です。そのため、ベストプラクティス、というわけではないです。CSSで組版を行うということは、必然的に、HTML等で書かれた文書が必要になるので、それをどうやって生成しようという話です。 目次 バックグラウンド なぜMarkdown＋CSS組版なのか Markdown＋CSS組版の作業の流れ エディタ Atom エディタ Typora HTML出力 印刷画面プレビュー Tips