§34 Tab Strip
Tips
- タブ上に表示したテキストが長くなると、他タブの名称が見られなくなることがある
- １のタブと２のタブに長さの違うコンテンツを埋めたとき、ブラウザの戻るボタンを使用してページを行き来すると途中で文字が重なって表示されてしまうことがある（ただし、更新などをすればすぐ直る）
- 画像を入れた場合、どんなサイズで表示されるのかルールが不明
- NewとOldがあるが、NewはBody TextとImageが追加できるが、Oldはシンプルにテキスト入力のみ、Oldは使う必要はないかも
<New> has Text format for Filtered HTML, Full HTML, Plain Text, Embedded Script
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce blandit ante et dolor facilisis, at ornare elit pulvinar.
Aliquam at tellus ante. In eleifend ligula vitae auctor hendrerit.
Donec vehicula id velit in finibus.
Etiam quis elementum lorem, et vulputate velit.
- Nunc a dictum justo.
- Phasellus tincidunt mattis ex eu euismod.
<New> has Text format for Filtered HTML, Full HTML, Plain Text, Embedded Script
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce blandit ante et dolor facilisis, at ornare elit pulvinar.
Aliquam at tellus ante. In eleifend ligula vitae auctor hendrerit.
Donec vehicula id velit in finibus.
Etiam quis elementum lorem, et vulputate velit.
- Nunc a dictum justo.
- Phasellus tincidunt mattis ex eu euismod.
<New> has Text format for Filtered HTML, Full HTML, Plain Text, Embedded Script
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce blandit ante et dolor facilisis, at ornare elit pulvinar.
Aliquam at tellus ante. In eleifend ligula vitae auctor hendrerit.
Donec vehicula id velit in finibus.
Etiam quis elementum lorem, et vulputate velit.
- Nunc a dictum justo.
- Phasellus tincidunt mattis ex eu euismod.
- TUJ Top
<New> has Text format for Filtered HTML, Full HTML, Plain Text, Embedded Script
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce blandit ante et dolor facilisis, at ornare elit pulvinar.
Aliquam at tellus ante. In eleifend ligula vitae auctor hendrerit.
Donec vehicula id velit in finibus.
Etiam quis elementum lorem, et vulputate velit.
- Nunc a dictum justo.
- Phasellus tincidunt mattis ex eu euismod.
§35 Table
Tips
- 細かい設定ができないため、通常は使用しないルールになっている
- Mobileで見た時にはスクリーンに収まるが見えに工夫が必要か
Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
Row 1 | Row 1 | Row 1 | Row 1 | Row 1 |
Row 2 | Row 2 | Row 2 | Row 2 | Row 2 |
Row 3 | Row 3 | Row 3 | Row 3 | Row 3 |
Row 4 | Row 4 | Row 4 | Row 4 | Row 4 |
§36 Video
Tips
- Full widthではYouTube画面のアスペクト比がおかしくなるため、使用していない（Full widthにおけるアスペクト比をスクリプトで調整した動画はこのページを参照：https://www.tuj.ac.jp/law/cp/jd-semester-abroad）
- code used for fullwitdh video
<style>
.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
</style>
<div class="youtube">
<iframe width="727" height="409" src="https://www.youtube.com/embed/JWB2X6sD6No" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
- code used for fullwitdh video
- Side widthではYoutubeをembedする時はこのコンポーネントを使うとレスポンシブによく対応している
§37 Webform
Tips
- 現状では使用していない