コンテンツ1
だみーてきすとです。これは仮入力のためのだみーてきすとです。全く意味はございません。だみーてきすとです。これは仮入力のためのだみーてきすとです。全く意味はございません。だみーてきすとです。
特に意識せずにデザインの幅を入力すれば、
下の例では、1200以上では、434px固定、1200以下では画面幅に対する比率を守って縮小します。
全体幅を1120pxで中央揃え .wrap
全体幅を1080pxで中央揃え .wrap .wrap--small
レスポンシブでの表示・非表示
900以上で表示
900以下で表示
背景色 .bg--{色名称}で背景が付きます。
以下の赤いラインはスタイルガイドの確認用のラインなので実際のスタイルとは無関係。
※この関数で次のコードが出力できます。(引数にはメイン画像のパスをいれます。)
外側へ .row と、.row--col5
内包側へ.col
それぞれクラスをつけると5カラム〜2カラムのレイアウトになります。
ttl--balloon-orangeなどのクラスは見やすくするためだけにつけています。
.txt--center
.txt--right
.txt--orange
.txt--green
.txt--blue
.txt--pink
.txt--danger
背の高い文字.txt--tall100名
大きい文字.txt--large大きな文字です。
明朝体.txt--mincho
10/23火
アイコンフォントの利用方法
これはBEMに属せずWordPressの出力コードにあわせてます。
サイズは、small:250px,medium:300px,large:600px
btn--tallで背の高いボタン
btn--(色)で色を変更可能
色の種類はcommon.scssの$color-arrのすべて
グリッドのClass
.row,.col
を使って表現できます。
『.media-box』のコンテンツです。
画像が左に入り、そのサイズは498pxです。
テキストコンテンツは右に回り込みます。
タイトルのボーダーは『.ttl--bb-green』とすることで指定できます。
色の指定は『.ttl--bg-green』と同じです。
左の画像サイズが570pxのパターンです。
画像の親である『.media-box__img』に『.media-box__img--big』を追加することで対応できます。
タイトルのボーダーは『.ttl--bb-aqua-green』です。
『.media-box』のリバースパターンです。
画像が右に、テキストコンテンツが左に回り込みます。
親である『.media-box』に『.media-box--reverse』を追加することによって
表示を逆転させることが可能です。
タイトルのボーダーは『.ttl--bbThinGreen』と指定しています。
右の画像サイズが570pxのパターンです。
『.media-box__img--big』と『.media-box--reverse』を使用しています。
あと文字数が多くなった場合はこのように折り返さないですが仕様です。
こんなに長くなることはないと思いますが。。。
『.media-box』のさらに親の説明をいたします。
『.media-box』を『.media-wrap』で包み
各モデファイアで指示することにより
一括で『.media-box』を調整することが可能です。
以下、簡単に説明していきます。
モデファイアの指定がない『.media-wrap』は
各『.media-box』の設定を引き継ぎます。
『.media-box--reverse』の設定が引き継がれています。
モデファイアの指定を『--reverse』とすると
各『.media-box』の設定を無視して配置を変更します。
このボックスは『.media-box』ですが
設定が無視され『.media-box--reverse』と同じ配置になっています。
こちらは『.media-box--reverse』の設定が引き継がれています。
モデファイアの指定を『--reverse-odd』とすると
奇数番目の『.media-box』は『.media-box--reverse』と同じ配置、
偶数番目の『.media-box』は『.media-box』と同じ配置に強制的に行います。
このボックスは『.media-box』ですが
設定が無視され『.media-box--reverse』と同じ配置になっています。
このボックスは『.media-box--reverse』ですが
設定が無視され『.media-box』と同じ配置になっています。
モデファイアの指定を『--reverse-even』とすると
偶数番目の『.media-box』は『.media-box』と同じ配置、
奇数番目の『.media-box』は『.media-box--reverse』と同じ配置に強制的に行います。
このボックスは『.media-box--reverse』ですが
設定が無視され『.media-box』と同じ配置になっています。
このボックスは『.media-box』ですが
設定が無視され『.media-box--reverse』と同じ配置になっています。
以上が『.media-wrap』の説明になります。
.list-cube
.list-circle
.numbering__wrap
.numbering__wrap--vertical
.numbering__wrap--natural
テキスト | テキスト | テキスト | テキスト |
---|---|---|---|
テキスト | テキスト | テキスト | テキスト |
テキスト | テキスト | テキスト | テキスト |
テキスト | テキスト | テキスト | テキスト |
第1種奨学生 | 第2種奨学生 | |
---|---|---|
東大・国公立大医学科コース | 若干名 | 若干名 |
平成27年 |
|
---|---|
平成28年 |
|
だみーてきすとです。これは仮入力のためのだみーてきすとです。全く意味はございません。だみーてきすとです。これは仮入力のためのだみーてきすとです。全く意味はございません。だみーてきすとです。
Okinawa Prefecture (Japanese: Hepburn: Okinawa-ken?, Okinawan: Uchinaa-chin)
is the southernmost
prefecture of Japan.[1]
最後まで確認ありがとうございます。