h1: ページタイトル
h2: スタンダード（border-top含めてh2）
このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。
h3: このテキストはダミーです。
このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。
h4: このテキストはダミーです。
このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。
h5: このテキストはダミーです。
このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。
h2: 中央揃えのスタイル（border-topなし）
h3: 中央揃え
このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。
h4: 中央揃え
このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。
h5: 中央揃え
このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。
テキスト
本文のテキストです。14px、#000。Hriagino Sans または HiraKakuProN-W3。このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。<em>による強調。このテキストはダミーです。<strong>による強調。このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。
段落はこの程度の行間の空きです。このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。
※注釈表記はこのように12pxのグレーで表示します。
<blockquote>による引用文です。このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。
見出しとは別にキャッチコピー用のクラスを用意します。
本文テキスト、見出し、キャッチコピー共に中央揃えでも表示できるスタイルを用意します。視覚的に訴えかけたい文章はこのように改行を入れる場合があります。<br>タグを使ったらあまりよろしくないらしいので<span>タグで改行した方がいいと思います。詳しくは先輩エンジニアに聞いてください。ちなみにスマートフォンで表示する際は改行があると変な箇所で改行されて読みにくくなる場合が多いので、すべての改行を解除する必要があります。
画像の挿入
テーブル
| TH 開発端末 | TD (MacBook Pro or Mac mini) + 外部モニタ （会社支給） ※基本的に英語キーボードでの支給となります |
|---|---|
| バージョン管理 | Git + GitLab |
| タスク管理 | ASANA, BackLog |
| TH 開発端末 | TD (MacBook Pro or Mac mini) + 外部モニタ （会社支給） ※基本的に英語キーボードでの支給となります |
|---|---|
| バージョン管理 | Git + GitLab |
| タスク管理 | ASANA, BackLog |
リンク
このテキストはダミーです。文字のサイズや行間、未訪問のテキストリンク。このテキストはダミーです。テキストリンクマウスオーバー時。このテキストはダミーです。訪問済のテキストリンク。文字のサイズや行間、字間等を確認するために表示しています。
Link Btn A（Primary Link） Link Btn B Link Btn C続きを読む VIEW ALL
リンクつきリスト
- NASA.gov
- NASA Uses “Headless” Drupal Tomoka0816 Reach New Website Heights
- Drupal Case Studies: Nasa.gov
- Portfolio Nasa.gov 2.0
- What Is Headless Drupal?
div全体にhoverするパターン
divにlink-panelクラスを付与すると、hover時にbackgroundcolorが変わります。クリック時には中に含むaタグのリンク先へ遷移します。target="_blank"も対応しています。
詳しく見るタブ
水平線
水平線の上下は64pxのマージンをとる。
フォーム
画面幅いっぱいにはみ出す灰色の背景を持ったコンテンツ
このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。
このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。
画面幅いっぱいにはみ出すコンテンツ
このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。
このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。このテキストはダミーです。文字のサイズや行間、字間等を確認するために表示しています。
２カラム
カラムスタイル
親要素にcolumnsクラスを、子要素にcolumns__item、孫要素にcolumns__item-innerを指定することでカラムスタイルを適用できます。親要素にcolumns--grayを指定すると背景色がグレーになります。
カラム数に応じて、親要素にcolumns--2、columns--3、columns--5のいずれかを指定してください
カラムスタイル
このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。
3カラム
カラムスタイル
このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。
カラムスタイル
このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。
カラムスタイル
このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。
5カラム
カラムスタイル
このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。
カラムスタイル
このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。
カラムスタイル
このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。
カラムスタイル
このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。
カラムスタイル
このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。