本記事は、2022年5月に開催されたTechFeed Conference 2022のセッション書き起こし記事「クリエイティブ系のウェブサイト制作で役立つCSS技法（池田 泰延） — TechFeed Conference 2022講演より」を転載したものです。オリジナルはTechFeedをご覧ください。 みなさんこんにちは、私のほうでは「クリエイティブ系のWebサイト制作で役立つCSS技法」ということで発表していきます。 簡単に自己紹介します。池田泰延といいます。株式会社ICSの代表をやっています。経歴としてはFlashからCanvas、WebGLと渡り歩いてきました。 今日はWebの演出技法にフォーカスして紹介していきたいと思います。 Color Pallet Visualizer ―マテリアルデザインの”色の定義”をデータビジュアライゼーションで解き明かす まずデモを用意してきた
初心者向けHTMLリファレンス
初心者向けHTMLリファレンス HTMLタグの役割や基本的な使い方をまとめました。コーディングや学習の際にリファレンスとしてご活用ください。
タイトルの元ネタになっている『BLEACH』は読んだことありません。 悩ましいz-index問題 CSSを学んだことある人なら一度は通るz-index問題。単純にz-indexの値で重なりが決まるのではなく、親要素との関係によって重なりが変わるので複雑です。ついz-index: 9999はやってしまいます。（一番上なんだな、っていうのが分かりやすいので良いとは思いますが） これが問題になるのはpositionのプロパティを使ったときが多いですが、position以外にもz-indexが有効になるプロパティがあります。 具体例がこちら↓ See the Pen z-index by Nishihara (@Nishihara) on CodePen. この記事ではHTMLは以下のようにidの小さい方から書かれている前提になります。 <section class="section sectio
CSSで「続きを読む」を作る
Result 以前書いたものとは別で、こちらは任意の場所で区切りたいケースの時に。 もっとシンプルな方法で非表示部分が要素に依存しています 多くの場合は動的なコンテンツに対応する必要があるので以前書いた方法で事足りそうです css.read-more-state { display: none; } .read-more-target { opacity: 0; max-height: 0; font-size: 0; transition: .15s ease; } .read-more-state:checked ~ .read-more-wrap .read-more-target { opacity: 1; font-size: inherit; max-height: 999em; } .read-more-state ~ .read-more-trigger:before {
【CSS】object-fitはCSSだけで画像をコンテナーにフィットさせてトリミングもできるとっても素晴らしいプロパティー
WEBDESIGNDAY > INSPIRATION > Technique > CSS > 【CSS】object-fitはCSSだけで画像をコンテナーにフィットさせてトリミングもできるとっても素晴らしいプロパティー 【CSS】object-fitはCSSだけで画像をコンテナーにフィットさせてトリミングもできるとっても素晴らしいプロパティー 公開日:2020/05/03 /最終更新日:2020/05/25 CSS PICKUP Technique CSSプロパティーの「object-fit」を使えば、簡単にCSSだけで画像を指定したサイズ（コンテナー）にフィットさせて、かつ、はみ出すの部分はトリミングができてしまいます。要は画像として配置しているのに、「background-size」と同じことができてしまいます。 そこで今日は、素晴らしいCSSプロパティー「object-fit」を色々
IEがいなくなり安心して使えるようになった CSS Grid Layout (display: grid;)。 みなさん、使っていますか？ これまでに面倒だった記述が楽に書けるようになるのはもちろん、 要素数が増えたり減ったりしてもイイ感じに配置できたり、 ウィンドウ幅が変わってもイイ感じに配置できたりと、 Gridは レイアウトの対応力を高める強力な武器 となります。 Gridの便利さをお伝えするため、Gridの活用例をこれでもかと詰め込んだCodePenのサンプルを作成しました。 （ウィンドウ幅によって変わる仕組みもありますので、ぜひ別タブで開いてご確認ください） この記事では、ここで使用している個別の活用例10個を紹介します。 それぞれの項目の中では、どのようなプロパティで機能を実現しているか説明していきます。 （この記事にはほぼすべてのgrid関連プロパティが登場します！） 1.
みんな独立したプロパティ使ってる。使ってないのお前だけ。transformは与えられた要素に移動(translate)、拡大縮小(scale)、回転(rotate)、傾斜(skew)などの変形(transform)を適応させるCSSプロパティです。 transform: translate(-50%, -50%);で中央寄せ(現在ではあまり使用されないレガシーな手法です)といった静的な配置に用いることもありますが、主にCSSアニメーションを実装する際に使われることが多いです。 そのtransformプロパティの値のうち傾斜(skew)以外は現在では独立したプロパティで指定することができます。 /* 従来の書き方 */ .sample { transform: translateY(12px) rotate(90deg) scale(1.1); } /* 独立した書き方 */ .sample
（2022/2/17 更にドキュメントを詳しく参照するように加筆と、一部コマンドを修正しました✍） ESLintとPrettierの設定、皆さんどうされていますか？🤔 私は結構雰囲気でググった記事を参考にやっていました。 ですが、いろんなところで言及されているところですが、ESLintとPrettier周りは過去推奨だったものが現在非推奨になっていたりと、移り変わりがあります。 今では非推奨になっているプラグインを用いている過去記事などあり、それをあたっている方もいらっしゃるかもしれません。 各々その時々ドキュメントを参照するのがベストですが、今回は、2022年2月現在、最新のドキュメントを丹念に見ながらESLintとPrettierの設定をしてみます。 おまけとして、husky+lint-stagedとeslint-plugin-importの設定もしていきます。 ESLintの設定か
初の有料noteです。 僕個人が厳守しているCSSコーディングのルールから、特に守っておいた方が良いと感じたものを「どうしてそれが良いのか・悪いのか」といった解説も含めて30点ほどピックアップしました。 文字数は全部で28,000字オーバーと卒論レベルですが、それだけコンテンツは詰まってます。価格は相場をよく知らないのでワンコインで買える500円にしました。 （※2019.12.22追記）こちらのnoteですが、リリースから一週間経たずして売り上げが1000部に届きました。皆様ありがとうございます。 先週リリースしたnoteが一週間経たずして売り上げ1000部突破いたしました。思いがけず大変なご好評をいただきまして、ありがとうございます。https://t.co/Pj1tOGTlh5 pic.twitter.com/xfP08jfF1p — TAK (@tak_dcxi) December
もうじきiOS13、iPadOSが一般公開されますね。 みなさんは自身のサービスで動作確認済ませてますか？ この記事では自分が観測した要注意事象と、それに対する対処を紹介します。 ※ iOS13 beta8時点の情報です。 要注意 プライベートモード判定の裏技が使えなくなった プライベートモード判定しているサイトは要注意です！！ Apple Developer Forumsにもある内容ですが、iOS11とiOS12では下記のコードでWebSQLがエラーになる場合はプライベートモードと判定することが可能でした。 var isPrivate = false; try { window.openDatabase(null, null, null, null); } catch (_) { isPrivate = true; } しかし、Safari13ではWebSQLのサポートが終了し、プライベ
positionプロパティを身に着けよう！stickyの仕様と使い方を解説！ | ビジネスとIT活用に役立つ情報（株式会社アーティス）
前回の記事positionプロパティを身に着けよう！基本的な知識と使い方を解説！（基礎編）ではpositionプロパティにおける4つの値について解説しました。 今回はこれらの値全てと類似点を持つposition: sticky;に関して解説していきます。 position: sticky;とは positionプロパティは入れる値に応じて要素の高さの有無が決まっています。 static、relativeであれば高さを有し、absolute、fixedであれば要素の高さがなくなります。 また、要素の位置指定をする際はそれぞれ基準となる要素が決まっています。relativeは通常配置される位置を基準に、absoluteは基準となる親要素、fixedはウインドウ全体を基準としていました。 stickyを設定された要素は、通常の位置に配置され、その要素の位置がウインドウ全体を基準として、指定位置の
CSSを使ってcheckboxやradioの見た目をキュートに変える方法 | 三重県のデザイン会社 エコムクリエーション
エンジニアの山岡です。 お問い合わせなどのフォームをCSSで装飾する時、inputやtextareaはサクッと見た目を変えられますが、checkboxやradioは一筋縄ではいきません。 イマイチなデフォルトスタイルから…… デフォルトスタイルのcheckboxとradio ラブリーでキュートかつ、クールでアメイジングでスタイリッシュなチェックボックスやラジオボタンにしたい！ CSSでスタイリングしたcheckboxとradio そんな時は、labelとinput[type=checkbox]（またはinput[type=radio]）を組み合わせて実装する方法がオススメです。 サンプル1: キュートなチェックボックス・ラジオボタンサンプル2: より主張する＆「押した感」をプラスサンプル3: チェックした瞬間の動きで「遊び」と「楽しさ」をプラス サンプル1 こちらは、いなべ山女子フェスタ公
CSSのfilterフィルタープロパティを使うと、画像の彩度、明度、コントラスなどを変更したり、ぼかしを加えたりすることが可能です。このページではfilterの使い方をサンプルCSS付きで解説します。
display: contents; とは一体何なのか
tailwindcssを途中から導入しはじめたプロジェクトで、contentsクラスを使用している箇所がデザイン崩れを起こしていたので、tailwindcssにおけるcontentsクラスが持っているプロパティdisplay: contents;について調べた。 まとめ記事あるけど、長いのでみんなきっと理解できてない coliss が[CSS]「display: contents;」がすごい便利！ラッパーを使った実装が大きく変わるこれからのテクニックと「すごい便利！」まで言って2018年に解説した記事作ってくれているけど、なかなかボリューミーな記事。 会社の同僚たちが「わからん」言ってたのと、Twitterみても「あとぜ読むぜ」くらいのリアクションしかわかんなかったので、「結局いつ使うねん」だけは、わかるようにまとめてみる。 display: contents; is 何 結論「displ
フォントサイズを可変にしてみよう！css関数clampの便利なお話 | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]
HTMLcss ブログをご覧の皆様こんにちは、デザイン戦略部のJKです。 googleがモバイルフレンドリーを提唱してからもはやレスポンシブ対応は必須になりましたが、レスポンシブ対応って悩ましいですよね。 各デバイスの代表的な端末の解像度に合わせて作ればよいのですが、ウィンドウ幅を縮めてテストを繰り返していると微妙な幅の時にレイアウトが崩れているのが気になってしょうがない、なんてことザラにあります。 width、height、font-size、padding、margin…上げていくとキリがありません。 今回はそんな中でも頭を悩ませがちなfont-sizeに焦点をあてて、clampというCSSの関数をご紹介します。 clampとは 最小値、基準値、最大値を設定して可変にすることができる関数です。 widthでいうmax-widthやmin-widthがイメージに近いです。 使い方としては
![フォントサイズを可変にしてみよう！css関数clampの便利なお話 | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/fa62f46afef401b552edb550c3d68a7ff8ca5c4c/height=288;version=1;width=512/https%3A%2F%2Ftechblog.raccoon.ne.jp%2Fwp-content%2Fuploads%2F2021%2F03%2Fcss_20210323.png)
FLOCSSベースのサイト設計 - 破綻しないルールを決める
基本となるBEM設計について BlockとElementはアンダーバー２つ、ElementとModifierはハイフン２つで管理します。アンダーバー１つや大文字を使ったキャメルケース系のクラス名は使いません。以下の例ではheader（Block）、inner（Element）、center（Modifier）になります。 例） header__inner--center クラス名が長くなってしまう場合はハイフン１つで繋ぎます。以下の例だとlogo-setで１つのElementになります。 例） header__logo-set またElementからElementと繋げることは禁止です。必ずBlockから直接繋がっている必要があります。Modifierは直接ブロックにも繋がることができます。 例） NG：header__inner__ttl OK：header__ttl 接頭辞（プレフィッ
Writing CSS In 2023: Is It Any Different Than A Few Years Ago? — Smashing Magazine
CSS is evolving faster than ever. With all of the new features that are now available — and forthcoming — since we got Flexbox and Grid years ago, the way we write CSS is evolving, too. In this article, Geoff Graham shares which features have had the most influence on his current approaches to CSS, as well as those that have not (at least yet). Is there anything in the front-end world that’s evolv
CSS段組と印刷の地雷
column-count: 3 等を使ったCSSでの段組をして、印刷物をデザインする際にハマったことを共有します（ある程度段組CSSと印刷用CSSを知っている方を対象に書いています）。 バックグラウンド 行程さん 「行程さん」という、旅のしおりをウェブ上で簡単に作るサービスを作っています。今回はそのしおりをアナログ回帰させて、簡単に印刷してもらうために印刷専用のプレビュー画面をウェブ上で作ろうとしたのが始まりです。 機能 二つ折り用と三つ折り用 印刷されるものと同じ 考慮すること 特定の誰か、というものをあまり考えず、なるべくすべての環境で印刷可能にしたいと考えました。 日本、日本人 年齢 10代〜60代くらい ネットリテラシー ある ない 通信速度 遅い 速い OS、端末 Windows macOS Android iOS 印刷するプリンター 所持 コンビニ 対応ブラウザの決定打になった
CSS clip-path の使い方
CSS clip-path や mask-image の仕様などについては以下のサイトで確認することができます。 CSS Masking Module Level 1（日本語訳） CSS Masking Module Level 1（W3C） CSS Shapes Module Level 1（日本語訳） CSS Shapes Module Level 1（W3C） MDN CSS マスク 以下で clip-path や mask-image 関連のブラウザの対応状況を確認できます。 can i use: clip-path can i use: mask-image 関連ページ： HTML SVG の基本的な使い方 SVG アニメーション（SMIL を使ったアニメーション） Photoshop で SVG CSS マスキング mask-image の使い方 CSS Shapes / sh
Flexbox、使っていますか？ 機能がありすぎて使うのに躊躇してしまっていたり、正直あまり使いこなせていなかったりしていませんか？ 私ははじめ、どのプロパティを使えば良いのか悩んで悩んで、結局使わずにfloatやdisplay: table;などを使ったりして使用を避けていましたが、使い始めたらとても便利でした。 Flexboxのプロパティには数多くの種類があってとっつくにくい印象を受けますが、実は実際の制作現場で使用するものはそこまで多くありません。 今回は、現場でよく使用するプロパティを、使用例とあわせてご紹介します。 これだけ覚えておけば、サイトを構築する上でほとんど不自由はないと思います。
ほほーん…。 必要な部分だけを指定できます！ 論理プロパティinlineとblockの解説 inlineは水平方向、blockは垂直方向に作用するプロパティです。 .header { // 物理プロパティ 左右 margin-left: auto; margin-right: auto; // 物理プロパティ 上下 margin-top: auto; margin-bottom: auto; // 論理プロパティ 左右 margin-inline: auto; // 論理プロパティ 上下 margin-block: auto; }
IE11でflexプロパティに書いたcalcが機能しないバグ
先日遭遇したIE11のflexbox関連のバグをメモっておきます。周知のバグだと思いますが、自分で書くと脳に定着しそうだしw バグの詳細 以下のように、flexショートハンド・プロパティのflex-basisにcalcを使って値を記述すると、IE11で機能しないため無視されてしまいます（IE10も同様）。 flex: 1 1 calc(25% - 1rem); 対処法 IE11の場合は、以下のようにflexプロパティをロングハンドで記述すればなおります。 flex-grow: 1; flex-shrink: 1; flex-basis: calc(25% - 1rem); IE10に対応したい場合、flex-basisをautoにしてwidthでcalcを使うと良いらしいです（すみません、テストしてません）。 メモ Edgeでも同様のバグがあったそうですが修正されています。 MS Edge
よくあるカード型のNGコーディング5選 | TipsWeb
以下のような、よくあるカード型のコーディングは、簡単なようで実はとても奥が深いです。 ただ単純にデザインの見た目を再現しただけでは不十分で、 いかに“動的”になったときのことを考えてコーディングできているか、がポイントです。 今回はこの、簡単なデザインをコーディングする際に注意すべきポイントを５つまとめたので今後の参考にしてください。 それでは見ていきましょう！
まずはIEユーザーの方へ 万が一、IEユーザーがこのページにアクセスされたときのために。 Googleが開発した世界で一番使用率が高いChromeをオススメします（Edgeでも構わないんですけど）。軽いし、表示崩れなんて起きませんよ？ この機会にブラウザの乗り換えなんてどうでしょうか？ 下記サイトからタダでダウンロードできます。
コード短縮化を図れる よく使うデザインをできるかぎり短いコードで実装できるように解説しています。左のデザインであれば画像装飾を1行で実装可能です。 コードを理解できる 本書ではコードを知るのではなく、コードを理解いただけるように解説しています。単にコードを紹介しコピペで完結するのではなく、コードの意味を理解し、他へ応用できるチカラをつけてもらうことを目的としています。 なので、文章だけでは分かりにくい内容は画像を使って解説しているので理解しやすいです。
今回はWebコーディング時に迷いがちな単位の使い分けについて自分なりにまとめました。 よく議論が起こるテーマですが、先にお伝えしておくとコーディング時の単位に正解は無いです。 案件によってルールが引かれてる場合もありますし、基本的に適材適所使うことが前提です。 あくまで様々な方の意見や情報を見たうえで、一つの考え方としてまとめた形になっているということをご了承ください！ 当記事の結論 フォントサイズ：rem要素の大きさ、marginやpadding：rem親要素にあたる包含的なcontainer要素や画面幅いっぱいに表示させたい要素：％letter-spacingや擬似要素との間隔：emboderなどの可変させたくない要素：pxヒーローイメージやモーダルウィンドウ など画面を占有して表示させる要素：vw 次からその根拠と解説を紹介していきます。 絶対値と相対値単位には「絶対値」と「相対値」
[css]アスペクト比を固定して可変させる方法 ~よく見る75%ってなに!?~｜blog（スワブロ） | スワローインキュベート
ども、むったんです。 あっと言う間に5月も終わり、やってきます…夏のLIVE SEASON!!!! ちなみに今年の夏はみゆライ2本（入野自由くんのライヴ）、A’LIVE1本（高橋直純さんのライヴ）参戦が既に決まっております。 おそらく、音霊も行くつもりでいるのでもう1本追加となるでしょう＼(^^)／ たのしみたのしみ〜♪ ちなみに私のコーディングスピードは 美味しいお肉をご馳走になった 楽しみなライヴが近々ある に比例します。（社会人としてあるまじき気分屋…笑 さて、今回はアスペクト比を固定させながら可変させる方法！ ということで、まず何に使うかというと…レスポンシブに対応した画像や動画が思い浮かぶと思います。 基本的に画像に関しては 等々をやってあげれば、レスポンシブには対応できるとは思うのです。 問題は、動画ですね。 iframeとか使われちゃうと、高さも明記してあげないと0pxになっ
![[css]アスペクト比を固定して可変させる方法 ~よく見る75%ってなに!?~｜blog（スワブロ） | スワローインキュベート](https://cdn-ak-scissors.b.st-hatena.com/image/square/4eb571de057e9c8534acb69c7d2cd0322c9f3737/height=288;version=1;width=512/https%3A%2F%2Fswallow-incubate.com%2Fsw_wp%2Fwp-content%2Fuploads%2F2019%2F05%2Faspect75-thumnail.png)
はじめまして！TAK(@tak_dcxi)と申します。 noteのアカウントを取得して数週間経つのですが、一度も投稿をしていないはずなのにフォロワーが15人もいたのでそろそろ手を出さないとなーと思いながら書いております。 今後もnoteを投稿していこうとは思っておりますが、僕が投稿するnoteは基本的に自分自身への備忘録のつもりで書いています。 今回のnoteもあくまで自分の感想の紹介であり、世間一般の考え方とは違うものも含まれます。あくまで参考としてご覧いただけますと幸いです。 # なぜ丁寧なCSS設計が求められるのか？ 簡単に言えば以下の点です。 - 保守性・メンテナンス性が向上する - 複数人でコーディングを行う際に作業がスムーズに行える - スケールの大きなwebサイトに対応しやすくなる まず、「保守性・メンテナンス性が向上する」という点ですが、これはめちゃくちゃ大切です。 Web
前回の記事に続き、IE11でのflexbox関連のバグについてのメモです。たくさんあるflexbox関連のバグ ですが、自分なりに1つ1つ整理していこうと思います。 今回はbox-sizing: border-box;関連のflexboxのバグです。ぱっと見では気付きにくい可能性があるので注意が必要なバグです。 バグの詳細 IE11ではbox-sizing: border-box;が指定されていても、flex-basisに指定した値がbox-sizing: content-box;をベースに計算されてしまいます。そのため、flexアイテムにborderやpaddingが指定されていると想定通りのレイアウトになりません。 対処法1 当該のflexアイテムにmax-widthを指定する。 flex: 1 1 75%; max-width: 75%; padding: 0 4rem 0 0; 対
CSSのフォーマットが簡単にできるVSCodeの拡張機能、『CSS Comb』について解説してゆきます。 ▼この記事を書いたひと フリーランスみやしも（@miyashimo_blog）です。プログラミングやWebサイト制作に関するITの情報を幅広くお届けしていきます。 VSCodeでCSSをフォーマットする方法 テキストエディタ『Visual Studio Code』 CSSコードに対する『フォーマット（書式ルール）』の適用は、きれいで見やすい、品質の高いコードを書くうえでの重要な一要素になります。 ▼CSSのフォーマット例 引用符の統一（シングルorダブルクォーテーション） インデント（空白・タブ） や改行の位置 CSSプロパティの並び順 コーディングの際には、上記のルールを守る事でコードをきれいな状態を保てますが、常にルールを意識するのも大変ですし、かといって、コーディング後に全体を手
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
コーディングをしていて要素が親要素からはみ出てしまう失敗は初学者のうちはありがちです。 よくある原因として挙げられるのは、widthを絶対値で指定していたり、paddingの扱いをミスしていたりすることです。 これらは調べるとたくさん情報が出てくるので、解決も簡単です。しかし、こうしたよくある失敗に当てはまらず、しかも、原因を確かめようと検証モードにするとはみ出さなくなる現象が生じることがあります。 実は筆者も昔この状態に陥って、原因がなかなかわからずに困ったことがあります。 この記事では、ページが画面からはみ出る現象が発生したら確認したいことと、具体的な解決方法を解説します。 記事の著者牧野健人 株式会社リラクス 代表取締役。CRO・SEOを専門とし、デザイン・実装のスキルも活かしながら、クライアントの成果向上のための取組に尽力。 慶應義塾大学卒業後、行政機関を経て、デジタルマーケティン
日本語Webフォント( M PLUS 1p)がつぶれる＆ジャギる問題を解決する | Blog | 株式会社イロコト | ゲーム･アニメ等のエンタメ系Web制作&運用会社
こんにちは、miyabiです。 日本語のWebフォントを使用している時、文字につぶれやジャギが発生することがあります。今回はそんな日本語Webフォントをキレイ(滑らか)に表示する方法をご紹介します。 日本語Webフォントがつぶれる、ジャギる 主にWindows環境だったり、18px以下の小さいフォントサイズを使用している際に発生することがあります。特にGoogleフォントが提供している日本語M PLUS 1pは、丸みがありポップな印象を持たせられるのでエンタメ系のサイトで使用頻度が高いのですが、何もしないとWindowsで下記のようになってしまいます。 フォントのつぶれやジャギが目立ち、読みづらい状態です。これを改善するにはどのように対処すれば良いのでしょうか。 日本語Webフォントをキレイ(滑らか)に表示する 方法は至って簡単です。 テキストに次のCSSを追加するだけでキレイ(滑らか)に
Iceberger
Draw an iceberg and see how it will float. Inspired by a tweet by @GlacialMeg — Game by @joshdata@joshdata.me Icebergs are less dense than water, so they always float with about 10% of their mass above the water. But which way up? An iceberg wouldn’t float exactly like on this page in reality. Its three-dimensional distribution of mass and its relative density compared to the water are both signif
FLOCSSとBEMを理解する - bagelee（ベーグリー）
はじめに 本記事では、FLOCSSとBEMについて整理して学んでいきます！ 私はマークアップをする際に、CSS/Sassのクラス名の命名に悩んでしまうことがあります。 一緒にFLOCSSとBEMをマスターして、より分かりやすい記述ができるようになりましょう！ FLOCSSとは FLOCSS（Foundation Layout Object CSS）は、ファイルやディレクトリの構成だけでなく、命名のルールもMindBEMding（BEM）を用いて決められている設計思想で、導入することで混乱の少ない記述になるとされています。 FLOCSSの構造 Foundation デフォルトとなるスタイルのファイル（reset.scssやfont.scssなど） Layout サイト全体のレイアウトに関わる要素のファイル（header.scssやfooter.scssなど） Object 使い回す要素のファ
<div class="content"> <section class="content01"></section> <section class="content02"></section> </div> .content01 { height: 300px; width: 100%; background-color: #74c23a; /* きみどり */ } .content02 { height: 300px; width: 100%; background-color: #8B3DC5; /* むらさき */ } .content { overflow: hidden; /* はみ出た部分は表示しない */ } .content01{ position: relative; height: 300px; width: 100%; background-color: #74c2
文字の間隔を調整する「letter-spacing」を指定したとき、 最後の文字の後ろにもスペースが挿入されてしまいます。 テキストを左揃えにしているときは特に気になりませんが 「text-align:center;」や「text-align:right;」を設定していると、 最後の文字のスペースが原因で位置がズレてしまいます。 作成したボタンを元に対処方法を書いていきます。 ●中央揃えボタン
【CSS】borderにグラデーションをかける方法！たった3行だけで簡単にボーダーをカラフルにできる！ - ディレイマニア
CSSだけでデザインできることが増えてきて、昔なら画像を使っていた場面でもCSS数行でできちゃうので手軽でいいですよね。 backgroundにグラデをかける手法は使わないサイトはないくらい多用してるんですが、borderにもかけられるので、その方法についてコピペで使えるソースコード付きでご紹介します。
IE11でもobject-fitを使う一番簡単な方法
CSSのobject-fitプロパティって便利ですよねぇ。 画像を並べるページではもうほとんどコレに頼り切りで、このプロパティがないなんて考えられないくらいです。 がしかし、この便利なobject-fitさん、IE11は対応してないんですよね…。 そもそもobject-fitって何？ 例えば、下記のような縦長写真と横長写真が混在する場合、普通に並べるとこんなふうにデコボコになりますよね。 幅200pxで揃えたら上下にデコボコになりますし、 高さ200pxで揃えると大きさが不揃いになりますし、 幅200px 高さ200pxを指定すると被写体が歪んでしまいます。 左のワンちゃんは潰れていますし、右のワンちゃんは細長くなっちゃいましたよね？ これを解決してくれるのが object-fit:cover; です。 こんなふうに指定した範囲内で画像をトリミングして表示してくれるんですね。 ■objec
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
クリエイティブ系のウェブサイト制作で役立つCSS技法 ～TechFeed Conference 2022講演より | gihyo.jp
いつから、z-indexがpositionだけのものだと錯覚していた？ - Qiita
【CSS】gridでできるこんなレイアウト10選（grid関連プロパティ総ざらい）
えっ！？まだtransformプロパティを使ってるの！？ ｜ TAKLOG
ESLintとPrettierの設定をドキュメントを丹念に見ながらやる（2022年2月時点）
僕がCSSを書く際に必ず意識している CSSのコーディングルール30条｜TAK / Web Creator.
iOS13とiPadOSに備える（フロントエンド） - Qiita
CSSのfilterの使い方 - 画像フィルターで明度・彩度・ぼかしなどを調整
プロはこうやって使ってる！制作現場でよく使われるFlexboxの実例5選
CSSの論理プロパティ？知ってた方が便利！ - Qiita
返せ、工数！コーダー泣かせの☓☓☓☓――IE11対応まとめ | yanagi's memo
スクロールと連動するアニメーションは「Animate.css + wow.js」で決まり！
現場で使えるWebデザインアイデアレシピ サポートサイト
【px・em・rem・%】CSS単位の使い分けについて考察 - PENGIN BLOG
メンテナンス性の高いCSSコーディングが大切な理由｜TAK / Web Creator.
IE11でflex-basisの値にbox-sizing: border-boxが効かないバグ
【VSCode】CSSフォーマットの拡張機能『CSSComb』の使い方
gap (grid-gap) - CSS: カスケーディングスタイルシート | MDN
100vwで画面からはみ出るのはスクロールバーの幅を含むから【解決方法は？】 | 株式会社リラクス
セクションを斜めに区切るデザインをCSSで実装する方法 - Qiita
「letter-spacing」を指定した時の、中央揃え・右揃えのズレを無くす方法 | WEBの技