CSS フローレイアウトとライティングモードの参考資料

2024-04-02

CSS フローレイアウト：フローレイアウトとライティングモード

CSS フローレイアウトは、HTML 要素を画面に配置するための基本的な仕組みです。これは、ブロック要素とインライン要素をどのように配置するか、そして書字方向がどのようにレイアウトに影響するかを定義します。

ブロック要素とインライン要素

ブロック要素は、水平方向に並ぶ独立した領域を形成します。例えば、div、p、h1 などがブロック要素です。
インライン要素は、他の要素内に連続して配置されます。例えば、span、a、img などがインライン要素です。

フロー方向は、テキストとブロック要素がどのように流れるかを決定します。デフォルトでは、横書きの場合、左から右へ、縦書きの場合、上から下へ流れます。

書字方向は、文字の並び方を決定します。横書きの場合、左から右へ、縦書きの場合、上から下へ書かれます。

writing-mode プロパティは、要素の書字方向を指定します。以下の値を設定できます。

horizontal-tb：横書き（デフォルト）
vertical-rl：縦書き（上から下、右から左）

例

<div style="writing-mode: vertical-rl">
  <h1>これは縦書きの見出しです</h1>
  <p>これは縦書きの段落です</p>
</div>

この例では、div 要素の書字方向を vertical-rl に設定しているので、文字は上から下へ、右から左へ書かれます。

その他の書字方向プロパティ

text-orientation：文字の回転方向を指定します。
text-align：テキストの水平方向の配置を指定します。
line-height：行の高さを指定します。

CSS フローレイアウトとライティングモードを理解することで、様々なレイアウトを作成することができます。詳細は、MDN Web Docs の「フローレイアウトと書字方向」: https://developer.mozilla.org/ja/docs/Web/CSS/CSS_flow_layout/Flow_layout_and_writing_modes を参照してください。

CSS フローレイアウトとライティングモードのサンプルコード

縦書きレイアウト

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>縦書きレイアウト</title>
  <style>
    body {
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 16px;
      line-height: 1.5;
    }
    
    .container {
      width: 500px;
      margin: 0 auto;
      padding: 20px;
      border: 1px solid #ccc;
      writing-mode: vertical-rl;
    }
    
    h1 {
      font-size: 24px;
      margin-bottom: 10px;
    }
    
    p {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>これは縦書きの見出しです</h1>
    <p>これは縦書きの段落です。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium lectus, eget tincidunt tortor. Nunc accumsan, ipsum sed dignissim feugiat, risus nisl egestas massa, in pulvinar neque leo ac lectus.</p>
    <p>これはもう一つの段落です。Proin eget tortor risus. Donec ullamcorper nulla non metus auctor fringilla. Nulla facilisi. Nam aliquam sem et tortor posuere, eget elementum enim ultricies.</p>
  </div>
</body>
</html>

横書きレイアウトと縦書きレイアウトを混在させる

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>横書きと縦書きを混在させる</title>
  <style>
    body {
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 16px;
      line-height: 1.5;
    }
    
    .container {
      width: 500px;
      margin: 0 auto;
      padding: 20px;
      border: 1px solid #ccc;
    }
    
    h1 {
      font-size: 24px;
      margin-bottom: 10px;
    }
    
    .horizontal {
      writing-mode: horizontal-tb;
    }
    
    .vertical {
      writing-mode: vertical-rl;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>横書きと縦書きを混在させる</h1>
    <p class="horizontal">これは横書きの段落です。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium lectus, eget tincidunt tortor. Nunc accumsan, ipsum sed dignissim feugiat, risus nisl egestas massa, in pulvinar neque leo ac lectus.</p>
    <p class="vertical">これは縦書きの段落です。Proin eget tortor risus. Donec ullamcorper nulla non metus auctor fringilla. Nulla facilisi. Nam aliquam sem et tortor posuere, eget elementum enim ultricies.</p>
  </div>
</body>
</html>

文字の回転

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>文字の回転</title>
  <style>
    body {
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 16px;
      line-height: 1.5;
    }
    
    .container {
      width: 500px;
      margin: 0 auto;
      padding: 20px;
      border: 1px solid #ccc;
    }
    
    h1 {
      font-size: 24px;
      margin-bottom: 10px;
      text-orientation: sideways-right;
    }

CSS フローレイアウトとライティングモードのその他の方法

グリッドレイアウト

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>グリッドレイアウトと縦書き</title>
  <style>
    body {
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 16px;
      line-height: 1.5;
    }
    
    .container {
      display: grid;
      grid-template-columns: 1fr 2fr;
      grid-gap: 20px;
      width: 500px;
      margin: 0 auto;
      padding: 20px;
      border: 1px solid #ccc;
    }
    
    .header {
      grid-column: 1 / span 2;
      writing-mode: vertical-rl;
    }
    
    .sidebar {
      writing-mode: horizontal-tb;
    }
    
    .main {
      writing-mode: vertical-rl;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>これは縦書きの見出しです</h1>
    </div>
    <div class="sidebar">
      <p>これは横書きの段落です。Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="main">
      <p>これは縦書きの段落です。Proin eget tortor risus. Donec ullamcorper nulla non metus auctor fringilla.</p>
    </div>
  </div>
</body>
</html>

Flexboxは、1次元レイアウトを作成するための便利なツールです。フローレイアウトと組み合わせて、レスポンシブなレイアウトを作成することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Flexboxと縦書き</title>
  <style>
    body {
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 16px;
      line-height: 1.5;
    }
    
    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 500px;
      margin: 0 auto;
      padding: 20px;
      border: 1px solid #ccc;
    }
    
    h1 {
      font-size: 24px;
      margin-bottom: 10px;
      writing-mode: vertical-rl;
    }
    
    .content {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: 100%;
    }
    
    .item {
      margin: 10px;
      padding: 20px;
      border: 1px solid #ddd;
      writing-mode: horizontal-tb;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Flexboxと縦書き</h1>
    <div class="content">
      <div class="item">
        <p>これは横書きの段落です。Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
      <div class="item">
        <p>これは縦書きの段落です。Proin eget tortor risus. Donec ullamcorper nulla non metus auctor fringilla.</p>
      </div>
    </div>
  </div>
</body>
</html>

CSS Regionsは、ページ上のコンテンツを異なる領域に分割

ゲーム理論：ビジネス、政治、日常生活に潜む戦略的思考

ゲーム理論の基本的な要素は以下の3つです。プレイヤー: 意思決定を行う主体戦略: プレイヤーが選択できる行動の選択肢利得: プレイヤーが各戦略を選択したときの得られる利益ゲーム理論は、これらの要素を数学的なモデルを用いて分析することで、プレイヤーがどのような戦略を選択するのか、どのような結果になるのかを予測することができます。

CSSでセピア色の世界へようこそ！画像や要素をレトロに変身させる魔法の方法

CSSの「Filter Effects」機能の一つである「sepia()」は、画像や要素をモノクロ化し、茶褐色（セピア色）のトーンを適用する関数です。古い写真のようなレトロな雰囲気を演出したい場合などに効果的に使用できます。構文n は、セピア色の強さを表す数値です。0.0の場合は元の画像の色合いが維持され、1.0になると完全にセピア色になります。

【上級者向け】FlexboxレイアウトとJavaScriptで子要素を動的に縮小する方法

flex-shrinkは、以下の状況で機能します。親要素の幅が、flex-basisで設定された子要素の合計幅よりも小さい場合flex-wrapプロパティがno-wrapに設定されている場合これらの条件を満たす場合、flex-shrinkの値に応じて、子要素が縮小されます。

Flexbox や CSS Grid で実現！Miscellaneous 書き込みモードの代替方法

writing-modeプロパティには、horizontal-tb、vertical-rl、vertical-lrなど、いくつかの標準的な書き込みモードがあります。さらに、Miscellaneousと呼ばれる特殊な書き込みモードも存在します。

CSS Grid Layoutにおける grid-column プロパティ：詳細ガイド

grid-columnプロパティは、CSS Grid Layoutにおいて、グリッド内の要素の列位置を指定するために使用されます。このプロパティは、単一の要素の配置だけでなく、複雑なレイアウトを構築するための強力なツールとなります。基本的な使い方

CSS Miscellaneousにおける@namespaceの解説

プレフィックス: 名前空間の識別子。セレクタやプロパティ名の前に付加されます。URL: 名前空間の関連付けられたURI。省略可能です。この例では、ns1という名前空間を定義し、http://example. com/ns1というURIに関連付けています。ns1|h1セレクタは、名前空間ns1のh1要素にのみ適用されます。同様に、font-family: ns1-serif;プロパティは、ns1名前空間のserifフォントファミリーを指定します。

「margin」と「padding」プロパティを使用して、装飾要素と要素本体の間に隙間を作ることで、「offset-distance」

**「offset-distance」**は、以下のプロパティで使用できます。box-shadowborder-imageoutlineそれぞれのプロパティにおける**「offset-distance」**の役割と、具体的な使用方法を以下に説明します。

ワンランク上のデザインへ！CSSで実現する魅惑の背景画像テクニック

CSSでは、複数の背景画像を要素に設定することができます。これにより、さまざまなデザイン効果を作成できます。基本的な構文上記は、2つの画像を並べて表示する例です。設定できるプロパティbackground-image: 画像のURLを指定します。

アクセシビリティに配慮したfloatの使い方で、誰もが使いやすいWebサイトを実現

floatプロパティの値none: 要素は浮動しません。デフォルト値です。left: 要素はコンテナの左側に浮動します。right: 要素はコンテナの右側に浮動します。inline-start: 書きモードに基づいて、要素は左側に浮動します。

CSS カスケードとは？

カスケードの仕組みカスケードは、以下の3つの主要な要素に基づいてスタイルの優先順位を決定します。特異性: セレクタの特異性が高いほど、スタイルは優先されます。特異性は、セレクタの長さや使用されるセレクタの種類によって決まります。一般的に、ID セレクタはクラスセレクタよりも特異性が高く、要素名セレクタは最も特異性が低くなります。