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

はじめに 2022年6月15日にInternet Explorerのサポートが終了しました。 (IEの完全無効化は2023年2月14日予定) そのこともあり2022年は今までとは異なるCSSプロパティを使用したモダンな実装例の記事や発信をよく見かけた気がします。 ただしこれらは従来の実装方法でもできる表現であったので、「この記事はあとでしっかり読もう」とブラウザの新規タブで開いてそのまま塩漬けにしたり、ブックマーク的に"いいね"した該当ツイートを読み返すことなく流していたので、ここで一度サルベージしてその他追加したものを備忘録としてまとめました。 要素の中央配置

The evolution of scalable CSSA deep dive into the problems with scaling CSS on large projects. Understand the evolution of CSS best practices. IntroductionHow we write and think about CSS has changed significantly since the web’s beginning. We’ve come a long way from table-based layouts, to responsive web design, and now into a new era of adaptive layouts powered by modern CSS features. Managing a

Safari 15.4（最新は15.5）で新しいビューポート単位「lvh」「svh」がサポートされました。ビューポートを基準にした単位で、この単位を使用することで、iOSのSafariで100vhがビューポートの高さではないという仕様に対応できます。 今まではCSSの-webkit-fill-availableがその対応方法でしたが、ネストされた要素やcalc()内では使用できません。新しいビューポート単位を使用すると、そういった問題もなくなります。 The Large, Small, and Dynamic Viewports by Bramus 2021年の記事ですが、Safari 15.4でこれらの新しいビューポート単位がサポートされたので、このタイミングで紹介します。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Chromeに新しく実装された「CSS Overview」が非常に便利なので、紹介します。 表示しているページのCSSの概要、カラー、フォント、メディアクエリ、未使用の宣言が一覧でき、制作したページの検証やスタイルガイドとしても役立ちます。 Chromeの新機能「CSS Overview」 Fyi: New in Chrome: CSS Overview Chromeの新機能「CSS Overview」の準備 Chromeの新機能「CSS Overview」の使い方 Chromeの新機能「CSS Overview」の準備 まずは、Chrome デベロッパーツールを開き、右上の歯車アイコン（Settings）をクリックします。

先月からエンドユーザーに段階的に適用され始めたFacebookの新しいUIデザイン、そこで見つけたCSSのテクニックを解説した記事を紹介します。 CSSの実践的なテクニックが数多く使用されており、パフォーマンスや何らかの制約による実装時などの参考になると思います。 CSS Findings From The New Facebook Design by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに アバターにSVGを使用する マージンの代わりにスペーサーdivを使用する CSSフィルターの使用 シャドウに画像を使用する CSS変数の多用 テキストの省略表示（複数行テキストの切り捨て） ホバーエフェクトにdivを使用する insetプロパティの使用 dir=autoとCSSの論理プロパティ

フロントエンドエンジニアのid:ninjinkunです。この記事は一休.comアドベントカレンダーの1日目の記事です。 一休.coｍレストランの管理画面リニューアルプロジェクトにおいて、CSSフレームワークのBulmaを導入しました。結論としては、採用して良かったと思っています。 このエントリではBulmaを選定した理由と、採用後に見えたPros / Consについて述べたいと思います。 なお今回リニューアルした一休.comレストランの管理画面の概要は以下の通りです。 レストラン店舗向けの管理画面 店舗の方と一休スタッフの両方が使う DAUは数千の規模 主な用途は在庫の管理と、プラン（コース）や席の管理 現在は店舗を限定してリリース済み 具体的には以下のような画面で構成されています。 UIフレームワークは必要か？ まずそもそもUIフレームワークは必要かという議論があります。 今回のプロジェ

エラーメッセージを実装する際、エラーがある時とエラーがない時の区別は「:empty」や「:blank」を使用すると、非常に簡単にスタイルを定義することができます。 「:empty」と「:blank」、その違いと実際にどのように使用するのか、どちらが便利なのかを紹介します。 :empty and :blank 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 私は誤解していた 「:empty」と「:blank」の違い 「:empty」と「:blank」を実際に使用する場面 「:empty」の方が十分ではないと思った理由 「:empty」と「:blank」のサポートブラウザ まとめ 私は誤解していた 私は1ヵ月前のツイートで、「:empty」と「:blank」についてひどい誤解をしてました。 「:empty」は有用ではなく、「:bla

z-indexなんぞやを覚えてしまった不良息子をどう更生させるか、その感動秘話。 → stack context に閉じ込めたり、portalで追い出せばいいと思う。

日本語で「CSS設計」を検索すると、記事やつぶやきなどでセレクタの命名規則に関する話題が多いです。 CSSを設計する上で、命名規則は重要な要素でしょう。 簡単なセレクタ名だと他のスタイルと重複する可能性もあります。他のスタイルと重複しないようにセレクタの子孫数を増やしてしまうと、今度はスタイルの取り回しが悪くなります。 またデザインをコンポーネントに分ける粒度について紹介されていますが、命名規則の分け方のように紹介されているよう感じます。 論理的に構造をわけて命名していくため、覚えやすく、伝えやすさもあわさって、現在の「CSS設計 = 命名規則」のような構図ができあがったと感じています。 CSS設計は命名規則だけか 命名規則はCSS設計において、重要な要素です。 しかしCSSは命名規則させ気を付ければ良い、というものではありません。 私は、すでにあるサイトの一部のコンテンツの作成やすでに用

今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！要素の四隅の角を丸めるためのCSSプロパティー「border-radius」。ボックスや画像などの要素に対して適応でき、角丸にしたりまん丸にしたりと、様々な表現が可能です。このプロパティーが使えるようになってから、どれだけコーディングが楽になったか…！今回はそんなborder-radiusの基本的な使い方と、応用表現を紹介します！ 無難で王道！正円の円弧を使った角丸border-radius は「border」とついているものの、border プロパティーの指定がなくても大丈夫。background によって与えられた背景や、img 要素で指定された画像の四隅も丸まめられます。 四隅に同じ値の丸みを与えるなら border-radius: 10px; と記述すれば OK。半径 10px の正円の円弧をベースにした角丸

normalize.css 6.0.0 のリリースで、それまで入っていた、純粋なブラウザ間の差異を吸収する目的からは少し外れた "opinionated" なスタイル定義がすべて削除されました。 所謂、リセット CSS （Reset CSS） の一種である 「normalize.css」 は、Web 制作界隈の方々にとっては馴染みのあるスタイル定義集で、お世話になっている方も多いのではないでしょうか。 先日、この 「normalize.css」 の最新版として、「6.0.0」 がリリースされましたが、作者である Jonathan Neal 氏の意見的意味合いが強かったスタイル定義がすべて削除されるなど、比較的大きな修正が入っています。 Normalize.css : Make browsers render all elements more consistently. necolas/n

リセットCSSとは、Google ChromeやSafariなどブラウザがあらかじめ持っているデフォルトのCSSを、リセットするための手法・設定です。 ブラウザ毎に設定されているフォントサイズやマージン、パディング等の設定をまっさらにする役割を持ちます。 今回は、2016年で最もダウンロードされたリセットCSSトップ5をご紹介します。 各ブラウザのデフォルトCSSの一覧は以下サイトをご参照ください。 デフォルトCSS一覧（たまちゃんHTMLのおうち） リセットCSSを使うメリット リセットCSSを設定することで、ブラウザによってスタイルが違う点を考慮しなければいけない問題を解決できます。また、もともとデフォルト設定されているCSSを前提に検討する必要も無いのでコーディングが楽になります。 リセットCSSの人気度ランキング 人気度が高いものから挙げると以下のようになります。 1. Eric

Webページを制作にする時に、マージンやパディングをどのようにつけるか悩むことがあります。2カラムの隙間は、左パネルの右マージンorパディングなのか、右パネルの左マージンorパディングなのか。 Web制作の今までの考え方がきっと変わる、モジュール式のアトミック デザインにおけるHTMLとCSSの実装のロジックを紹介します。 Learning from Lego: A Step Forward in Modular Web Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様・元サイト様にライセンスを得て翻訳しています。 最近のWeb制作の手法は、数多くあるフレームワークやUIキットからあらゆる種類のコンテンツのブロックを組み立てています。しかしながら、モジュール性と汎用性はまだWeb要素レベルでは達成されていないと言えるでしょう。 LEGOブロックの考え方を

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

どのCSSプロパティが世の中のWebサイトでよく使われているのか？ マイクロソフトがクローラーから得た統計を「Global CSS Property Usage」として公開 Webサイトをデザインする際、HTMLでテキストを構造化した上で外観を整えるためにCSSを利用します。 いまのCSSには多彩な表現力を備えたさまざまなプロパティがある一方、最新のCSSに未対応のブラウザに気を使いつつも新しいプロパティを用いるべきかどうか、歴史的経緯からブラウザ固有のベンダプレフィクスを用いるべきかどうかなど、どのプロパティを実装に用いるのがよいか判断に迷いがちです。 その判断材料になりそうな情報が、マイクロソフトから公開されました。「Global CSS Property Usage」です。このデータは、マイクロソフト自身がWebブラウザの開発を進めていく上でどのプロパティを優先して実装していくか、そ

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ

これからのCSSレイアウトはFlexboxで決まり！FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ 対応ブラウザーCan I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari 用に -webkit- のベンダープレフィックスが必要です。IE については 11 から正式に対応。IE10 にも対応していますが、書き方が少し変わって