タグ

関連タグで絞り込む (39)

タグの絞り込みを解除

cssに関するkikiki-kikiのブックマーク (124)

  • 文章の折り返し指定のCSS最新版 - ICS MEDIA

    文章の折り返しはウェブ制作において意外と難しいものです。URLが文章に含まれている場合、URLがレイアウトを突き抜けてしまった、という経験をみなさんはお持ちではないでしょうか？　この記事では、国内のウェブ制作において「開発者が考えることが少なくてよくなる」安全なCSS指定を紹介します。 結論から説明すると、以下の指定を提案します。 body { overflow-wrap: anywhere; /* 収まらない場合に折り返す */ word-break: normal; /* 単語の分割はデフォルトに依存 */ line-break: strict; /* 禁則処理を厳格に適用 */ } この記事では上記の指定にいたった理由と、折り返しの理解について必要なoverflow-wrapとword-breakプロパティを中心に解説します。 overflow-wrap overflow-wrapは

    文章の折り返し指定のCSS最新版 - ICS MEDIA

  • Webテキストを理解したい - Qiita

    .button { display: inline-grid; place-items: center; border-radius: 9999px; width: min(30vw, 400px); min-height: 44px; background-color: darkcyan; font-family: "Noto Sans JP", sans-serif; color: white; } place-itemsで中央寄せしてるし、 テキストには色しか指定してないのに なんか上の余白の方が広いですね。。 line-height: 1 を指定してみても結果は同じです。 なんでなんでしょうか font-sizeって何なん Webテキストにはそれぞれ emスクエア（UPM / units per emとも呼ばれる） という相対的なサイズの「ボックス」があるみたいです。 （もともとは

    Webテキストを理解したい - Qiita

  • ダークモードを巡るあれこれ：ダークモードの明るい未来 - enechain Tech Blog

    この記事は enechain Advent Calendar 2023 の18日目の記事です。昨日は okp さんの「経験が裏目に？！大手IT企業出身PdMが3カ月で学んだこと」でした！ はじめに なぜ、今ダークモードか ダークモードおさらい ダークモードの歴史 ダークモードって意味あるの？ 省電力の効果について 文字が見やすい＆目への負担が少ない ダークモードの利用率 各サービスのダークモードの実際 2023版 X Gmail ミュージック & App Store Instagram iSPEED ダークモード未対応のアプリ＆ダークモードのみのアプリ ダークモード未対応のアプリ ペイ系 ショッピング系 ダークモードのみのアプリ ダークモードの行方 まとめ はじめに 私はenechainのプロダクトデザイナーで、デザインマネージャーの近藤です。今年の10月に入社しており、もうすぐ3ヶ月が経

    ダークモードを巡るあれこれ：ダークモードの明るい未来 - enechain Tech Blog

  • CSSの最新トレンドにおける現状のまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証ブラウザなど


    CSSの進化は速く、ここ1,2年はさらに速くなりましたね。その要因の一つがIEのサポート終了で、現在はエバーグリーンのブラウザ︵自動で最新版にアップデートするブラウザ︶となり、モダンCSSの機能がたくさん使用できるようになりました。 2023年、CSSの現状調査をおこなった結果をまとめた﹁State of CSS 2023﹂を紹介します。今年は例年より早いですね。 State of CSS 2023 State of CSS 2023は、State of CSSでおこなわれたアンケートの調査結果︵9,190人分︶をまとめたものです。 まずは、アンケートに回答された人の属性。 世界中の人がアンケートに参加しており、日本人も参加しています。年齢は25-44才が多く、性別は男性が多めです。
    CSSの最新トレンドにおける現状のまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証ブラウザなど

  • CSS Modules で作る SVG Icon Component

    この<Icon />コンポーネントを使用すると、以下キャプチャのようになります。 UI ライブラリから提供されているものを使用する選択肢もありますが、デザイナーが用意した SVG を使用する場合は自作する必要があります。自作<Icon />コンポーネントのフォルダ構成は、概ね以下のようになるでしょう。 SVG Icon Component をどう作るか アイコン画像を背景画像ではなく SVG にする理由は「塗り色」を動的に変更したいためです。新色を追加するとき、全種のアイコン画像を追加するのは大変です。SVG であれば、要素に対しpath { fill: #ff0; }のように CSS 指定をすることで動的に塗り色を変更できるため、このようなケースでは「インラインレンダリング」が選択できます。インラインレンダリングであれば、塗り色だけでなくサイズも動的に変更できます。 ただし、インラインレ

    CSS Modules で作る SVG Icon Component

  • これは知っておくとかなり便利！ details要素にname属性を与えると、連動して開閉するアコーディオンを実装できます

    <details>要素でアコーディオンを簡単に実装できますが、懸念点は複数のウィジェットが個別に開閉してしまうことです。1つ目を開いて、2つ目を開くと、1つ目は開いたままです。1つ目を閉じるには、1つ目をクリックして閉じる必要がありました。 しかし、<details>要素にname属性を与えると、すべてのウィジェットを連動して開閉させることができます。1つのウィジェットだけを開くことができる排他的アコーディオンをHTMLとCSSだけで実装する方法を紹介します。 Exclusive Accordion by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 アコーディオンの実装 1つのウィジェットだけを開くことができる排他的アコーディオン 排他的アコーディオンのポリフィル アコー

    これは知っておくとかなり便利！ details要素にname属性を与えると、連動して開閉するアコーディオンを実装できます

  • 何番目系の便利なCSSまとめ - Qiita

    最初 :first-child 最初の要素（親要素から見て、子要素すべての最初） デモ :first-of-type ある要素の最初（親要素から見て、ある子要素の最初） デモ 最後 :last-child 最後の要素（親要素から見て、子要素すべての最後） デモ :last-of-type ある要素の最後（親要素から見て、ある子要素の最後） デモ 1個だけ :only-child 1個だけ子要素がある（親要素から見て、子要素が1個だけある） デモ :only-of-type 1個だけある子要素がある（親要素から見て、ある子要素が1個だけある） デモ X番目 :nth-child(X) X番目 デモ：５番目 :nth-of-type(X) ある要素のX番目 デモ：５番目 :nth-child(Xn) Xの倍数 デモ：2の倍数 :nth-of-type(Xn) ある要素のXの倍数 デモ：2の倍数

    何番目系の便利なCSSまとめ - Qiita

  • 「font-sizeの指定はpxとremどちらを使うべきか？」問題に対する回答


    こんにちは。TAK(@tak_dcxi)です。 今回は SNS で頻繁に話題になる﹁font-size の指定はpxとremどちらを使うべきか？﹂問題について。 自分が観測している限りだと、 font-size の指定はpxとrem どちらを使うべきか？ Web デザイナーはコーディングの知識があったほうがいいか？ jQuery はオワコンなのか？ 実装者はピクセルパーフェクトに拘らないとダメか？ h1 タグはどこに使うべきか？ あたりは四半期に一度は話題になっている感覚がありますね。 おそらくこの記事を読んでいる方や、もしくはタイムラインにこの記事の Twitter カードなんかが流れてきてウンザリしている方も多いことでしょう。僕も正直﹁またこの話題か…﹂という感想ですが、頻繁に話題になるということはそれだけ意見が割れているということなので、自分なりの見解をまとめるためにもこの記事
    「font-sizeの指定はpxとremどちらを使うべきか？」問題に対する回答

  • CSSの単位px、em、remはどれをどこで使用するのがよいか、ピクセルとアクセシビリティにおける意外な真相


    CSSの単位px、em、remは、どれをどこで使用するのがよいか。 font-sizeの値にはどの単位を使用していますか？ ほかにもメディアクエリを定義する時、マージンを定義する時、widthやheightを定義する時、使用する単位はアクセシビリティに配慮する必要があります。 The Surprising Truth About Pixels and Accessibility by Josh W. Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSでpxとemとemの各単位がどのように機能するか アクセシビリティに関する考慮事項 どの単位をどこで使用すればよいのか どの単位がベストなのかが明らかでない場合 簡単にできる小技とメンタルモデル ボーナス: remを使用すると便利なテクニック はじめにC
    CSSの単位px、em、remはどれをどこで使用するのがよいか、ピクセルとアクセシビリティにおける意外な真相

  • 【CSS】CSSの値と単位が新しくなっていますが、ついていけてますか？ - Qiita


    はじめに 最近のCSSのアップデートは目覚ましいものがありますが、 みなさんは、CSSの値と単位がここ1年くらいで大きく変わっていることはご存知ですか？ Dynamic viewport が追加されたり、math 関数が追加されたりなどの大きな変更は、ご存知かもしれないですが、calc()で ネイピア数eや 円周率 πなどが使えるようになったり、 フォントに相対的な長さ単位が追加されていたりと細かい変更も多くあります。 そのため、この記事では、CSS Values and Units Module Level 3 から CSS Values and Units Module Level 4の変更点を中心に紹介しようと思います。 Viewport単位 CSS Values and Units Module Level 3 から CSS Values and Units Module Le
    【CSS】CSSの値と単位が新しくなっていますが、ついていけてますか？ - Qiita

  • CSS Grid Layout を極める！（基礎編） - Qiita

    0. はじめに CSS Grid Layout（グリッドレイアウト）は、2次元レイアウト を、HTML/CSS を使って簡単・自由に操作できる、CSSの新しい機能です。 格子状のマス目のグリッドに好きな順番に配置したり結合したりすることで、様々なレイアウトが可能になります。 例えば、こんな簡単なHTMLで・・・ <body> <h1>タイトル</h1> <article>記事1</article> <article>記事2</article> <article>記事3</article> <article>記事4</article> <nav>ナビ</nav> <footer>フッター</footer> </body> CSSをちょっと書けば、こんなレイアウトが出来てしまいます！ 当記事では、こんなレイアウトを可能にする CSS Grid Layout の解説をしていきます。 尚、CSS

    CSS Grid Layout を極める！（基礎編） - Qiita

  • I made 100 CSS loaders for your next project

    You either make a super fast website/application or you use loaders. I think most of us fall into the second category. Now the question is: what loader should I use? the "loading" text, the 3 dots, a progress bar, the Batman symbol?? You no more need to bother yourself searching for loaders. Find below a collection of 100 different CSS loaders. From the simple one to the more fancy one, you will f

    I made 100 CSS loaders for your next project

  • クローキング、不正な JavaScript リダイレクト、誘導ページ - ウェブマスター ツール ヘルプ


    フィードバックを送信 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 Google ウェブ検索のスパムに関するポリシー Google のスパムに関するポリシーは、ユーザーを保護し、検索結果の品質を高めることを目的としています。Google ウェブ検索の検索結果︵Google がウェブ全体から検出したウェブページ、画像、動画、ニュース コンテンツなどのコンテンツ︶に表示されるようにするには、Google 検索の全体的なポリシー、またはこのページに記載されているスパムに関するポリシーに準拠している必要があります。これらのポリシーは、Google 独自のプロパティに表示されるものも含め、すべてのウェブ検索結果に適用されます。 Google では、自動システムと、必要に応じて行われる人間による審査によって、ポリシーに違反しているコンテンツおよび動作の両方を検出して
    クローキング、不正な JavaScript リダイレクト、誘導ページ - ウェブマスター ツール ヘルプ

  • WebAIM: CSS in Action - Invisible Content Just for Screen Reader Users

    CSS in Action Invisible Content Just for Screen Reader Users You are here: Home > Articles > CSS in Action: Invisible Content Just for Screen Reader Users Introduction There are occasional instances where content should be made available to screen reader users but hidden from sighted users. In the vast majority cases, content that is available visually should be available to screen reader users, a

  • これからはメディアクエリ（pointer）でレスポンシブデザインを作ろうよ


    自分は自分のサイトのデザインを1ヶ月に1回はコロコロと変える派なのですが、その都度思っている事がありました。それは﹁レスポンシブデザインはデバイス幅を基準にCSSを切り替えるのが正しいのか﹂という事です。 よくあるCSSですと、 div { font-size: 1rem } @media (min-width: 640px) { /* 画面幅がある程度広いデバイスで見たら文字サイズが1.5rem */ div { font-size: 1.5rem } } このような感じでデバイスの横幅を基準に、スマホで見た場合と、PCで見た場合の画面のデザインを切り替えています。しかし、自分のサイトを iPad 等で見た時にPC版のデザインが表示される事に違和感を抱いていました。マウス操作とタッチパネル操作の差など、PCとは全然勝手が違うのにデバイス幅だけでPCのデザインを出して欲しくなかったのです。
    これからはメディアクエリ（pointer）でレスポンシブデザインを作ろうよ

  • styled-components の :&>before(記号) まとめ


    styled-components の 入れ子の中で使う記号(&>+~)や、擬似要素 before/after, 擬似クラス hover, さらには & & といった書き方、これがいつも分からなくなるのが最近の悩みです。 きっと CSS を習得するより先に React の勉強を始めた方は同じような悩みを持っているのではないでしょうか。 僕はいつもこの記号がわからなくなるので、ちゃんと調べてメモすることにしました。 その結果、基本的には styled-components の中でSCSS の記法が使えるだけっていう風に覚えておけばいいことがわかりましたが、一部そうでないものもありました。 それについて順を追って説明していきます。 (TIPS: >+~についてググるとき直接記号を入れると検索されにくいですが、これらは隣接セレクタと呼ばれておりその言葉で検索すると比較的ヒットします。) CSS
    styled-components の :&>before(記号) まとめ

  • Stitches — CSS-in-JS with near-zero runtime

    PerformantStitches avoids unnecessary prop interpolations at runtime, making it more performant than other styling libraries. Feature-richPacked full of useful features like theming, smart tokens, css prop, as prop, utils, and a fully-typed API.

    Stitches — CSS-in-JS with near-zero runtime

  • Sassを使わずにPostCSSだけでCSSを書く理由


    はじめに Sass とは Sass は現在の CSS のコーディング環境のデファクトスタンダードである。 SASS 記法とSCSS 記法の2種類がある。︵現在主に利用されているのはSCSS 記法︶ CSS を効率よく書くための便利な機能が含まれている。 コンパイルライブラリはnode-sass(libsassに依存)が最もシェアが多い。 libsass が先日deprecatedになったため、今後はsass(旧:dart-sass)のシェアが伸びると予測される。 PostCSS とは PostCSS 自体は、CSS を加工しやすいようにパースし、結果を CSS として出力する機能のみ提供する。 最新の CSS の polyfill として利用できるものから、ジョークプラグインまで様々なプラグインが公開されている。 Sass との組み合わせでもよく利用される。Autoprefixer
    Sassを使わずにPostCSSだけでCSSを書く理由

  • [Nuxt.js] postcss-nesting を使用する方法 - やくだつブログ


    そろそろ脱 Sass(SCSS)をしていきたいなと思いまして PostCSS を積極的に使うようにしています。 もっとも使用頻度の高い﹃セレクタのネスト﹄から導入しようと調べたところ、postcss-nested と postcss-nesting のふたつがありました。なにが異なるのか。 簡単にいうと postcss-nested は Sass の気分で書けるもの、postcss-nesting は CSS Nesting Module に準拠した形のものです。 // postcss-nested h1 { span { color: red; } } // postcss-nesting h1 { // & が必要！ & span { color: red; } } nesting selector として入れ子にする際に & が必要になります。 postcss-nested のほうが
    [Nuxt.js] postcss-nesting を使用する方法 - やくだつブログ

  • All the user-facing states

    I find myself needing a reference like this more often than not lately. So, here’s a blog acting as augmented memory—I’ll update it as I encounter more user-facing states in the wild. What user-facing state is User-facing state is what someone experiences when they interact with (or try to interact with) an element in some capacity. It is reactive, helping to communicate the ways in which somethin

    All the user-facing states
  • 1 2 3 4 5 6 7 次のページ

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.