カード
画像がもともと少し暗くなっていて、hover/touch時にもとの明るさに戻るタイプ
※ h5以降も使えますがh4と見た目が変わらないので不要です
記事中の文書構造は、アーティクル(文書) → チャプター(章) → サブチャプター(節) → パラグラフ(段落)という概念で考えます。
h2
で区切られる情報のまとまりをチャプター、h3
で区切られる情報のまとまりをサブチャプターとします。
これら見出しタグを用いるだけで上下のホワイトスペースは付与されますが、「見出しがないが情報のまとまりとして囲む」必要のある場合は、
.chapter
.subchapter
のclassを付与したdivで囲むことで h2, h3と同じ視覚的なアキを作ります。
チャプター、サブチャプターのまとまりは、ブロックコンテンツにおける「ブロック」「サブブロック」の概念に対応します。
文中でテキストリンクを設けたり、太字にしたい箇所はstrong
タグで表現することができます※1。strong
タグ以外の要素(span
dt
など)に太字を当てたいときは、.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表示は左寄せ
縦書表現したい部分について、汎用クラス.text-vertical
を付与してください(CSSのwriting-modeを使用しています)。ただし見出しなど短い単文への使用を想定しています。
※ input
などフォーム要素に指定する場合はdisabled
属性を指定してください。
カラムに入れる場合はこのようになる
ゴーストボタン(背景透過になっているボタン)は下記クラスを使用ください。
サイト外/別ドメインへのリンクであることを明示したい場合に使用します。
メニュー一覧への遷移や、すべて見るという文脈で使用可能です。
タッチデバイスのタッチ時にデバイスのハイライトカラー(-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
で囲んでください。
lg(md)表示と、sm表示とで画像ファイルそのものを出し分ける場合は、下記のように.img-replace
クラスを付与してください。
<img class="img-replace" src="#" data-src="/img/dummy/dummy_imgreplace_lg.png" alt="">
src
属性は空にせず、「#」を指定してください。data-src
属性には、lg版の画像パスを指定しておいてください。.video-container
は16:9の比率にリセットされています。動画の比率に応じ縦横比を変える場合は下記のように指定してください。
<div class="video-container aspect-16by10">
… 16:10の動画用<div class="video-container aspect-4by3">
… 4:3の動画用width
とheight
は指定しない。srcは「//」から始まる絶対パスとする。またデフォルトで下記パラメータを付与する。rel=0
… 再生終了後関連動画を非表示showinfo=0
… タイトルバーを非表示modestbranding=1
… コントロールバー内Youtubeロゴ非表示iv_load_policy=1
… アノテーションを非表示画像のキャプションキャプションキャプションキャプション
ことばを話すのは人間の本能だといわれています。本能ということは、異性に惹かれたり、食べられるものを嗅ぎわけたり、そういうことと同じだということです。だから、誰もがことばを使ってコミュニケーションします。しかし、それを文字に置き換えてやりとりできるかといえば、また話は違ってきます。文字を持たない無文字社会は、いまでもたくさんあります。
文字は後天的に獲得するものです。小学校の国語の時間を思い出せば反論する人はいないと思いますが、識字率が高い日本にいるとつい忘れてしまいます。何もなく"読み書き"を手に入れた気になります。
ことばを話すのは人間の本能だといわれています。本能ということは、異性に惹かれたり、食べられるものを嗅ぎわけたり、そういうことと同じだということです。だから、誰もがことばを使ってコミュニケーションします。しかし、それを文字に置き換えてやりとりできるかといえば、また話は違ってきます。文字を持たない無文字社会は、いまでもたくさんあります。
文字は後天的に獲得するものです。小学校の国語の時間を思い出せば反論する人はいないと思いますが、識字率が高い日本にいるとつい忘れてしまいます。何もなく"読み書き"を手に入れた気になります。
画像のキャプションキャプション
文字は後天的に獲得するものです。小学校の国語の時間を思い出せば反論する人はいないと思いますが、識字率が高い日本にいるとつい忘れてしまいます。何もなく"読み書き"を手に入れた気になります。
ことばを話すのは人間の本能だといわれています。本能ということは、異性に惹かれたり、食べられるものを嗅ぎわけたり、そういうことと同じだということです。だから、誰もがことばを使ってコミュニケーションします。しかし、それを文字に置き換えてやりとりできるかといえば、また話は違ってきます。文字を持たない無文字社会は、いまでもたくさんあります。ことばを話すのは人間の本能だといわれています。本能ということは、異性に惹かれたり、食べられるものを嗅ぎわけたり、そういうことと同じだということです。だから、誰もがことばを使ってコミュニケーションします。しかし、それを文字に置き換えてやりとりできるかといえば、また話は違ってきます。文字を持たない無文字社会は、いまでもたくさんあります。本能ということは、異性に惹かれたり、食べられるものを嗅ぎわけたり、そういうことと同じだということです。だから、誰もがことばを使ってコミュニケーションします。しかし、それを文字に置き換えてやりとりできるかといえば、また話は違ってきます。文字を持たない無文字社会は、いまでもたくさんあります。ことばを話すのは人間の本能だといわれています。本能ということは、異性に惹かれたり、食べられるものを嗅ぎわけたり、そういうことと同じだということです。だから、誰もがことばを使ってコミュニケーションします。しかし、それを文字に置き換えてやりとりできるかといえば、また話は違ってきます。文字を持たない無文字社会は、いまでもたくさんあります。
画像のキャプションキャプションキャプションキャプション
ことばを話すのは人間の本能だといわれています。本能ということは、異性に惹かれたり、食べられるものを嗅ぎわけたり、そういうことと同じだということです。だから、誰もがことばを使ってコミュニケーションします。しかし、それを文字に置き換えてやりとりできるかといえば、また話は違ってきます。文字を持たない無文字社会は、いまでもたくさんあります。
文字は後天的に獲得するものです。小学校の国語の時間を思い出せば反論する人はいないと思いますが、識字率が高い日本にいるとつい忘れてしまいます。何もなく"読み書き"を手に入れた気になります。
ことばを話すのは人間の本能だといわれています。本能ということは、異性に惹かれたり、食べられるものを嗅ぎわけたり、そういうことと同じだということです。だから、誰もがことばを使ってコミュニケーションします。しかし、それを文字に置き換えてやりとりできるかといえば、また話は違ってきます。文字を持たない無文字社会は、いまでもたくさんあります。
文字は後天的に獲得するものです。小学校の国語の時間を思い出せば反論する人はいないと思いますが、識字率が高い日本にいるとつい忘れてしまいます。何もなく"読み書き"を手に入れた気になります。
画像のキャプションキャプション
文字は後天的に獲得するものです。小学校の国語の時間を思い出せば反論する人はいないと思いますが、識字率が高い日本にいるとつい忘れてしまいます。何もなく"読み書き"を手に入れた気になります。
ことばを話すのは人間の本能だといわれています。本能ということは、異性に惹かれたり、食べられるものを嗅ぎわけたり、そういうことと同じだということです。だから、誰もがことばを使ってコミュニケーションします。しかし、それを文字に置き換えてやりとりできるかといえば、また話は違ってきます。文字を持たない無文字社会は、いまでもたくさんあります。ことばを話すのは人間の本能だといわれています。本能ということは、異性に惹かれたり、食べられるものを嗅ぎわけたり、そういうことと同じだということです。だから、誰もがことばを使ってコミュニケーションします。しかし、それを文字に置き換えてやりとりできるかといえば、また話は違ってきます。文字を持たない無文字社会は、いまでもたくさんあります。本能ということは、異性に惹かれたり、食べられるものを嗅ぎわけたり、そういうことと同じだということです。だから、誰もがことばを使ってコミュニケーションします。しかし、それを文字に置き換えてやりとりできるかといえば、また話は違ってきます。文字を持たない無文字社会は、いまでもたくさんあります。ことばを話すのは人間の本能だといわれています。本能ということは、異性に惹かれたり、食べられるものを嗅ぎわけたり、そういうことと同じだということです。だから、誰もがことばを使ってコミュニケーションします。しかし、それを文字に置き換えてやりとりできるかといえば、また話は違ってきます。文字を持たない無文字社会は、いまでもたくさんあります。
画像のキャプションキャプション
文字は後天的に獲得するものです。小学校の国語の時間を思い出せば反論する人はいないと思いますが、識字率が高い日本にいるとつい忘れてしまいます。何もなく"読み書き"を手に入れた気になります。
ことばを話すのは人間の本能だといわれています。本能ということは、異性に惹かれたり、食べられるものを嗅ぎわけたり、そういうことと同じだということです。だから、誰もがことばを使ってコミュニケーションします。しかし、それを文字に置き換えてやりとりできるかといえば、また話は違ってきます。文字を持たない無文字社会は、いまでもたくさんあります。ことばを話すのは人間の本能だといわれています。本能ということは、異性に惹かれたり、食べられるものを嗅ぎわけたり、そういうことと同じだということです。だから、誰もがことばを使ってコミュニケーションします。しかし、それを文字に置き換えてやりとりできるかといえば、また話は違ってきます。文字を持たない無文字社会は、いまでもたくさんあります。本能ということは、異性に惹かれたり、食べられるものを嗅ぎわけたり、そういうことと同じだということです。だから、誰もがことばを使ってコミュニケーションします。しかし、それを文字に置き換えてやりとりできるかといえば、また話は違ってきます。文字を持たない無文字社会は、いまでもたくさんあります。ことばを話すのは人間の本能だといわれています。本能ということは、異性に惹かれたり、食べられるものを嗅ぎわけたり、そういうことと同じだということです。だから、誰もがことばを使ってコミュニケーションします。しかし、それを文字に置き換えてやりとりできるかといえば、また話は違ってきます。文字を持たない無文字社会は、いまでもたくさんあります。
強調表現など本文を区別して見せるために.box-*
クラスがあります。これらはデフォルトで.subchapter
の上下アキを継承していますが、文脈に応じ.chapter
を付与して使用することができます。
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
標準的な入力欄の見た目を得るには input要素に.input
クラスを付与します。.input
は最小幅を持ったinline-block要素です。
.btnのようにユーティリティclassを付与することで見た目をカスタマイズできます。