文章の折り返し指定の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]Adobeのサイトのあのかっこいいヘッダバーを実装するチュートリアル
ホバーエフェクトのキャプチャ HTML マークアップは非常にシンプルで、内部にリンクを配置したただの見出しです。 <div class="module"> <h2>Community <a href="#">Blue</a></h2> <!-- stuff in module --> </div> CSS ヘッダの基本となるスタイルで、a要素の左にborderでホワイトの領域を設定します。 .module h2 { background: #ccc; padding: 0 0 0 10px; font-size: 16px; /* Thickness of the bar more easily achieved with line-height since padding would push link inward. */ line-height: 2; } .module h2 a
ウェブサイトに演出は不要!? ユーザー設定にレスポンシブ対応できる新しいCSS - ICS MEDIA
画面サイズだけではなく、デバイスのユーザー設定に対してレスポンシブにできる新しいCSSのメディアクエリーが登場しています。スマートフォンやパソコンで、画面サイズに応じてレイアウトが変化する「レスポンシブ・ウェブ・デザイン」はほとんどのウェブサイトで実装されているでしょう。新しい世代のレスポンシブ手法は、画面サイズだけでなくユーザー設定に対して挙動やスタイルを変更させることができ、ユーザービリティーやアクセシビリティーの向上に役立ちます。 本記事では事例とあわせて最近のレスポンシブ手法を紹介します。 この記事で紹介すること ダークモード対応 モーションの無効化設定 iOSのフォントサイズ変更 ダークモード対応 OSには外観モードの設定項目があります。Windows 10やmacOS、iOS、Androidのいずれもライトモードとダークモードの切り替え機能が提供されています。ライトモード・ダー
CSSの新しいプロパティ「content-visibility」レンダリングのパフォーマンスが向上する
Webページのパフォーマンスを向上させることは、CSSでも可能です。去年の暮れからChromeで利用できるようになったCSSの新しいプロパティで、2021年現在Edge, Operaにもサポートされています。 読み込みパフォーマンスを向上させるために最も効果があるCSSの新しいプロパティcontent-visibilityについて紹介します。 content-visibility: the new CSS property that boosts your rendering performance by Una Kravets, Vladimir Levin 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに content-visibilityのサポート状況 CSS Containmentとは content-visi
Tailwind CSSが私には合わなかった理由
ここ1,2年で、Tailwind CSSを使用する人が増えてきました。Tailwind CSSはユーティリティファーストのフレームワークで、いくつかのclassを組み合わせることでUIコンポーネントやレイアウトを簡単に実装できます。 Webデベロッパーによる、Tailwind CSSが私には合わなかった理由を紹介します。 Why Tailwind Isn't for Me by Jared White Tailwind CSSについて詳しく知りたい人は、以前の記事をご覧ください。 Tailwind CSSの便利な使い方、レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる CSSを書くのが劇的に楽になる！ユーティリティファーストのCSSフレームワーク「Tailwind CSS」 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得
これで解決！height: 100vh;を定義したのに、iOSのスマホで高さいっぱいに表示されないのを解決するCSSのテクニック
iOSのスマホでheight: 100vh;を定義してビューポートの高さいっぱいに表示したいのに、アドレスバーが表示されているとその分下が隠れて表示されてしまい、高さいっぱいにならないのを解決する方法を紹介します。 CSSのみのテクニックで、JavaScriptは必要ありません。 height: 100vh;だけでなく、min-heightやmax-heightでも機能します。 PostCSS 100vh Fix -GitHub PostCSS 100vh Fix 注意点 使い方 PostCSS 100vh Fix PostCSS 100vh Fixは、100vhのiOSの挙動（バグ？）を修正するPostCSSのプラグインです。ピュアCSSのソリューションで、JavaScriptは必要ありません。 高さいっぱいに表示したい時に、height: 100vh;だけを定義してもiOSでは期待通り
Min and Max Width/Height in CSS
Oftentimes, we want to limit the width of an element relative to its parent, and at the same time, to make it dynamic. So having a base width or height with the ability to make it extend based on the available space. Let’s say, for example, that we have a button that should have a minimum width, where it shouldn’t go below it. This is where the maximum and minimum properties become handy. In this
CSSのこのアイデアはすごすぎる！Webページのトラッキング・解析ができるスタイルシート -Crooked Style Sheets
結果ページ どのリンクをいつクリックしたのか、いつホバーしたのか、指定エリアでどのくらいマウスを動かしたのか、フォームに特定の文言を入力したのか、チェックボックスをクリックしたのか、ブラウザは何か、解像度はいくつか、ディスプレイの向きはどっちなのか、などの情報が表示されました。 ※出力する際には、PHPが使用されています。 Crooked Style Sheetsの仕組み Crooked Style Sheetsは、外部CSS一つを加えるだけで、Webページのユーザーに関するさまざまな情報を取得できます。 基本的な仕組み CSSではurl()関数を使用して、外部リソースを追加できます。url()関数の値は呼び出された時のみロードされるため、これをリンクがクリックされた時に利用します。 リンクを記述するHTMLは、要素を特定できるようにidを与えます。
抽象化を避けるCSS設計方法論「Enduring CSS」 第1回
本連載では、Enduring CSSというCSS設計方法論を紹介します。Enduring CSSは、Ben Frain氏の著書で、末永く破綻させずにサイトのCSSを設計するにはどうすればよいか。その方法論をまとめたものです。電子書籍でも販売していますが、Webサイトで全ての内容が公開されていますので、無料で全内容を確認可能です。 Enduring CSS by Ben Frain [Leanpub PDF/iPad/Kindle] Architect CSS and scale CSS with the ECSS CSS methodology CSS設計方法論（CSS methodology）と言うと、OOCSS、BEM、SMACSSの3つが著名なものと言えるのではないでしょうか。 An Introduction To Object Oriented CSS (OOCSS) – Smas
Reactを使ったモジュラーCSS : CSS-in-JSとCSS Module | POSTD
Buffer のメンバーはReactが大好きで、フロントエンドの多くのコードベースを徐々にReactに移行させています。ReactにFluxを加えると、モジュラー形式の小さなアプリでできた複雑なプロダクトを構築するための、とても健全な方法になると思います。そこで、１つ１つの新しい小さなアプリと機能を、大規模な構造体に追加される、Reactの新しいブロックと考えます。 私は最近、このような新機能の１つに取り組んでいますが、React＋Fluxのアプリケーションを作るのがいかに簡単であるかと、その理由について、さらに夢中になってしまいました。Reactを使うと有意味なコンポーネントを集めてUIを宣言的に構築するのが楽になり、Fluxはその混成体に妥当なデータフローをもたらします。 複雑なアプリケーションを作るときに発生する課題について多くの考察がなされましたが、React＋Fluxの組み合わせ
メンテナンス性に優れ、拡張性を備えたCSSを書くために -メンテナブルCSS
メンテナンス性に優れ、拡張性を備えたCSSを書くための「MaintainableCSS」を紹介します。 あるスタイルを修正する際に他に影響を与えてしまわないか、せっかく書いたコードが先祖帰りしないか、似たページをつくる時にコードを再利用するのに問題はないかなど、全部はもちろん個々でも非常に参考になると思います。 MaintainableCSS 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 メンテナブルCSSにすることのメリット 1. はじめに 2. セマンティック 3. 再利用 4. ID 5. コンベンション 6. モジュール 7. ステイト 8. バージョニング メンテナブルCSSにすることのメリット モジュール化、カプセル化 スタイルはあなたの許可なしで、他のスタイルの影響を受けません。 どんなデザインの要件でも あなたの必要
「CSSが難しい。。」「CSSが面倒。。」 と言ったエンジニアさんにもオススメのCSS設計！ 「APBCSS（Atomic Parts Base CSS）」が良い感じ！
このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 「CSSが難しい。。」「CSSが面倒。。」 OOCSS、BEM、SMACSS… Layout、Component、module…. 「色々ありすぎてわかんねーよ！」「サクッと作れないよ。」「ルールが分かりづらい。。」 などなど、お困りのエンジニアさんにもオススメのCSSアーキテクチャが、 APBCSS となります！ APBCSS http://apbcss.com/ APBCSS は Atomic Parts Base CSSの略で「エーピービーシーエスエス」と呼びます。 その名の通り、Atomic Designが ベースとなるように設計されたCSSアーキテクチャの一つとなります。 Atomic Design http://bradfrost.com/blog/post/
これが知りたかった！よく使うUI要素をFlexboxを使ってシンプルに簡単に実装するチュートリアル | コリス
Flexboxの基本的な使い方から、ヘッダ・フッタ・ナビゲーション・タブ・カードなど、Webページでよく使うUIコンポーネントをFelxboxで実装するチュートリアルを紹介します。 2016年1月12日にIEの古いバージョンのサポートが終了し、Flexboxをそろそろ使うか、と考えている人も多いと思います。 Flexbox Patterns Flexbox Patterns -GitHub Flexboxの実装に役立つ各プロパティの説明は、下記が分かりやすいです。 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 「display: flex;」からはじめよう 01. 要素を水平に配置する 02. Flexboxで実装する「タブ」 03. Flexboxで実装す
[CSS]Flexboxのこれが知りたかった！今まで出来なかったことがシンプルで簡単に実装できるスタイルシートのまとめ
今まで出来なかったこと、かなり複雑なコードでスクリプトを併用しないと実装できなかったことをシンプルなHTMLとCSSで実装するFlexboxのテクニックを紹介します。 Solved by Flexbox Solved by Flexbox -GitHub 各コードの対応ブラウザは、Flexboxを使用しているため下記の通りです。 Chrome 21+ Opera 12.1+ Firefox 22+ Safari 6.1+ IE 10+ コードのライセンスはMITライセンスです。 「clearfix」「overflow: hidden」から卒業 高さが分からないフッタを常に最下部に表示 高さが分からない要素を天地左右の中央に配置 レスポンシブ対応の3カラムをシンプルなコードで実装 Flexboxを使った柔軟なグリッド 入力フィールドとボタンの高さを揃えて、くっつけて配置 「clearfix」
![[CSS]Flexboxのこれが知りたかった！今まで出来なかったことがシンプルで簡単に実装できるスタイルシートのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/ee61fe7384f341a2c6e8f8141198967ab8c04f2f/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016021702.png)
HTTP2 を前提とした HTML+CSS コンポーネントのレンダリングパス最適化について | blog.jxck.io
Intro Chrome が予定している <link rel=stylesheet> の挙動の変更について、 Google Chrome チームの Jake が、興味深いブログを上げている。 The future of loading CSS この内容は、単に Chrome に対する変更だけではなく、 HTTP2 によって変化する最適化手法と、それを最も活かすための HTML, CSS の構成についてのヒントがある。 今回は、この内容を意訳+補足解説し、本サイトに適用していく。 HTTP/1.1 時代の CSS HTML 自体がコンポーネントを意識した作りになっている場合は、自然と CSS も class などを使いコンポーネント単位に作ることができるだろう。 しかし、 HTTP/1.1 では、リクエストの数を減らすために全ての CSS を 1 つ(もしくは少数個)に結合する最適化が主流だ
Style Validator - to reduce patch.
Style Validator is a new html/css validator with chrome extension or bookmarklet."Validation in the Browser". Style Validator is a new CSS Validator that check computedStyle NOT syntax. Chrome Extension (for only chrome browser) Style Validator 0.2.5 Differences from W3C CSS Validator and Existing html/css Validator. This will NOT detect syntax error. Instead, detect layout broken CSS Properties.
[CSS]IE8もサポート、レスポンシブ対応のさまざまなレイアウトを手軽に使いたい人にぴったりな超軽量スタイルシート -GridLayout
最近のWebページでよく使用されるシンプルな1カラム、マルチカラム、カード型のレイアウトをはじめ、フッタが常に最下部に表示されるスティッキー、Webアプリなど、人気のグリッドレイアウトを簡単に実装できる超軽量スタイルシートを紹介します。 もちろんレスポンシブ対応で、古い環境（IE8+, iOS5+, Android3+）もサポートされています。 レイアウト用だけのフレームワークを必要としている人にはぴったりだと思います。 GridLayout GridLayout -GitHub サポートするのがモダンブラウザだけであれば、Flexboxでレイアウトをするのがベストです。 Flexboxについては、下記ページで徹底的に解説しているので参考にしてください。 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 GridLayoutの主な特徴 GridLayoutのデモ
![[CSS]IE8もサポート、レスポンシブ対応のさまざまなレイアウトを手軽に使いたい人にぴったりな超軽量スタイルシート -GridLayout](https://cdn-ak-scissors.b.st-hatena.com/image/square/b5ba934ae36a322ae8ab722a40c75aec7f103caf/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015082103.png)
シンプルなHTMLで実装することにこだわったレスポンシブ対応の汎用性に優れたフレームワーク -Turret
シンプルなHTMLでセマンティックに実装することにこだわった、アクセシブルでレスポンシブ対応のサイトをより簡単に制作するためのフレームワークを紹介します。 MIT Licensesで、個人でも商用でも無料で利用できます。 Turret Turret -GitHub Turretの特徴 Turretはアクセシブルで、セマンティックで、レスポンシブ対応のサイトをより簡単に制作するためのフレームワークです。 レスポンシブ対応 読みやすいマークアップを使い、レスポンシブ対応のグリッドやエレメントを汎用性に優れたclassを使って実装しています。 Design First 直感的なユーザインターフェイスのために、文字の定義とカラーパレットにフォーカスしています。 No JavaScript スクリプトは使用せず、LESSベースでネイティブのWeb要素を採用しています。 セマンティック マークアップは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript/CSS 2015 Autumn
Webページでよく使うさまざまなコンポーネントが簡単に利用できるCSSベースのフレームワーク -Materialize
