プログラミング
ヘッダー、ボタン、余白、ホバー、レスポンシブ動作など、ページ修正を依頼するときに使う用語を検索できます。
63 件
ページ構造
Header
ページの最上部領域。通常、サイトのタイトル、ナビゲーション、テーマコントロール、言語コントロール、およびメニューボタンが含まれます。
ヘッダーのパディング、高さ、ボーダー、または位置を変更すると、上部の領域の高さと固定感が変わります。
ヘッダーが高いと、表示されるコンテンツ領域が減少する可能性があります。特にモバイルデバイスでは顕著です。
headerpaddingheightpositionborder-bottomモバイルヘッダーのタイトルを小さくしますが、ヘッダーの高さを同じに保ちます。
ページ構造
Footer
ページの最下部領域。通常、リンク、法的テキスト、連絡先情報、または小さなナビゲーションに使用されます。
フッターのパディングとボーダーの変更は、余白の量と、上部のコンテンツとの分離に影響を与えます。
footerpaddingborder-topmargin-topフッターに、コンテンツに密着しないように、より多くのトップパディングを追加する。
ページ構造
Section
ヒーロー、ツールリスト、リファレンスカード、または記事ブロックなど、関連するコンテンツをグループ化する大規模なコンテンツ領域。
セクションのパディングは、ページの垂直方向のリズムを変更します。背景色の変更は、セクションが独立しているように感じさせます。
sectionpadding-blockborder-topbackgroundモバイルでのツールセクションの垂直方向のパディングを縮小します。
ページ構造
Container
ページコンテンツが、大きな画面で広がりすぎるのを防ぐための内部ラッパー。
最大幅を大きくすると、コンテンツが広くなります。サイドパディングを大きくすると、コンテンツが画面の端から離れます。
max-widthmargin-inlinepadding-inlineメインコンテナを、デスクトップでは少し狭くします。
ページ構造
Card
繰り返し項目（ツール、参照エントリ、または結果など）を提示する、フレーム化されたブロック。
カードのパディング、ボーダー、半径、および影は、各項目がどれだけ密集しているか、または目立つかを制御します。
borderborder-radiuspaddingbackgroundbox-shadow参照カードのパディングを減らし、よりコンパクトにします。
ページ構造
Panel
通常、コントロール、入力、設定、または出力を保持する、フレーム化された作業領域。
パネルの間隔とレイアウトの変更は、ツールの繰り返し使用がどれだけ容易に感じられるかに影響します。
borderbackgroundpaddingdisplayデスクトップではパネルコントロールを1行に配置し、モバイルでは縦に積み重ねます。
ページ構造
Navigation
主要なページまたはカテゴリ間の移動に使用される、リンクまたはボタンのグループ。
ギャップ、配置、および可視性ルールは、デスクトップとモバイルでのナビゲーションの動作を変更します。
navdisplaygapalign-items小さい画面でのナビゲーションリンクを非表示にし、メニューボタンは表示します。
ページ構造
Menu
ボタンから開かれるリンクまたはアクションのリスト。
メニューが開かれる位置、幅、およびzインデックスは、メニューがどこに表示されるか、および他のコンテンツの上に表示されるかどうかを決定します。
メニューが通常のドキュメントフローに配置されている場合、ページ全体が下に押し下げられる可能性があります。
positionrighttopz-indexwidthメニューを、右側に配置された浮動パネルとして表示します。
ページ構造
Sidebar
ページの左または右側にある垂直領域。通常、ナビゲーションまたはフィルターに使用されます。
サイドバーの幅とレスポンシブルールによって、それが表示されたままになるか、折りたたまれるか、コンテンツの下に移動するかどうかが決定されます。
asidewidthpositiongrid-template-columnsモバイルでは、フィルターサイドバーをコンテンツの下に移動します。
ページ構造
Hero
ページで、主な目的やアクションを紹介する最初の大きなセクション。
Heroのパディング、タイトルサイズ、およびレイアウトは、最初の印象と、最初のビューポートに表示されるコンテンツの量に影響を与えます。
paddingbackgroundmin-heightgridモバイルでのヒーロータイトルのサイズを縮小し、アクションボタンが表示されるようにします。
余白とサイズ
Padding
要素内のスペース。 ボーダーとコンテンツの間のスペース。
上部のパディングを大きくすると、要素内のコンテンツの上部にスペースが追加されます。
パディングを増やすと、通常、要素の表示サイズが大きくなります。
paddingpadding-toppadding-rightpadding-bottompadding-leftヘッダーの上部のパディングをわずかに増やします。
余白とサイズ
Margin
要素の外側のスペース。 要素と隣接する要素の間のスペース。
マージンボトムを大きくすると、次の要素がさらに下に押し出されます。
marginmargin-topmargin-rightmargin-bottommargin-leftメインセクションとツールリストの間に、より多くのマージンを追加する。
余白とサイズ
Gap
フレックスまたはグリッドレイアウト内の項目間のスペース。
ギャップを大きくすると、兄弟要素が互いに離れて配置されますが、グループ全体の余白は増えません。
gaprow-gapcolumn-gapテーマボタン、言語ボタン、およびメニューボタン間の間隔を縮めます。
余白とサイズ
Width
要素の水平方向のサイズ。
固定幅は要素を安定させます。 max-widthは、小さな画面で要素を縮小させます。
widthmin-widthmax-widthメニューパネルの幅を、最も長い項目に合わせて調整します。
余白とサイズ
Height
要素の垂直方向のサイズ。
固定された高さにより、ヘッダーを安定させることができます。 max-height と overflow を組み合わせることで、ドロップダウンメニューが大きくなりすぎるのを防ぐことができます。
heightmin-heightmax-heightタイトルを小さくしながら、ヘッダーの高さを一定に保ちます。
余白とサイズ
Max width
要素が到達できる最大の幅。
max-width を下げることで、大きな画面でのテキスト行が短くなり、パネルが狭くなります。
max-widthwidthドロップダウンメニューがページ全体を覆いすぎないように、最大幅を設定します。
余白とサイズ
Top / Right / Bottom / Left
配置された要素で使用される位置オフセット。
right：0 は、浮動パネルを、配置された親要素の右端に配置します。
toprightbottomleftinsetオープンメニューパネルを、ヘッダーコントロールの右側に配置します。
文字
Font size
テキストのサイズ。
フォントサイズを小さくすることで、モバイルヘッダーなどの狭いスペースに長いラベルを配置できます。
font-sizetext-smtext-lgモバイルサイトのタイトルを小さくしますが、1行に収まるようにします。
文字
Font weight
テキストがどれだけ太く見えるか。
フォントウェイトを大きくすると、ラベルがより目立つようになりますが、サイズは変わりません。
font-weightfont-boldfont-semiboldカテゴリラベルを少し太字にします。
文字
Line height
テキストの各行が占める垂直方向のスペース。
行間を大きくすると、段落が読みやすくなります。小さくすると、コンパクトなUIラベルがよりタイトになります。
line-heightleadingヒーローの説明の段落の行間を増やします。
文字
Letter spacing
個々の文字間のスペース。
小さな間隔は、大文字のラベルがより明確に見えるのに役立ちます。 大きすぎる間隔は、韓国語のテキストを不自然にする可能性があります。
letter-spacingtrackingコンパクトボタンからネガティブな文字間隔を削除します。
文字
Text align
コンテナ内のテキストの水平方向の配置。
右に配置されたメニューテキストは、浮動メニューが右端に固定されているように感じさせる可能性があります。
text-alignメニューパネル内のメニュー項目テキストを、右に配置します。
文字
Wrap / No wrap
長いテキストが次の行に移動できるかどうか、または1行に収まる必要があるかどうか。
No-wrap はヘッダーを安定させますが、wrapping はより多くのテキストを表示できますが、通常は高さが増加します。
white-spaceword-breakoverflow-wrapモバイル版のタイトルを1行に表示し、オーバーフローを切り捨てます。
文字
Truncate / Ellipsis
オーバーフローした単一行のテキストを切り捨てて、ドットを表示する方法。
省略は、ラベルが予想よりも長い場合に、レイアウトが崩れるのを防ぎます。
overflowtext-overflowwhite-space画面が非常に小さい場合に、サイトのタイトルを省略します。
色と背景
Color
テキストまたはアイコンの色。
色を変更すると、読みやすさと視覚的な優先順位に影響を与えます。
colorダークモードでも、選択された言語のテキストが表示されるようにします。
色と背景
Background
要素の内容の背後にある色または画像。
背景の変更は、パネルを区切ったり、アクティブな状態を強調したり、コントラストを向上させたりすることができます。
backgroundbackground-colorダークモードで、選択された言語項目に、より暗い背景色を使用します。
色と背景
Opacity
要素の透明度。
オパシティを下げることで要素を目立たなくすることができますが、可読性が低下する可能性があります。
opacityrgbacolor-mix無効なコントロールは、テキストが読めなくなることなく、少し暗く表示します。
色と背景
Gradient
2つ以上の色間の滑らかな遷移。
わずかなグラデーションは奥行きを追加できますが、強いグラデーションはツールが実用的でないように感じさせることがあります。
linear-gradientradial-gradientbackground-image背景を控えめにし、強いグラデーションは避けます。
色と背景
Accent color
ラベル、アクティブ状態、または重要なアクションに使用される、繰り返される強調色。
アクセントカラーを変更すると、ページの視覚的なアイデンティティと強調が変化します。
colorbackgroundborder-coloraccent-colorカテゴリラベルとアクティブなチップに、同じ緑色のアクセントを使用してください。
色と背景
Contrast
前景色と背景色の違い。
コントラストを高くすると、特にダークモードやモバイル画面での可読性が向上します。
colorbackground-colorダークモードでは、ドロップダウン項目のコントラストを増やします。
枠線と形
Border
要素の周囲の線。
ボーダーの幅と色は、ボックスやボタンが背景からどれだけ分離されているかを制御します。
borderborder-colorborder-widthborder-styleダークモードでは、メニューパネルの境界線を少し暗くします。
枠線と形
Border radius
ボックスまたはボタンの角の丸みをどれくらいにするか。
小さな半径は実用的でコンパクトに感じられます。大きな半径は、より柔らかく、遊び心があるように感じられます。
border-radiusカードのボーダー半径を8pxに維持します。
枠線と形
Box shadow
要素の周囲に影をつけ、ページから浮き上がっているように見せる効果。
強調された影は、浮動メニューまたはモーダルが階層構造になっているように見えます。影が強すぎると、重く感じられます。
box-shadowフローティングメニューパネルに、わずかな影を追加する。
枠線と形
Outline
要素の周囲に表示される線で、通常はキーボードナビゲーションによって要素がフォーカスされているときに表示されます。
明確なアウトラインは、キーボードユーザーがどのコントロールがアクティブであるかを知るのに役立ちます。
outlineoutline-offset:focus-visibleアイコンボタンに、目立つフォーカスのアウトラインを表示します。
枠線と形
Divider
セクションまたはグループを区切るために使用される線。
セパレーターは、視覚的な重みをあまり加えることなく、カテゴリの境界をより明確にすることができます。
border-topborder-bottomhrメニューカテゴリ間に、わずかな区切り線を追加する。
配置と位置
Display
要素の基本的なレイアウトモード。
display：none は、要素を非表示にします。 flex と grid は、子要素を配置します。
displaydisplay: nonedisplay: flexdisplay: gridモバイル画面でのデスクトップナビゲーションを非表示にします。
配置と位置
Flex
アイテムを行または列に配置するためのレイアウト方法。
flex-direction：column は、要素を垂直に積み重ねます。 flex-wrap は、要素を次の行に移動できるようにします。
display: flexflex-directionflex-wrapgapヘッダーコントロールを、フレキシブルな行に配置します。
配置と位置
Grid
コンテンツを行と列に配置するためのレイアウト方法。
グリッド列を変更すると、1行に表示されるカードの数が制御されます。
display: gridgrid-template-columnsgrid-columngapワイドなデスクトップ画面では、1行あたり4つのツールカードを表示します。
配置と位置
Align items
項目がflexまたはgrid内のクロス軸に沿ってどのように配置されているか。
align-items：center は、ヘッダー行内のコントロールを垂直方向に中央に配置します。
align-itemsplace-itemsタイトルとヘッダーボタンを垂直中央に配置します。
配置と位置
Justify content
項目がflexまたはgrid内のメイン軸に沿ってどのように分布されているか。
justify-content：space-between は、グループを反対側に押し出します。
justify-contentjustify-itemsmargin-left: autoタイトルを左に、コントロールを右に配置します。
配置と位置
Position
要素がページまたは別の要素に対してどのように配置されているか。
position：absolute は、ドロップダウンがページレイアウトを押し下げずに浮遊できるようにします。
positionrelativeabsolutefixedstickyメニューパネルを絶対位置に配置し、ページ全体が押し下げられるのを防ぎます。
配置と位置
Z-index
配置された要素のスタック順序。
より高いz-indexを設定することで、ドロップダウンメニューをページコンテンツの上に表示できます。
z-index は、配置とスタックのコンテキストが考慮される場合にのみ、予測可能な動作をします。
z-indexposition言語のドロップダウンをメニューパネルの上部に移動します。
配置と位置
Overflow
コンテンツがコンテナよりも大きい場合、どうなりますか？
overflow-y：auto は、長いメニューが画面からはみ出さずにスクロールできるようにします。
overflowoverflow-xoverflow-ymax-height長いドロップダウンメニューは、max-height 内でスクロールできるようにします。
レスポンシブ
Breakpoint
レイアウトが変更される画面幅。
ブレークポイントを変更すると、タブレットがモバイルとデスクトップのどちらの動作をするか決定されます。
@mediasmmdlgxlタブレットを、トップナビゲーションではデスクトップとして扱います。
レスポンシブ
Mobile
小さな電話サイズの画面を対象としたスタイル。
モバイルスタイルでは、フォントサイズを小さくしたり、列を積み重ねたり、コントロールをタッチ操作に対応させたりすることが一般的です。
@mediamax-widthsmモバイルでは、カードを1つの列に積み重ねます。
レスポンシブ
Desktop
より広いラップトップまたはデスクトップ画面を対象としたスタイル。
デスクトップのスタイルは、より多くの列、水平ナビゲーション、およびより広いコンテンツコンテナを使用できます。
@mediamin-widthlgxlデスクトップでは、カテゴリのナビゲーションをヘッダーに表示させてください。
レスポンシブ
Viewport
ブラウザまたはデバイスの画面の可視領域。
ビューポート単位は、表示される画面に対する相対的なサイズを表します。
vwvh100vw100vhメニューの幅をビューポート内に制限し、スマートフォンでオーバーフローしないようにする。
レスポンシブ
Responsive
さまざまな画面サイズに調整できる設計。
レスポンシブなルールを使用すると、同じコンポーネントをデスクトップでは水平に、モバイルでは垂直に表示できます。
@mediaclampmin()max()コントロールを、順序を変更せずにレスポンシブにします。
操作状態
Hover
マウスカーソルが要素の上にあるときの状態。
Hoverスタイルは、背景、テキストの色、境界線、または影を変更して、項目がインタラクティブであることを示します。
タッチデバイスは信頼性の高いホバー機能を持たないため、重要な操作は、クリックまたはタップでも機能する必要があります。
:hoverbackgroundcolortransitionメニュー項目にマウスオーバーしたときに、背景色の変化を追加する。
操作状態
Active
ボタンまたはリンクが押されている短い状態。
アクティブなスタイルは、小さな色や位置の変化によって、ボタンに触覚的な感覚を与えることができます。
:activetransformbackgroundツールバーのボタンに、わずかな押された状態の表現を追加する。
操作状態
Focus
入力、ボタン、またはリンクが現在、キーボードまたは入力のために選択されているときの状態。
フォーカススタイルは、キーボードナビゲーションを可視化し、アクセスしやすくします。
:focus:focus-visibleoutline検索入力のフォーカスリングの色を、アクセントカラーに合わせます。
操作状態
Disabled
コントロールが表示されているが、使用できない状態。
無効なスタイルは、通常、コントラストを下げて、ポインターの操作を削除します。
:disabledopacitycursorpointer-events無効なボタンは、視覚的に非アクティブですが、読みやすくする必要があります。
操作状態
Selected
リスト、タブグループ、またはメニューで現在選択されている項目の状態。
選択されたスタイルは、通常、通常の項目よりも背景色またはテキストの色が強くなる必要があります。
aria-currentdata-statebackgroundcolor選択されたカテゴリチップを目立たせ、他のチップと明確に区別します。
操作状態
Open / Closed
ドロップダウン、メニュー、またはアコーディオンパネルが現在表示されているかどうか。
開閉状態には、プラス/マイナスのアイコンまたは矢印の回転など、明確なインジケーターが必要です。
aria-expandeddisplayheightvisibilityすべてのメニューのカテゴリをデフォルトで閉じます。
UIコンポーネント
Button
クリックまたはタップされたときにアクションを実行するコントロール。
ボタンのパディング、ボーダー、色、および状態は、使いやすさと重要度を決定します。
buttonpaddingborderbackgroundcursorプライマリアクションボタンを目立たせ、セカンダリボタンよりも目立たないようにします。
UIコンポーネント
Icon button
テキストではなく、主にアイコンで表現されるボタン。
安定した幅と高さにより、アイコンボタンの状態が変化しても、位置がずれるのを防ぎます。
buttonwidthheightaria-labeldisplay: gridメニューアイコンボタンを正方形にし、言語ボタンに合わせて配置します。
UIコンポーネント
Dropdown
ボタンまたは選択コントロールを押すと表示される、浮動リスト。
ドロップダウンの位置、幅、最大高さ、および z-index は、配置とレイヤーを制御します。
positiontoprightz-indexbox-shadow言語のドロップダウンが開いているときは、サイトメニューを閉じます。
UIコンポーネント
Accordion
開閉可能で、内容を表示または非表示にするセクション。
アコーディオンは、必要なカテゴリのみを表示することで、長いメニューを短くします。
aria-expandedheightdisplayoverflow各メニューカテゴリに、開閉の動作を追加する。
UIコンポーネント
Tabs
ページを離れることなく、関連するビュー間の切り替えを行うためのコントロール。
選択されたタブのスタイルは、アクティブなビューが明確に示されるようにする必要があります。
role=tablistdisplayborderbackgroundアクティブなタブの背景色を、非アクティブなタブよりも暗くします。
UIコンポーネント
Modal
ページの上部に表示される、フォーカスされたオーバーレイパネル。
モーダルの幅、背景、およびz-indexは、ページへの中断の度合いを制御します。
dialogposition: fixedinsetz-indexbackdropモーダルを中央に配置し、ビューポートよりも狭くします。
UIコンポーネント
Tooltip
コントロールの近くに表示される、小さなヒント。多くの場合、ホバーまたはフォーカス時に表示されます。
ツールチップは、アイコンのみのボタンについて、永続的なテキストを追加せずに説明するのに役立ちます。
positiontitlearia-describedbyz-indexメニューアイコンボタンをラベル付けするツールチップを追加する。
UIコンポーネント
Input
ユーザーがテキストまたは値を入力するフィールド。
入力パディング、ボーダー、プレースホルダーの色、およびフォーカススタイルは、快適さと見やすさに影響を与えます。
inputborderpaddingplaceholder:focus検索入力を、モバイルで全幅にし、タップしやすくします。
UIコンポーネント
Badge / Chip
小さな丸いラベルまたはフィルターコントロール。
チップサイズ、半径、およびアクティブな色は、スキャン可能なフィルターがどのように感じられるかに影響します。
border-radiuspaddingbackgroundfont-sizeアクティブなカテゴリチップを目立たせます。