文章の折り返し指定のCSS最新版 - ICS MEDIA
文章の折り返しはウェブ制作において意外と難しいものです。URLが文章に含まれている場合、URLがレイアウトを突き抜けてしまった、という経験をみなさんはお持ちではないでしょうか？ この記事では、国内のウェブ制作において「開発者が考えることが少なくてよくなる」安全なCSS指定を紹介します。 結論から説明すると、以下の指定を提案します。 body { overflow-wrap: anywhere; /* 収まらない場合に折り返す */ word-break: normal; /* 単語の分割はデフォルトに依存 */ line-break: strict; /* 禁則処理を厳格に適用 */ } この記事では上記の指定にいたった理由と、折り返しの理解について必要なoverflow-wrapとword-breakプロパティを中心に解説します。 overflow-wrap overflow-wrapは
line-clampで複数行の文の省略がちょっと便利（最近便利なCSSおれおれAdvent Calendar 2023 – 14日目） | Ginpen.com
最近便利なCSSおれおれAdvent Calendar 2023 – 14 日目 text-overflow ってあるじゃないですか、文章が長いときに省略するやつ。でもあれ 1 行（横がはみ出したとき）しか使えないんですよね。line-clamp なら複数行の文章でも省略できます。 ただし問題もあります。 例 デモ：https://codepen.io/ginpei/pen/RwvmERN .box { -webkit-box-orient: vertical; -webkit-line-clamp: 3; display: -webkit-box; overflow: hidden; } 名前 使うのは line-clamp じゃなくて -webkit-line-clamp です。仕様書にもそう載っていて現在 Webkit 以外でも使えます。 line-clamp も仕様には載ってはいて
CSSの新機能！ テキストの行のバランスを自動調整する「text-wrap: balance;」の基礎知識と使い方
テキストが複数行のときに、行ごとの文字数を同じにしてバランスを自動調整するCSSの新機能「text-wrap: balance;」が、Chromeでサポートされました。 日本語だと複数行の文字数を同じにしたいということは少ないと思いますが、見出しやコピーなどで文字数を揃えたいときに使えます。まぁ使ってもかなりピンポイントになるでしょう。 text-wrap: balance;の基礎知識と使い方、注意点を紹介します。 CSS text-wrap: balance by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 text-wrap: balance;とは テキストのバランスを見つける 制限事項 ブラウザが使用している技術の簡単な説明 text-wrap: bala
新しいCSSの書き方 最新テクニック20選まとめ実用サンプルコード付き
新しいCSSの書き方 最新テクニック20選まとめ実用サンプルコード付き こんな方法があったのか、思わず納得なCSSテクニックをご紹介 この記事では、ウェブ制作で積極的に活用したい最新CSSテクニックを、実例サンプルコードと一緒にご紹介します。 新しいCSSプロパティにはじまり、これまではJavaScriptが必要だったデザインも、CSSのみで実現できるようになっています。 普段からCSSを使いこなしているベテランデザイナーさんにこそオススメしたい、CSSの進化を感じるテクニックが揃います。 コンテンツ目次 1. ついにCSSコンテナクエリ利用可能に 2. グリッドに名前をつけてレイアウトを視覚化する方法 3. 長いテキストを短く省略する方法 4. transformプロパティが独立してより使いやすく 5. くるりと回転するアニメーション文字の作り方 6. :hasプロパティでAppleのO
読みやすい＝理解しやすい Webの組版を整理してより良い文章を届けよう - Qiita
この記事はQiita Advent Calendar 2021の12日目の記事で、Qiita株式会社 CX向上グループの綿貫（@xrxoxcxox）が担当します！ この記事の概要 Webの組版を現実的な手法で綺麗に整えるためのやり方をまとめました。 同じ内容の文章でも組版次第で読みやすさは変わります。 実は、意識していないとWebサイトの文章は余白がガタガタとかになりやすいんですね。 DTPに比べるとどうしても劣ってしまいますが、HTMLとCSSだけでできるだけ綺麗になるようにした & ステップバイステップで説明していますので良ければ真似てみてください！ ちなみに今回載せているコードは全てこちらのリポジトリにあります。 解決したいこと（≒よくあるWebの組版） 余白がガタガタ 見出しや本文のジャンプ率が適切でなく目が滑る 禁則処理がほぼ何も無い あまり意識したことは無いかもしれませんが、こ
Beeftext - Windows用のスニペット管理
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 仕事中、繰り返し使う文面であったり、よく使う関数があります。それらをメモしておくと便利です。そして必要な時に検索してコピー&ペーストすれば仕事の効率が大幅にアップするはずです。 今回紹介するBeeftextもそんな短文、スニペットを管理するソフトウェアです。 Beeftextの使い方 新しいスニペットを記載します。 スニペット一覧です。グループ管理できます。 設定です。 Beeftextはショートカットキー操作が基本で、さっと立ち上げて検索し、そして文字列をコピーするといった一連の操作をショートカットキーでできます。Webベースでなく、GUIアプリケーションなのも使いやすい点です。 BeeftextはC++製、Windows用のオープンソース・ソフトウェア（MIT License）
Google検索結果に表示される説明文などの詳細なコントロールを可能にする新仕様が発表
by 422737 Google検索の検索結果画面には、単に関連のあるウェブサイトのタイトルやURLが表示されるだけではなく、ウェブサイトの内容を説明するテキストなども表示され、ユーザーが適切なウェブサイトを発見するために役立てられています。そんなGoogle検索結果に表示されるコンテンツの内容について、ウェブサイトの運営者がより詳細にコントロールするための、新たな仕様が発表されました。 Official Google Webmaster Central Blog: More options to help websites preview their content on Google Search https://webmasters.googleblog.com/2019/09/more-controls-on-search.html Googleの検索結果にはコンテンツのテキストな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
writing-modeで縦書きが便利なこともある（最近便利なCSSおれおれAdvent Calendar 2023 – 12日目） | Ginpen.com
https://www.web-development-kb-ja.site/ja/content/%E6%9C%80%E5%88%9D%E3%81%AE%E6%AE%B5%E8%90%BD%E3%81%A82%E7%95%AA%E7%9B%AE%E3%81%AE%E6%AE%B5%E8%90%BD%E3%81%AE%E5%BE%8C%E3%81%AB%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B/956897715/