セカヤサブログ世界で一番初心者に優しいWeb制作のメディア。HTML/CSS/JavaScript、WordPress、Web制作の考え方を解説します。2023.11.11こんにちは。今回はHTML上でどのように文章の両端揃えを行うかを解説します。指定はとても簡単で、1行追加するだけです。justify;これだけで両端揃えを実現できます。英語や数字が混ざっていても概ね問題なく両端揃えにできるので、少なくとも静的なコンテンツでは十分使っていけるプロパティだと思います。justifyですが、記号周りで文章が崩れる場合があります。このように、確かに両端揃えにはなっているものの文字の間隔が空きすぎですね。記号をたくさん連続させるような文章が想定される場合は使わない方が良さそうです。動的なコンテンツが対象の場合は注意が必要ですね。break-word;使う必要があるなど、それ自体の扱いを気をつけなければなりません。アクセシビリティ上の懸念点がある近年Webにおいては、アクセシビリティに対する言及が多くなってきました。さまざまな障碍を持つ人々にとってウェブコンテンツをよりアクセスしやすくすることを目的としています。この観点において、文章の両端揃えは非推奨であると考えられています。アクセシビリティにおいては、大きく分けて以下の4つの原則を熟慮するよう推奨されています。以上の感覚を使って何らかの方法でそれを知覚できなければなりません。要素を制御できなければなりません(例えば、ボタンは、マウス、キーボード、音声コマンドなど、何らかの方法でクリック可能でなければならない)。コンテンツはそのユーザーにとって理解可能でなければなりません。コンテンツは、現在および将来にわたって、さまざまなブラウザで機能する、広く採用されているウェブ標準を使用して開発する必要があります。」という文言が存在しています。ここで言う「テキスト」は後述のガイドラインによれば一文よりも長いテキストを指しており、テキストブロックと呼ばれています。pタグで表現されるような段落などの文章は両端揃えはすべきでないということになります。使うとしたら見出しなどに限定するのが、アクセシビリティ的には適切ということですね。ちなみに、アクセシビリティにおける詳細なガイドラインとしてウェブコンテンツ・アクセシビリティガイドライン(WCAG)という文書が存在しており、MDNも基本的にはそちらの文書をもとに記述されています。日本語訳もありますので興味がある方は読んで見てください。シリーズ累計500部突破!/今すぐ購入して、Web制作で自由を手にいれる!まとめというわけで、CSSによる文字の両端揃えを紹介しました。absoluteを組み合わせて特殊な中央揃えをするこんにちは。auto;をさらに深めていこうと思います。auto;での中央揃えが何故動くのか、基本的なことはこちらをご覧ください。mar...2021.11.06HTML/CSSを学ぶHTML/CSSを学ぶ【徹底解説】CSSでチェックボックス/ラジオボタンをカスタマイズする方法を超絶優しく解説するはい、今回はHTML/CSSの中でも比較的高難易度な、チェックボックスやラジオボタンのカスタマイズについてです。高難易度でありながら実務においては頻出です。デザイン上デフォルトのチェックボックスやラジオボタンを使う場合はほぼありえませんか...2019.07.18HTML/CSSを学ぶHTML/CSSを学ぶCSSの単位、emはいつ使うべきか【おすすめの使い方を紹介】CSSにはいろんな単位がありますよね。pxと%に始まり、ある程度見かけるem、rem、vw、vh、ほとんど見かけないcm、mm、Q、in、pc、pt、ex、ch...と実は20以上の単位がCSSには存在します。いってもpxと%が使えれば概ね問...2024.04.10HTML/CSSを学ぶHTML/CSSを学ぶBootstrapはガチでいらないはい。今回はCSSフレームワークのBootstrapは本当に必要なのかについて書いていきます。Bootstrapとは、Twitter社が開発したWebのフロントエンドを高速で制作するためのフレームワークです。プログラミングスクー...2022.06.13HTML/CSSを学ぶHTML/CSSを学ぶ【marginに別れを告げる】gapプロパティでスマートに余白を攻略するこんにちは。今回は余白について書いていきます。みなさんCSSにおいて余白といえばmargin、あるいはpaddingを思い浮かべるでしょう。要素と要素の間の余白はmarginを、要素の内側の余白にはpaddingを、というような使い分けを...2023.12.21HTML/CSSを学ぶHTML/CSSを学ぶHTMLだけじゃない?emmetを使ってCSSを爆速で書く方法こんにちは。今回はemmetというHTML/CSSを短縮記法で書けるようになるツールを紹介します。CSSのよく使う短縮記法をお伝えしようと思います。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。秀樹フリーランス8年目|「世界一初心者に優しい」→セカヤサ。初心者が5年後も10年後も仕事を奪われない人になるための発信中。最新情報まとめWeb制作役立ちツールホーム検索トップサイドバータイトルとURLをコピーしました。