横溝に特定の用語はありますか?


12

コンテキスト
私のチームはレスポンシブWebサイトで作業しており、ユーザーはグリッドの「セル」間のスペースなど、ページのプロパティの一部を構成できます。「セル間のスペース」を特定するための正しい用語について話し合いました。明らかに「マージン」のようなものを使用することもできますが、ページと最も外側のセルの間のスペースが含まれるため、それは少し広すぎます。セル間のスペースのみを特定したい。ユーザーは必ずしも技術に精通している(CSSなどを意味する)とは限りませんが、グラフィックデザインのバックグラウンドを持っている可能性があります(少なくとも一般的な用語に精通している)

質問
「ガター」は最も正しい用語のように見えますが、私が見つけることができる「ガター」の定義のほとんどは、特に間のスペースを指します

行間のスペースに特定の用語はありますか?または、単に「横溝」と呼ぶのが適切ですか?


ここに、私が特定しようとしているものの図を示します。
https://www.init.de/en/news/responsive-designから借りた画像)

ここに画像の説明を入力してください

私の現在の用語
「Horizo​​ntal(/ Vertical)Gutter」の問題は、私の意見では、溝が水平(/垂直)要素の間にあるか、垂直(/水平)要素。私のチームには、どの定義が正確であるかについて意見の相違があります。そのため、このフレーズは実際に混乱を招くほどの証拠だと思います。

少なくともウェブに関しては、「パディング」と「マージン」は、私が説明しているものには適切ではありません。パディングとは、境界線とコンテンツの間のスペースを指し、マージンとは要素の周囲のスペースを指します。マージンが10pxの2つの隣接する要素は、それぞれの間に20pxの余白があります。(はい、CSSのマージンはしばしば崩れることを承知していますが、常にそうではありません。)

レスポンシブグリッドフレームワークで頻繁に使用される「ガター」という用語を見てきましたので、Web開発で受け入れられる用語であることを知っています。「水平方向の溝」にもっと適切な用語があるかどうか疑問に思っています。


いい質問です、私はそれのための用語を知りません。ただし、溝という用語はよく誤用されます。列間の間隔は適切に路地と呼ばれます。明確化のためにこの画像参照してください
ザックソーサー

ここをリードするつもりはありませんよね?段落間隔はどうですか?
e100

コンテキストがすべてです。テーブルのようなこの音のように、私は、スプレッドシートのセルのための書式設定オプションを選択する場合(私はそれがIIRC「パディング」だと思います)借入どんな用語MS Excelの使い方をお勧めしたい
DA01

間隔段落我々はカラム内の段落間の水平方向のスペースについて本当に話をしている場合、私は用語のグラフィックデザイナーの使用が信じている「段落の間隔」。
DA01

それは、テーブル/グリッドの外側の周囲にスペースを追加してセル間隔は、正しくない
JDBはまだモニカ覚えて

回答:


3
短い答え

「行間隔」を使用します。

長い答え

JDBが述べたように、私も(魅力的な)印刷メディアの世界から組版用語をインポートしようとするのではなく、Web関連の用語を使用します。

ほとんどのグリッドレイアウトは「列」と「グリッド」という用語を使用するため、「列間隔」と「行間隔」という用語を使用します。CSSキーワードとの衝突を避けるために、「マージン」と「パディング」という用語の使用を避けます。


1
新しいCSSグリッド仕様ではgrid-row-gapgrid-column-gapとが定義されていますが実際には「間隔」が少し改善されています。
JDBは、

7

OPの質問の範囲と思われるWebデザインの範囲では、(魅力的な)印刷メディアの世界から組版用語をインポートするのではなく、Web関連の用語を使用します。

CSSのmarginプロパティのように、これを「垂直マージン」と呼びます。マージンとは、隣接する要素の境界線間の間隔です(境界線とコンテンツの間の要素内の間隔であるパディングとは対照的です)。

ここに画像の説明を入力してください

W3Cの言葉で:

マージンは、要素の周囲(境界の外側)をクリアします。マージンには背景色がなく、完全に透明です。 ソース

要素の境界線は透明にできることに注意してください。表示する必要はありません。

開発者はこの用語を非常に明確に理解する必要があります。そして、私の意見では、「マージン」は「ガター」、「通路」、または「スラッグ」より魅力的ではありませんが、クライアントはそれをより親しみやすい言葉で見つける必要があります。

余談

Cellpaddingcellspacingに類似しているpaddingmargin、彼らはあまりにも特定されています。これらは、一般的なCSS属性とは対照的に、<table>および<td>タグの有効なhtml属性です。それら以外のタグには適用できません。(<table>タグを使用して作成された構造のように)テーブルのみについて話している場合、そのareaを呼び出すと正しいでしょうcellspacing。あなたは(で定義された領域のように、一般的に矩形領域の話をしている場合は<div><span><img>または他のタグ)、そしてmarginより正確になります。

サイドコメントと同様に、このタイプの属性は構造(HTML)とスタイル(CSS)を混同するため、ページの保守や開発が困難になるため、属性cellpadingcellspacing属性は現代のWebデザイナーや開発者に非常に嫌われています。チーム。開発者は、これらの属性の使用を控えpaddingmargin代わりにCSS属性を使用することをお勧めします。

以前と同じように、テーブルを使用して一般的なレイアウトを作成する場合にも同じことが当てはまります。純粋主義者は、表は表形式のデータを表示するためだけに使用されるべきだと主張しています。足場にはタグを使用する必要が<div>あり<span>ます。いつか意味的に正しいWebページが作成されることを期待して、タグはバックステージリギングのみではなく、意味的にコンテキストをマークアップします。


2
「余白」は、要素の周囲の空間を指す一般的な用語ですが、「余白」は、特に要素の空間を指します。たとえば、2つの連続する要素のマージンがそれぞれ10pxである場合、それらの間の溝の幅は20pxになります。さまざまなグリッドレイアウトフレームワークで頻繁に使用される「ガター」を見てきました。そのため、Webサイトのコンテキストでは範囲外ではないと思います。それが垂直に積み上げられた要素間のスペースの正しい用語なのかと思っています。
JDBはまだモニカを覚えています

1
@JDB:結構です...エレメント間のスペースとしての「ガター」の受け入れは、視聴者によって異なります。ちなみに、HTML / CSSの余白はときどき一緒に折りたたまれるため、10pxの余白を持つ2つの要素に20pxの余白があるとは限りません。余白が崩れると、10pxの溝ができてしまいます。css-tricks.com/almanac/properties/m/margin
cockypup

また、(迷惑ではありませんが、私はこのテーマについて非常に熱心です)CSSの「マージン」は一般的な用語ではありません。非常に具体的な定義があります。w3.org/TR/CSS2/box.html
cockypup

1
いい視点ね。「最終的に要素間に残される実際のスペース」という用語を使用する方が良いと思います。
生意気な子犬

1
たとえマージンが崩壊しないすべての方法をリストしているとしても、マージン崩壊はドキュメントのルールではなく例外のようです。少なくとも、ドキュメントは英語の文法書のように読みます。チームの場合、用語(「alley」など)を定義します。これは、(非)崩壊後の要素間の垂直マージンです
。– Yorik

4

組版の用語では、スラッグは水平方向のギャップの一般的な用語です。-段落の後/前のスペース、セクション間の水平方向のギャップ、またはルール間の間隔など。スラグは、タイプサイズに類似した指定サイズを持ち、適切な垂直方向の間隔を作成するために金属タイプとインラインに配置されます。

編集に基づいて...

Cell padding最も明白な選択のようです。またはcell spacing


この用語は、セクションの後の間隔にも適用されますか?または単に段落?
ザックソーサー

1
水平方向のスペースが使用されるすべての領域に適用されます。ホットタイプの日では、スラグは、それらが段落、列、ルール、など。だったかどうかを植字されて任意の領域の間に水平にしてもスペースを作成するために使用された
スコット

私は気に入っていますが、2つ目の定義があるため、Webデザインでは非常に混乱しています。
JDBは、モニカを

1
ナメクジは、任意の間隔に使用される用語でした。インクがくっつかないようにくぼんだ金属の塊。これらは、水平方向の間隔を作成してタイプを揃えるために使用され、段落間の間隔やその他の間隔のニーズを作成するためにタイプ間で使用されました。おそらく新聞社で働いたことがなければ、今日の多くのデザイナーが知っている用語ではないことを理解しています。正確ではないという意味ではありません。垂直アイテムは、xheight、leading、slugsです。Webデザインの厳密な用語では、「マージン」を使用する傾向があります。
スコット

1
...そして、この回答を投稿した後、質問がさらに追加されるように編集されたことに気付きます。以前は「ウェブ」についての本当の言及はありませんでした。
スコット

1

レイアウト設計では、グリッド内の水平方向の溝は「フローライン」または「ハングライン」と呼ばれます


2
GD.SEへようこそ!あなたの答えをよりよく説明してください。「レイアウト設計」とはどういう意味ですか?
メンシュ

カートが言ったことに追加するために、視覚的な例を含めることもできます。
ウェルツ
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.