プライバシーと :visited セレクター - CSS: カスケーディングスタイルシート | MDN
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 の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
CSS見出しデザイン21選 | MxGrain - デザイン制作
CSSで実装できるシンプルな見出しデザインを21パターンご紹介します。汎用性が高くテイストに縛られず現場ですぐ使えるデザインなのでストックしておくと便利に使えます。あなたの現場でぜひご利用ください。 CSSのみで実装するシンプルな見出しデザイン21パターン 蛍光ペンのような線をひいたCSS見出しデザイン ラインを使ったCSS見出し HTML <h2 class="heading01">ラインを使ったCSS見出し</h2> CSS .heading01 { display: inline; font-size: 26px; background-image: linear-gradient(rgba(0,0,0,0) 70%, rgb(252,81,133) 70%); } 蛍光ペンで線を引いたような見出しデザインです。display: inlineで複数行にも対応させています。 2色を重ね
CSS transformのmatrix()を一瞬で 完 全 理 解 できるやつ作ったよ。 | Ginpen.com
というわけでお探しのはこちらです。 Understanding transform:matrix() https://understanding-transform-matrix.ginpei.info/ スマホでも存分にご理解頂けます。 見た目 こんな感じ。 pic.twitter.com/GsxurJJbKI — 高梨ギンペイ (@ginpei_jp) November 13, 2018 この動画だけでも十分理解できそう。 matrix() とは 動かして完全理解して頂きましたら、改めてこの関数を紹介したいと思います。 matrix() は、 transform で使える各種関数すなわち translate(), scale(), rotate() 及び skew() を置き換え得る最強の関数です。配列の reduce() 的な立ち位置、といえばJavaScriptに明るい皆さまに通じ
垂直方向のマージンにはmargin-topを優先的に使う理由
margin-bottomではなくmargin-topを使う派である旨をツイートしたら理由を尋ねられたので、それに対する回答です。大きくは次の3つです。 末尾の要素の存在が任意である場合が多いため Stackレイアウトとの取り合わせやすさのため 隣接セレクターを使った場合分けができるようにするため CSS、基本コンポーネントの上にマージン取る派と、下にマージン取る派がいると思うですけど、自分は今までずっと下で。というのは、その方が直感的だと感じるからなんですけど、見出しの下って結構縮めるよね？それを上マージンでやると結構頭こんがらがらない？って思うんだけどどうなんだろう — Takazudo (@Takazudo) January 12, 2021 上です — 全部入りHTML太郎 (@_yuheiy) January 12, 2021 なぜですか? — u (@uknmr) Januar
CSSを非同期ロードする最も簡単な方法 - Qiita
CSS読み込みの<link rel="stylesheet">は同期なので、レンダリングブロックします。 どういうことかというと、CSSファイルの読み込み・パースが終わるまで画面描写が止まってしまいます。 これに対策する方法としてpreloadというものが策定されましたが、対応状況が微妙です。 2019年7月時点でもブラウザシェアが8割しかなく、Firefoxは当面対応するつもりがないようです。 とはいえ残り2割のためにloadCSSを突っ込んだりとか始めると本末転倒感に溢れます。 全ブラウザ対応のためには、なんにしろ結局JavaScriptをこりこり書くしかない状況でした。 が、なんかすっごい簡単な対処法があったので紹介してみます。 以下はScott Jehlによる記事、The Simplest Way to Load CSS Asynchronouslyの日本語訳です。 ちなみにSco
サイトを高速化したらロード時間は1.6秒に、Lighthouseは100を獲得、その際に実施した手順を解説
サイトのロード時間とパフォーマンスを改善するために再構築した結果、ロード時間が1.6秒に短縮され、Lighthouseのスコアで100を獲得した際に、実施した手順を紹介します。 HTMLとCSSベースの改善が主で、ロード時の数ミリ秒間の表示、スマホ用CSSファイルの分割など、いろいろなサイトやブログの改善にも役立つと思います。 当ブログにも改善すべき点があるのが分かったので、対応したいですね。 I rebuilt my portfolio🌻 Now it loads in 1.6s 🎉 Here's how I did by Saurabh Daware 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 要約 改善方法 1: リソースのプリロード 改善方法 2: CSSファイルの分割 改善方法 3: 画像の最適化 ボ
キーボード操作を意識したHTML/CSSコーディング
この記事は 「Webアクセシビリティ Advent Calendar 2020」 5日目の記事です。 アクセシビリティ Advent Calenderの記事を寄稿するにあたり、少しの工夫であらゆるユーザーに対して優しいWebサイトを作れるようなHTML/CSSコーディングの方法についてまとめました。より多くの人にとって優しい・使いやすいWebサイトを作ることは訪れてくださるユーザーの方々だけでなく、クライアントにとってもユーザーの機会損失を防ぐことができるので多大なるメリットがあります。（よくコードが適当でもデザインが見えていれば良いって意見を聞くけれどそんなことはない） ただ、アクセシビリティを意識したHTML/CSSコーディングについてのまとめだと内容量が非常に多くなりZennなら記事より本で出したほうがベターになってしまうので、今回は数あるアクセシビリティの視点から「キーボード操作で
CSSのスゴ技！美しいグラデーションのボーダー、角丸や半円のテクニックを使用したチケットを実装する方法
CSSで実装された美しいグラデーションのボーダー、さらにはそれを角丸し、半円を加えたチケットを実装するスタイルシートのテクニックを紹介します。 グラデーションのボーダーは割と簡単に実装できますが、角丸にするのは目から鱗でした。また、簡単なJavaScriptで3Dも再現されています。 Gradient borders with curves and 3d movement in CSS by Medhat Dawoud 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. チケット自体の構築 2. グラデーションのボーダーを実装 3. 左右の半円を実装 4. カーソルの動きに応じたアニメーションを実装 この実装で学んだこと はじめに 2020年10月27日にNext.jsの初のグローバルユーザーカンファレンスが開催され
しっかり理解しておくと便利なCSSのテクニック、minmax()関数の使い方
minmax()はCSSの関数で、要素サイズの最小値と最大値を定義することができます。カードを配置するグリッド、記事を中央配置で画像を幅いっぱいにするフルブリードなど、ページのレイアウトやUIコンポーネントの実装に非常に便利です。 CSS Gridにおけるminmax()関数の実用的で、便利な使い方を紹介します。 A Deep Dive Into CSS Grid minmax() by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS Gridにおけるminmax()関数 minmax()のバリデーション minmax()をシンプルなグリッドに使用する auto-fitとauto-fillの相違点 minmax()の便利な使い方 考えなしに、auto-fitを使うことの弊害 終わりに
CSS）z-indexのベストプラクティスを考える
CSSのz-indexプロパティについてツイートしたところ、色んな人から参考意見をいただきました。 要素の重ね順の制御をその場しのぎで乗り切っているWebサイト、実はけっこう多いような気がします。今回はz-indexのベストプラクティスを自分なりに探ってみたいと思います。 z-indexに詳しいゼットインデクサーのみなさま、意見やアドバイスがあれば是非コメントを残していってください。 z-indexについて考えるときの前提 まず、ざっくりと考え方をまとめておきます。ウェブページの要素の重ね順を理解するには「スタッキングコンテキスト（重ね合わせコンテキスト）」を知っておく必要があります。 詳しくはz-indexとスタッキングコンテキストの関係 - ics.mediaがとても分かりやすいのですが、ここではざっくりとした説明だけ載せておきます。 z-indexは数字が大きい方が上にいくとは限らな
【17-3-2】テーブル関連の要素のためのCSSプロパティ
【17-3-2】テーブル関連の要素のためのCSSプロパティ 最終更新日：2018年06月02日 （初回投稿日：2016年05月06日） 前回は、テーブルじゃない要素に display: table や display: table-cell を指定して、まるでテーブルのように表示させましたね。 今回は テーブル関連のためCSSプロパティをまとめます。 displaypプロパティの流れの途中ですが、今回は displayから一旦離れて、テーブル用のCSSプロパティの話です。 margin、padding、border（displayもね）など、たいていのHTML要素に使えるプロパティがある一方で、特定の要素にしか使えない、その要素専用のプロパティもあります。 テーブル用のプロパティもそれ。テーブル関連要素でしか使いません。 テーブル関連の要素はスタイルもけっこう特殊です。 例えば、テーブルで
より良いタイポグラフィのための知られざるCSS
CSS組版 Vivliostyle ユーザーと開発者の集い 2020秋 https://vivliostyle.connpass.com/event/189940/
react-wc: Web ComponentsとReactで実現するCSS in JSの形 - uhyo/blog
CSS in JSはJavaScriptのコードの中にCSSを書く手法の総称で、CSS Modulesやstyled-componentsなどがよく利用されています。 この記事では、筆者がCSS in JSについて考えてたどり着いた一つの解を紹介します。 また、そのために作ったライブラリreact-wcを紹介します。 Shadow DOMを活用する筆者がたどり着いた考えは、Web Componentsをそのまま使えばいいじゃんというものです。Web ComponentsはいくつかのWeb標準の総称で、特にここで重要なのはShadow DOMです。 CSS in JSが達成すべき目標の一つはスタイルのローカル化（書いたCSSを特定のコンポーネントに対してのみ適用し、他に影響を与えないこと）ですが、Shadow DOMはこの機能を備えたWeb標準ですから、これを利用することでスタイルのローカル
Atomic CSS-in-JS
With utility/atomic CSS, we acknowledge it’s ok to couple the structure and presentation layers: when we need to change the button color, we modify the HTML, not the CSS. This tight coupling is also acknowledged in modern CSS-in-JS React codebases, but it seems the CSS world figured out first that the “separation of concern” of the web didn’t feel right. Specificity is also less a problem, as we u
CSS Flexboxでヘッダを実装する最近のテクニックのまとめ
CSS Flexboxで、Webサイトのヘッダを実装する最近のテクニックを紹介します。 ロゴやナビゲーションの配置、各要素間のスペースの与え方、使用可能なスペースに検索フォームを広げて配置など、Flexboxを効果的に使用した実装方法です。 Building Website Headers with CSS Flexbox by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ヘッダの構造を確認 Flexboxの動作 ヘッダの実装バリエーション Flexboxでヘッダを構築するための便利なテクニック Flexboxで実装したヘッダのテンプレート 終わりに はじめに 私が初めてHTMLとCSSの基礎を学んだとき、Webサイトのヘッダを実装することは非常に難しい作業の1つでした。2014年頃のこ
Working With JavaScript Media Queries | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! What’s the first thing that comes to mind when you think of media queries? Maybe something in a CSS file that looks like this: body { background-color: plum; } @media (min-width: 768px) { body { background-color: tomato; } } CSS media queries are a core ingredient in any responsive design. T
MDS - The Website of Matt D. Smith
I first had the idea for a new input pattern back in August, 2013. The idea was simple enough - animate placeholder text to show an icon beside the input so you don't lose your context. I had been doing 99% mobile work for the past 2 years and little things like this can really add up. I wanted a solution that saved space, looked clean and clear, but didn't forego usability. Even a simple username
CSSのユーティリティクラスと「関心の分離」——いかにしてユーティリティファーストにたどり着いたか（翻訳） - yuhei blog
Tailwind CSS作者のAdam Wathan氏による「CSS Utility Classes and "Separation of Concerns"」の日本語訳です。翻訳に当たって原著者の許諾を得ています。 2021年10月29日に全文再翻訳しました。 この数年の間で、私のCSSの書き方は、非常に「セマンティック」なアプローチから「ファクショナルCSS」と呼ばれるものに変わりました。 この書き方でCSSを書くと、多くの開発者からかなりの反感を買うことがあります。そのため、私がいかにしてここまでたどり着いたかを説明することで、その過程で得た教訓や洞察について共有したいと思います。 第1段階 「セマンティック」なCSS よいCSSのためのベストプラクティスとして、耳にするであろうことのひとつは「関心の分離」です。 考え方としては、HTMLにはコンテンツについての知識のみを含めるべきで
styled-componentsの採用と既存資産を捨てた理由 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。フロントエンドエキスパートチームの@nakajmgです。 私が所属しているフロントエンドエキスパートチームでは、現在 kintone の脱レガシーの一環として React + TypeScript 化に取り組んでいます。この取組の中で Scss で定義されている既存のスタイルを styled-components で書き直していくという決定をしました。 今回は styled-components の採用を決定するまでの過程や、既存の Scss ファイルの扱いについて検討した内容などを紹介します。 スタイル定義方法の検討 kintone にはユーザーが JavaScript でカスタマイズできる機能があり、ユーザーが行っているカスタマイズの中には、DOM 構造や CSS のクラス名に依存しているものもあります。このようなカスタマイズはサポートの対象外ではありますが、ユーザーにでき
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Rapidly build modern websites without ever leaving your HTML.A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. <figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800"> <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg"
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
