» 【css】テンテンと学ぶFlexbox(テンセット)|ホームページ制作・運営からWEBデザイン、ウェブサイト企画作成を行っている名古屋市のホームページ制作会社「ABABAI」

【css】テンテンと学ぶFlexbox(テンセット)

スタッフブログ

  • 2018.04.12

    【css】テンテンと学ぶFlexbox(テンセット)

    顔アイコン

    今回は、珍しくコーデイングの話

    アババイでFlexboxのクラス名を作ったので、ご紹介です。

    その名も TEN SET

    TEN SETの由来

    元々は、Flexboxの勉強中に、FlexboxのFlを使って クラス名を.fl-○○としてクラスを付けたかったが、アババイで.fl-○○はfloat(フロート)の短縮ワードだった。

    なので、普段から打ちなれた、自分のアババイである、あだ名テンテンのtenをとって、ten-○○って付けちゃえという、安直な発想でうまれた物です。

    まさか、そのまま使われてしまうとは(´・ω・`)

    TEN SETの中身

    ここから ダウンロードできます。(長いので記載せず txtファイルのzipです)

    TEN SET ダウンロード

    TEN SET 有用性

    ・clearfixを使わずとも左右のレイアウトができる。
    ・横と同じ高さになるので、ガタガタのレイアウトにならない。
    ・PCコーディング時にsp・レスポンシブの動きを想定していなくても、sp用 TEN SETで上書きしてテキスト→画像から、画像→テキストなどのスマホ・レスポンシブの動きが容易にできる。
    ・デザインが複雑なアババイでは必須かも

    TEN SET 使用状の注意と考え方

    クラス.tenの下にある子要素がdisplay: flex;になる。

    ・NG例

    <div class=”ten”>
    <img src=”../images/common/hogehoge.jpg” alt=”画像”/>
    <p>てきすと</p>
    </div>

    この場合は、imgがdisplay: flex;になり、テキスト箇所が長くなると
    imgもpタグの高さと同じに高さになろうとため、imgが縦長になり解像度が変わってします。

    ・対処

    <div class=”ten”>
    <div><img src=”../images/common/hogehoge.jpg” alt=”画像”/></div>
    <p>てきすと</p>
    </div>

    imgもdivなどで囲む、これにより、divがdisplay: flex;になり
    imgが縦長になることは、ありません。

    ・横幅が解るものは、できるだけ指定する、IEでおかしくなるため
    ・Flexboxは.oriのクラスが無いと折り返さないので、折り返しが必要な場合は、.oriも指定すること

    TEN SET 各種の動き説明

    ■ PC編

    .ten(基本)

    主に左右のレイアウトに使用

    <div class=”ten”>
    <p>てきすと</p>
    <div><img src=”../images/common/hogehoge.jpg” alt=”画像”/></div>
    </div>

    .ori(折り返し)

    Flexboxは.oriのクラスが無いと折り返さないので、折り返しが必要な場合は、.oriも指定すること

    横3列 縦2列のリストを作成する場合

    oriの指定がない場合(折り返さない)

    <ul class=”ten”>
    <li>りすと1</li>
    <li>りすと2</li>
    <li>りすと3</li>
    <li>りすと4</li>
    <li>りすと5</li>
    <li>りすと6</li>
    </ul>

    oriを指定(折り返す)

    <ul class=”ten ori”>
    <li>りすと1</li>
    <li>りすと2</li>
    <li>りすと3</li>
    <li>りすと4</li>
    <li>りすと5</li>
    <li>りすと6</li>
    </ul>

    .ten-ce(左右に振る 3つ以上は均等の幅を保ち均等に振る)

    <div class=”ten-ce”>
    <p>てきすと</p>
    <div><img src=”../images/common/hogehoge.jpg” alt=”画像”/></div>
    </div>

    ※システムのリスト等には、使用しない。横3列 縦2列のリストを作成する場合、5つの場合下の段で左右で振れてしまう。

    <ul class=”ten-ce ori”>
    <li>りすと1</li>
    <li>りすと2</li>
    <li>りすと3</li>
    <li>りすと4</li>
    <li>りすと5</li>
    </ul>

    .ten-txt-ce(.tenとの組み合わせで、真ん中に)

    見出し英語・日本語などの組み合わせで、日本語を動的に真ん中にするとき

    <div class=”ten”>
    <p class=”en”>NEWS</p>
    <p class=”jp ten-txt-ce”>ニュース</p>
    </div>

    .ten-ue(.tenとの組み合わせで、上揃え)

    <div class=”ten”>
    <p class=”en”>NEWS</p>
    <p class=”jp ten-ue”>ニュース</p>
    </div>

     

    .ten-u(.tenとの組み合わせで、下揃え)

    <div class=”ten”>
    <p class=”en”>NEWS</p>
    <p class=”jp ten-u”>ニュース</p>
    </div>

    .ten-r(.tenとの組み合わせで、右揃え)

    <div class=”ten”>
    <p class=”en”>NEWS</p>
    <p class=”jp ten-r”>ニュース</p>
    </div>

     

    .ten-mce(真ん中中央寄せ)

    アババイでは、主にh2のテキストを真ん中中央に、高さを指定しなくてもできるが、
    IEで上にずったようになる為、なるべく高さを入れること

    <div class=”h2-Box ten-mce”>
    <h2 class=”ttl”>
    <span class=”jp”>ニュース</span>
    <span class=”en”>NEWS</span>
    </h2>
    </div>

    .order(左右上下等を入れ替えたい時に変更)

    ※orderのデフォルト値: 0

    order無し

    <div class=”ten-ce”>
    <p>てきすと</p>
    <div><img src=”../images/common/hogehoge.jpg” alt=”画像”/></div>
    </div>

    order有り

    <div class=”ten-ce”>
    <p>てきすと</p>
    <div class=”order”><img src=”../images/common/hogehoge.jpg” alt=”画像”/></div>
    </div>

    【お守り】

    .ten-t(PCでは、お守り程度 横並びを立て並びに変更する)
    .ten-rt(PCでは、お守り程度 横並びを、上下を反転して立て並びに変更する)

    ■ SP レスポンシブ編

    基本的な動きは、PCと同じです。
    スマホのみ効かせたい箇所に、sp-ten等のクラスを付けます。

    PCと違う点は、sp-ten-t、sp-ten-rtなどで上書きができること

    .sp-ten-t(PCでtenを設定したものを縦表示に変更)
    ■ PC 表示

    <div class=”ten sp-ten-t”>
    <p>てきすと</p>
    <div><img src=”../images/common/hogehoge.jpg” alt=””/></div>
    </div>

    ■ SP 表示

    上記の.tenにsp-ten-tを追記

    <div class=”ten sp-ten-t”>
    <p>てきすと</p>
    <div><img src=”../images/common/hogehoge.jpg” alt=”画像”/></div>
    </div>

    .sp-ten-rt(PCでtenを設定したものを上下反転して、縦表示に変更)
    ■ PC 表示

    <div class=”ten sp-ten-rt”>
    <p>てきすと</p>
    <div><img src=”../images/common/hogehoge.jpg” alt=””/></div>
    </div>

    ■ SP 表示

    上記の.tenにsp-ten-rtを追記

    <div class=”ten sp-ten-rt”>
    <p>てきすと</p>
    <div><img src=”../images/common/hogehoge.jpg” alt=”画像”/></div>
    </div>

    たまには、コーディングの記事を書いてみました。
    また機会があれば、書きますね。

    でわでわ

    フェイスブックシェアボタン

名古屋で1番真面目なウェブ会社!! ABABAI お電話でのお問い合わせはこちら

メールでのお問い合わせ リンクボタン

カレンダー

2018年6月
« 5月    
 123
45678910
11121314151617
18192021222324
252627282930  

MENU

求人情報本社・広島オフィス

お問い合わせ

ページの先頭へ

お問い合わせ

閉じる

アババイめちゃ凄いこと

建築会社に選ばれる5.5の理由

制作実績

お客様の声

スタッフ紹介

代表挨拶

新着情報

会社概要&アクセス