CSS

A way to point to “the beginning side” of a line that changes automatically depending on the writing direction, like left for LTR and right for RTL.

inline-start

文字が流れる向きに合わせて、自然に「行の始まり側」を指定できる書き方で、左から右の言語なら左、右から左の言語なら右が自動で対象になります。

inline-start は、「文字が流れる方向の“はじまり側”」を指すためのキーワードです。

通常、左から右に文字を書く言語では inline-start は左側を、右から左に書く言語では右側を指します。

つまり、ページの書字方向に合わせて自動的に変わる位置を示せます。

たとえば、左から右に書く言語では margin-inline-start を使うと、「左側のmargin」がつきます。

しかし、右から左の言語に切り替わると、自動的に「右側のmargin」になります。

「LTR / RTL を意識せずに、どちらでも使える位置指定」が欲しいときに便利です。

CSS

.box {
    margin-inline-start: 20px;
    padding-inline-start: 10px;
}

HTML

<div class="box">
    このボックスは、書字方向に応じて余白の付く位置が変わります。
</div>

ポイント

サイトのトップページ

ウェブページの基本的な構造を作成します。見出し、段落、リンク、画像などの要素を定義します。

class 属性: 要素に CSSでスタイルを適用するためのクラス名を付ける際によく使われる。
div 要素: 特定の意味（セマンティクス）を持たない汎用的なブロック要素で、ページのレイアウトやコンテンツのグループ化に利用される「区切りの箱」のような存在です。

ウェブページのデザインやレイアウトを設定します。色、フォント、レイアウトなどのスタイルを指定します。

inline-end: 文字が流れる向きを基準に、「行の終わり側（右や左）」を自動で判断して位置や余白をつけられるキーワード。英語でもアラビア語でも、言語に合わせて自然に見た目を調整できる。
left: 左からの配置位置（距離）を指定する。
margin: マージンに関する指定をまとめて行う。
margin-inline-start: 文章の書き始め側に自動で余白をつけてくれるプロパティで、左から書く言語なら左側、右から書く言語なら右側にマージンをつけられる。
padding-inline-start: 文章が始まる側にだけ余白をつけてくれるプロパティで、文字の流れが左→右でも右→左でも自動でちょうどいい場所にパディングが入るようにしてくれるもの。
right: 要素の位置を、右端からの距離で調整します。

ウェブページにインタラクティブな動作を追加します。フォームの検証、アニメーション、リアルタイムのデータ処理などを行います。

サーバー上で動作してデータベースと連携し、動的なWebページを簡単に作成できるスクリプト言語です。