セクション
<section class="main-section"> ---- </section>
<section class="m-section"> ---- </section>
<section class="s-section"> ---- </section>
画像配置
<div class="img-2-column"> <div class="img-2-column__row"> <div class="img-2-column__item"><figure><img src="/assets/images/medical-treatment/hypothalamic-hamartoma-center/hyp-graph.jpg" width="750" height="519" class="max" alt=""></figure></div> <div class="img-2-column__item"><figure><img src="/assets/images/medical-treatment/hypothalamic-hamartoma-center/hyp-world.jpg" width="750" height="519" class="max" alt=""></figure></div> </div> </div>
<div class="img-3-column"> <div class="img-3-column__row"> <div class="img-3-column__item"><figure><img src="/assets/images/medical-treatment/hypothalamic-hamartoma-center/hyp-graph.jpg" width="750" height="519" class="max" alt=""></figure></div> <div class="img-3-column__item"><figure><img src="/assets/images/medical-treatment/hypothalamic-hamartoma-center/hyp-world.jpg" width="750" height="519" class="max" alt=""></figure></div> <div class="img-3-column__item"><figure><img src="/assets/images/medical-treatment/hypothalamic-hamartoma-center/hyp-graph.jpg" width="750" height="519" class="max" alt=""></figure></div> </div> </div>
<div class="img-4-column"> <div class="img-4-column__row"> <div class="img-4-column__item"><figure><img src="/assets/images/medical-treatment/hypothalamic-hamartoma-center/hyp-graph.jpg" width="750" height="519" class="max" alt=""></figure></div> <div class="img-4-column__item"><figure><img src="/assets/images/medical-treatment/hypothalamic-hamartoma-center/hyp-world.jpg" width="750" height="519" class="max" alt=""></figure></div> <div class="img-4-column__item"><figure><img src="/assets/images/medical-treatment/hypothalamic-hamartoma-center/hyp-graph.jpg" width="750" height="519" class="max" alt=""></figure></div> <div class="img-4-column__item"><figure><img src="/assets/images/medical-treatment/hypothalamic-hamartoma-center/hyp-world.jpg" width="750" height="519" class="max" alt=""></figure></div> </div> </div>
高さ揃え
高さを揃えたい画像の「img-2-column__item」のclassに「fitting-item」をつけてください。
<div class="img-2-column"> <div class="img-2-column__row"> <div class="img-2-column__item"><figure><img src="sample.jpg" width="750" height="519" class="max" alt=""></figure></div> <div class="img-2-column__item fitting-item"><figure><img src="sample.jpg" width="750" height="519" class="max" alt=""></figure></div> </div> </div>
<div class="img-3-column"> <div class="img-3-column__row"> <div class="img-3-column__item"><figure><img src="sample.jpg" width="750" height="519" class="max" alt=""></figure></div> <div class="img-3-column__item"><figure><img src="sample.jpg" width="750" height="519" class="max" alt=""></figure></div> <div class="img-3-column__item fitting-item"><figure><img src="sample.jpg" width="750" height="519" class="max" alt=""></figure></div> </div> </div>
<div class="img-4-column"> <div class="img-4-column__row"> <div class="img-4-column__item"><figure><img src="sample.jpg" width="750" height="519" class="max" alt=""></figure></div> <div class="img-4-column__item"><figure><img src="sample.jpg" width="750" height="519" class="max" alt=""></figure></div> <div class="img-4-column__item"><figure><img src="sample.jpg" width="750" height="519" class="max" alt=""></figure></div> <div class="img-4-column__item fitting-item"><figure><img src="sample.jpg" width="750" height="519" class="max" alt=""></figure></div> </div> </div>
テキスト + 画像
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<div class="is-thumb-column"> <div class="is-thumb-column__row"> <div class="is-thumb-column__text"> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> <div class="is-thumb-column__thumb"><figure><img src="/assets/images/medical-treatment/center-list/hypothalamic-hamartoma-center/hyp-graph.jpg" width="750" height="519" class="max" alt=""></figure><figcaption class="center">画像説明テキスト画像説明テキスト</figcaption></div> </div> </div>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<div class="is-thumb-column-around"> <div class="is-thumb-column-around__row"> <div class="is-thumb-column-around__thumb"> <figure> <img src="/assets/images/medical-treatment/center-list/hypothalamic-hamartoma-center/hyp-world.jpg" width="750" height="519" class="max" alt=""/> </figure> <figcaption class="center"> 画像説明テキスト画像説明テキスト </figcaption> </div> <p> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </p> </div> </div> </div>
追加タグ／記述メモ
汎用タグメモ
テキストを左よせ
.left {
text-align: left;
}
記述：class="left"
テキストを中央よせ
.center {
text-align: center;
}
記述：class="center"
テキストを右よせ
.right {
text-align: right;
}
記述：class="right"
テキストサイズ大（新規追加タグ）
.font-size-big {
font-size: 200%;
}
記述：class="font-size-big"
画像調整
＜div class="row align-items-baseline"＞ → ＜div class="img-○-column__row"＞ に変更してください。
※並んでる画像の枚数に応じて○の部分に数字を入れてください。
例：2枚の場合「2」、3枚の場合「3」
手順2：
＜div class="col-md-6 mb-1 mt-5"＞ → ＜div class="img-○-column__item"＞ に変更してください。
※並んでる画像の枚数に応じて○の部分に数字を入れてください。
手順3：
サイズを合わせたい画像の＜div class="img-○-column__item"＞タグのclassの中に「fitting-item」を入れてください。
手順1classコード：img-数字-column__row
手順2classコード：img-数字-column__item
手順3classコード：img-数字-column__item fitting-item
表示・非表示
class属性「icon-none」を記述
テーブル
tdタグにclass属性「class="color--gray"」を記述
（公募・調達情報ページのテーブル参考）
