カード
画像がもともと少し暗くなっていて、hover/touch時にもとの明るさに戻るタイプ
基本モジュール
見出し
見出しレベル1
見出しレベル2
見出しレベル3
見出しレベル4
※ h5以降も使えますがh4と見た目が変わらないので不要です
文書構造
記事中の文書構造は、アーティクル(文書) → チャプター(章) → サブチャプター(節) → パラグラフ(段落)という概念で考えます。
h2で区切られる情報のまとまりをチャプター、h3で区切られる情報のまとまりをサブチャプターとします。
これら見出しタグを用いるだけで上下のホワイトスペースは付与されますが、「見出しがないが情報のまとまりとして囲む」必要のある場合は、
.chapter.subchapterのclassを付与したdivで囲むことで h2, h3と同じ視覚的なアキを作ります。
....
....
....
チャプター、サブチャプターのまとまりは、ブロックコンテンツにおける「ブロック」「サブブロック」の概念に対応します。
書式
インライン書式
文中でテキストリンクを設けたり、太字にしたい箇所はstrongタグで表現することができます※1。strongタグ以外の要素(spandtなど)に太字を当てたいときは、.font-boldというclassを付与することで太字になります。文字色を変えて強調したい時は、emタグを使用します。「エタノールの化学式はCH3CH2OHであり、1ヘクタールとは10,000m2を意味します」などのように上付き/下付きの文字を表現することもできます。警告文など注意を換気する必要のある文節を赤字で示す場合は、pまたはspanに.attentionクラスを付与してください。
※1 単語に関わる注釈は単語の直後、文全体に関わるものは文末(ただし句読点の直前)に配置してください。
区切り線
チャプターレベルで内容の区切りを表現したい時に使用します。
ただし内容に区切りが生じてない場合はhrを使うべきではありません。装飾目的で罫線を表示する場合は、.chapterに.bordert-topというclassを掛けあわせてください。
このチャプターブロックには上罫線が表示されている。
テキストアライン
この文章は左寄せです。この文章は左寄せです。
この文章は中央寄せです。この文章は中央寄せです。
この文章は右寄せです。この文章は右寄せです。
md/sm表示になってもこの設定は受け継がれますが、下記のclassで個別化することが可能です。「.text-md-*」を指定すると、md表示以下でそのアラインになります。sm表示はこれを継承しますが、さらに個別化したい場合は「.text-sm-*」を指定します。
lg表示はセンター寄せ、md表示で左寄せ、(sm表示はmdと同じ)
lg表示は右寄せ、(md表示はlgと同じ)、sm表示は左寄せ
lg表示は右寄せ、md表示は中央寄せ、sm表示は左寄せ
縦書き文字 draft
縦書表現したい部分について、汎用クラス.text-verticalを付与してください(CSSのwriting-modeを使用しています)。ただし見出しなど短い単文への使用を想定しています。
縦書の文章が、入ります。
- ※ この汎用クラスでは、縦書になるという指定しかされていませんので、余白等は元の属性や他のclassを継承します。必要に応じ個別にリセットしてください。
リスト表現
非序列リスト
- あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波と夏でも底に冷たさをもつ青いそらと夏でも底に冷たさをもつ青いそら。
- すきとおった風は強調された文字のすきとおった風、夏でも底に冷たさをもつ青いそら。
序列リスト
- あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市。
- すきとおった風は強調された文字のすきとおった風、夏でも底に冷たさをもつ青いそら。
インラインリスト
- イーハトーヴォ
- すきとおった風
- 夏
- 冷たさ
- 青いそら
脚注リスト
- ※1 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
- ※2 Lorem ipsum dolor sit amet, probo senserit molestiae ut quo, odio vide ipsum per id.
リンクリスト
インラインリンクリスト
ボタン
基本ボタン
※ inputなどフォーム要素に指定する場合はdisabled属性を指定してください。
ユーティリティ
カラムに入れる場合はこのようになる
ゴーストボタン
ゴーストボタン(背景透過になっているボタン)は下記クラスを使用ください。
リンク
外部リンク
サイト外/別ドメインへのリンクであることを明示したい場合に使用します。
すべて見るリンク
メニュー一覧への遷移や、すべて見るという文脈で使用可能です。
カードリンク
tap-highlight-colorの無効化
タッチデバイスのタッチ時にデバイスのハイライトカラー(-webkit-tap-highlight-color)が載るのを無効化したい場合に使用します。
また、このクラスが付与された要素のtouchstartでtouchedというclassが付与されます。(touchendまたはtouchendでremoveClass)
タップハイライトカラーを無効化した場合は、ユーザのタッチ操作に対するフィードバックをCSSで定義することが推奨されます。
<!-- 例 -->
<a class="hoge" href="#">リンク</a>
.hoge {
&.touched {
//タッチ時のスタイル
}
}
しかしiOS側の仕様でtouchstart時に、その要素に当てられている:hover擬似クラスのスタイルが表示されてしまい、かつtouchendでこのスタイルが解除されず、意図通りのインタラクションが表現されない。
この問題を解消するため、ポインターデバイス(PC)でのマウスオーバーと、タッチデバイスのタッチ中の見た目を互いの干渉なくなく両立させるために、下記のように記述してください。
.hoge {
&:hover {
//これだとiOSのタッチ中にも適応されてしまい、touchendで解除されない
}
html.pointer &:hover {
//継承を入れることでタッチデバイスには発火しない
}
html.touch &.touched {
//タッチデバイスでのみ発火するタッチ中のスタイル
}
}
ポインターデバイス(html.pointer)内の:hoverと、タッチデバイス(html.pointer)内の.touchedに共通のスタイルを定義する場合は、下記のようにhover-and-touchedのmixinを使用可能です。
/* SCSS */
.hoge {
@include hover-and-touched() {
background-color: blue;
}
}
/* コンパイルされたCSS */
html.pointer .hoge:hover,
html.touch .hoge.touched {
background-color: blue;
}
/* SCSS */
.hoge {
@include hover() {
background-color: blue;
}
}
/* コンパイルされたCSS */
html.pointer .hoge:hover {
background-color: blue;
}
/* SCSS */
.hoge {
@include touched() {
background-color: blue;
}
}
/* コンパイルされたCSS */
html.touch .hoge.touched {
background-color: blue;
}
画像
リキッド幅
.img-liquidクラスを付与することで、親の横幅を超えないように max-width:100%;を指定することができます。
ソリッド幅
逆に明示的に、親の幅に関わらず画像の元サイズや指定幅通りに表示する場合は、.img-solidをimg要素に指定します。この場合コンテンツエリアをはみ出して横スクロールが発生する可能性があることに留意ください。
※ 後述の.scroll-container内のimgはこの設定を継承しています。
キャプション
本文から参照されない、連関の薄いものはfigureを使用せず、divやpでマークアップしても同じ見た目になります。
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
オーバーフロー
図版や表組を小さいスクリーンサイズで横スクロールさせて見せる場合は、
imgタグを.scroll-containerまたは.scroll-containerで囲んでください。
srcの置換
lg(md)表示と、sm表示とで画像ファイルそのものを出し分ける場合は、下記のように.img-replaceクラスを付与してください。
<img class="img-replace" src="#" data-src="/img/dummy/dummy_imgreplace_lg.png" alt="">
- ※ 必ず画像ファイル名末尾に、「_lg」「_sm」をつけ同じディレクトリに同じ拡張子で置いてください。
- ※
src属性は空にせず、「#」を指定してください。 - ※
data-src属性には、lg版の画像パスを指定しておいてください。 - ※ md表示では、lg版の画像が表示されます。
ビデオ
※
.video-containerは16:9の比率にリセットされています。動画の比率に応じ縦横比を変える場合は下記のように指定してください。
<div class="video-container aspect-16by10">… 16:10の動画用<div class="video-container aspect-4by3">… 4:3の動画用
※YouTubeの埋め込みコードについて、
widthとheightは指定しない。srcは「//」から始まる絶対パスとする。またデフォルトで下記パラメータを付与する。rel=0… 再生終了後関連動画を非表示showinfo=0… タイトルバーを非表示modestbranding=1… コントロールバー内Youtubeロゴ非表示iv_load_policy=1… アノテーションを非表示
メディア
左側に画像を表示する場合
画像のキャプションキャプションキャプションキャプション
ことばを話すのは人間の本能だといわれています。本能ということは、異性に惹かれたり、食べられるものを嗅ぎわけたり、そういうことと同じだということです。だから、誰もがことばを使ってコミュニケーションします。しかし、それを文字に置き換えてやりとりできるかといえば、また話は違ってきます。文字を持たない無文字社会は、いまでもたくさんあります。
文字は後天的に獲得するものです。小学校の国語の時間を思い出せば反論する人はいないと思いますが、識字率が高い日本にいるとつい忘れてしまいます。何もなく"読み書き"を手に入れた気になります。
ことばを話すのは人間の本能だといわれています。本能ということは、異性に惹かれたり、食べられるものを嗅ぎわけたり、そういうことと同じだということです。だから、誰もがことばを使ってコミュニケーションします。しかし、それを文字に置き換えてやりとりできるかといえば、また話は違ってきます。文字を持たない無文字社会は、いまでもたくさんあります。
文字は後天的に獲得するものです。小学校の国語の時間を思い出せば反論する人はいないと思いますが、識字率が高い日本にいるとつい忘れてしまいます。何もなく"読み書き"を手に入れた気になります。
左側に画像を表示する場合(テキスト回り込み)
画像のキャプションキャプション
文字は後天的に獲得するものです。小学校の国語の時間を思い出せば反論する人はいないと思いますが、識字率が高い日本にいるとつい忘れてしまいます。何もなく"読み書き"を手に入れた気になります。
ことばを話すのは人間の本能だといわれています。本能ということは、異性に惹かれたり、食べられるものを嗅ぎわけたり、そういうことと同じだということです。だから、誰もがことばを使ってコミュニケーションします。しかし、それを文字に置き換えてやりとりできるかといえば、また話は違ってきます。文字を持たない無文字社会は、いまでもたくさんあります。ことばを話すのは人間の本能だといわれています。本能ということは、異性に惹かれたり、食べられるものを嗅ぎわけたり、そういうことと同じだということです。だから、誰もがことばを使ってコミュニケーションします。しかし、それを文字に置き換えてやりとりできるかといえば、また話は違ってきます。文字を持たない無文字社会は、いまでもたくさんあります。本能ということは、異性に惹かれたり、食べられるものを嗅ぎわけたり、そういうことと同じだということです。だから、誰もがことばを使ってコミュニケーションします。しかし、それを文字に置き換えてやりとりできるかといえば、また話は違ってきます。文字を持たない無文字社会は、いまでもたくさんあります。ことばを話すのは人間の本能だといわれています。本能ということは、異性に惹かれたり、食べられるものを嗅ぎわけたり、そういうことと同じだということです。だから、誰もがことばを使ってコミュニケーションします。しかし、それを文字に置き換えてやりとりできるかといえば、また話は違ってきます。文字を持たない無文字社会は、いまでもたくさんあります。
右側に画像を表示する場合
画像のキャプションキャプションキャプションキャプション
ことばを話すのは人間の本能だといわれています。本能ということは、異性に惹かれたり、食べられるものを嗅ぎわけたり、そういうことと同じだということです。だから、誰もがことばを使ってコミュニケーションします。しかし、それを文字に置き換えてやりとりできるかといえば、また話は違ってきます。文字を持たない無文字社会は、いまでもたくさんあります。
文字は後天的に獲得するものです。小学校の国語の時間を思い出せば反論する人はいないと思いますが、識字率が高い日本にいるとつい忘れてしまいます。何もなく"読み書き"を手に入れた気になります。
ことばを話すのは人間の本能だといわれています。本能ということは、異性に惹かれたり、食べられるものを嗅ぎわけたり、そういうことと同じだということです。だから、誰もがことばを使ってコミュニケーションします。しかし、それを文字に置き換えてやりとりできるかといえば、また話は違ってきます。文字を持たない無文字社会は、いまでもたくさんあります。
文字は後天的に獲得するものです。小学校の国語の時間を思い出せば反論する人はいないと思いますが、識字率が高い日本にいるとつい忘れてしまいます。何もなく"読み書き"を手に入れた気になります。
右側に画像を表示する場合(テキスト回り込み)
画像のキャプションキャプション
文字は後天的に獲得するものです。小学校の国語の時間を思い出せば反論する人はいないと思いますが、識字率が高い日本にいるとつい忘れてしまいます。何もなく"読み書き"を手に入れた気になります。
ことばを話すのは人間の本能だといわれています。本能ということは、異性に惹かれたり、食べられるものを嗅ぎわけたり、そういうことと同じだということです。だから、誰もがことばを使ってコミュニケーションします。しかし、それを文字に置き換えてやりとりできるかといえば、また話は違ってきます。文字を持たない無文字社会は、いまでもたくさんあります。ことばを話すのは人間の本能だといわれています。本能ということは、異性に惹かれたり、食べられるものを嗅ぎわけたり、そういうことと同じだということです。だから、誰もがことばを使ってコミュニケーションします。しかし、それを文字に置き換えてやりとりできるかといえば、また話は違ってきます。文字を持たない無文字社会は、いまでもたくさんあります。本能ということは、異性に惹かれたり、食べられるものを嗅ぎわけたり、そういうことと同じだということです。だから、誰もがことばを使ってコミュニケーションします。しかし、それを文字に置き換えてやりとりできるかといえば、また話は違ってきます。文字を持たない無文字社会は、いまでもたくさんあります。ことばを話すのは人間の本能だといわれています。本能ということは、異性に惹かれたり、食べられるものを嗅ぎわけたり、そういうことと同じだということです。だから、誰もがことばを使ってコミュニケーションします。しかし、それを文字に置き換えてやりとりできるかといえば、また話は違ってきます。文字を持たない無文字社会は、いまでもたくさんあります。
sm表示では1段組にする場合
画像のキャプションキャプション
文字は後天的に獲得するものです。小学校の国語の時間を思い出せば反論する人はいないと思いますが、識字率が高い日本にいるとつい忘れてしまいます。何もなく"読み書き"を手に入れた気になります。
ことばを話すのは人間の本能だといわれています。本能ということは、異性に惹かれたり、食べられるものを嗅ぎわけたり、そういうことと同じだということです。だから、誰もがことばを使ってコミュニケーションします。しかし、それを文字に置き換えてやりとりできるかといえば、また話は違ってきます。文字を持たない無文字社会は、いまでもたくさんあります。ことばを話すのは人間の本能だといわれています。本能ということは、異性に惹かれたり、食べられるものを嗅ぎわけたり、そういうことと同じだということです。だから、誰もがことばを使ってコミュニケーションします。しかし、それを文字に置き換えてやりとりできるかといえば、また話は違ってきます。文字を持たない無文字社会は、いまでもたくさんあります。本能ということは、異性に惹かれたり、食べられるものを嗅ぎわけたり、そういうことと同じだということです。だから、誰もがことばを使ってコミュニケーションします。しかし、それを文字に置き換えてやりとりできるかといえば、また話は違ってきます。文字を持たない無文字社会は、いまでもたくさんあります。ことばを話すのは人間の本能だといわれています。本能ということは、異性に惹かれたり、食べられるものを嗅ぎわけたり、そういうことと同じだということです。だから、誰もがことばを使ってコミュニケーションします。しかし、それを文字に置き換えてやりとりできるかといえば、また話は違ってきます。文字を持たない無文字社会は、いまでもたくさんあります。
ボックス
強調表現など本文を区別して見せるために.box-*クラスがあります。これらはデフォルトで.subchapterの上下アキを継承していますが、文脈に応じ.chapterを付与して使用することができます。
ボーダーボックス
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
注意文ボックス
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
フォーム
入力欄
標準的な入力欄の見た目を得るには input要素に.inputクラスを付与します。.inputは最小幅を持ったinline-block要素です。
入力欄(ユーティリティ)
.btnのようにユーティリティclassを付与することで見た目をカスタマイズできます。