たねっぱ！ » yanoppa! https://taneppa.net コツコツあつめるWeb作りのためのたね　たねっぱ！Web系情報ブログ　Webのお役立ちネタ配信中！ Tue, 09 May 2023 00:02:06 +0000 ja hourly 1 http://wordpress.org/?v=3.5.1 【JQueryライブラリ】簡単に高さを揃えられるjquery.tile.jsを使ってみよう。 https://taneppa.net/tilejs/ https://taneppa.net/tilejs/#comments Thu, 30 Apr 2015 02:12:31 +0000 yanoppa! https://taneppa.net/?p=2508

【JQueryライブラリ】簡単に高さを揃えられるjquery.tile.jsを使ってみよう。

こんばんちわ、やのっぱです(´・ω・｀)v

今回は良く利用するJQueryライブラリ、tile.jsの使い方をお話していきます。
それではやっていきましょう。

まずは設置から

まずはダウンロードし、設置をしていきます。

配布元のjquery.tile.js Demosから【Download compressed】(compressedはmin化、uncompressedは展開された状態です)を右クリックで保存、またはクリックして出てきたソースを保存またはコピペしてjquery.tile.jsの名前で保存し任意のフォルダに格納します。

次に、jQueryとjquery.tile.jsをhead内に読み込み、使用出来るようにします。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="格納場所のパスをいれます/jquery.tile.js"></script>

これでとりあえず読み込まれ使用出来る状態です。

このようなHTMLを用意してみました。
画像とテキストの入ったliですね。
これにtileを適応すると、一番高さがあるものに揃います。

<ul class="testList clearfix">
	<li class="testBox">
		<p class="img"><img src="http://placehold.jp/150x150.png"></p>
		<p class="text">テキストテキストテキストテキストテキスト</p>
	</li>
	<li class="testBox">
		<p class="img"><img src="http://placehold.jp/150x150.png"></p>
		<p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
	</li>
	<li class="testBox">
		<p class="img"><img src="http://placehold.jp/150x150.png"></p>
		<p class="text">テキストテキストテキストテキスト</p>
	</li>
	<li class="testBox">
		<p class="img"><img src="http://placehold.jp/150x150.png"></p>
		<p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	</li>
	<li class="testBox">
		<p class="img"><img src="http://placehold.jp/150x150.png"></p>
		<p class="text">テキストテキストテキストテキストテキストテキストテキスト</p>
	</li>
	<li class="testBox">
		<p class="img"><img src="http://placehold.jp/150x150.png"></p>
		<p class="text">テキストテキストテキストテキストテキスト</p>
	</li>
	<li class="testBox">
		<p class="img"><img src="http://placehold.jp/150x150.png"></p>
		<p class="text">テキストテキストテキスト</p>
	</li>
	<li class="testBox">
		<p class="img"><img src="http://placehold.jp/150x150.png"></p>
		<p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	</li>
</ul>

指定class全てに適用

使用方法は至って簡単です。
head内にこちらを記述します

<script type="application/javascript">
  $(function(){
    $(".testBox").tile();
  });
</script>

これで、class .testBoxがついている要素全てが一番高い要素の高さになります。
しかし、これだと具合がわるいこともしばしばです。
なので、グループ分けをすることもできます。

個数を指定して適用

<script type="application/javascript">
  $(function(){
    $(".testBox").tile(4);  
  });
</script>

このように.tile();の()の中に数字をいれることで数字の数ごとで揃わせることができます。
4であるならば、.testBox4つずつ揃うようになります。

テキストのみの場合はこれでOKです。
上記のHTMLのように画像が入っているとなると、多少付け足しが必要になってきます。
画像が入っていると、画像を読み込む前にtile.jsが実行されてしまうからです。
付け足したのがこちらです

画像を含む場合の記述

<script type="application/javascript">
  $(window).load(function(){
    $(".testBox").tile(4);
  });
</script>

$(function～のところを$(window).load(function～とつけたすことで、画像を読み込んでから実行となります。
これで、画像を含んだ場合でも崩れることはなくなります。
簡単な記述で実装でき、とても便利なのでぜひ使用してみてください。それではっ

]]> https://taneppa.net/tilejs/feed/ 0 CSSの【display table編】プロパティでよく使うものをあつめてみた。(第二回) https://taneppa.net/display_other02/ https://taneppa.net/display_other02/#comments Tue, 14 Apr 2015 02:51:46 +0000 yanoppa! https://taneppa.net/?p=2387

目
次
へ
戻
る

CSSの【display】プロパティでよく使うものをあつめてみた【第二回 table編】

前回の続きでございます。(´・ω・｀)v

今回は前回でやり残した、tableやinline-table関係を掘り下げてみます。

flexなど掘り下げた第一回はこちら
おなじく目次でページ移動しますのでお気をつけください。

では順番に見て行きましょう！

table

さて、今回はこちら【display:table;】です
ここでは【display:table;】とそれに付随する【display:table-cell;】などもあわせて一挙にご紹介します。

前回での流れ通り、この値を与えると強制的にtable要素のようにかわります。
tableとその中のcellをdivなどを使ってつくるのですが、その前にtableの利点を考えてみましょう。
ほぼtableで組まないと出来ないこと、まずはフレキシブルな枠組みですね。
たとえばfloatで3カラムをつくった場合、高さはそれぞれのカラムで違ってしまいますが、tableであれば一番長いカラムに合わせて3カラムが均等な高さにそろいます。
それに、borderの繋ぎ目が簡単ですね。floatだと:first-childやclassをつかってborderが重ならない様にしなければいけませんが、tableだとその手間がありません。
それでは、floatとtableの違いを見てみましょう

例

HTML

      <h4 class="testTit">floatの場合</h4>
      <div class="reiBox clearfix">
        <div class="inBox"><h5 class="tit">カラムその１</h5><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div>
        <div class="inBox"><h5 class="tit">カラムその２</h5><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div>
        <div class="inBox last"><h5 class="tit">カラムその３</h5><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div>
      </div>
      <h4 class="testTit">tableの場合</h4>
      <table class="reiTbl">
        <tbody>
          <tr>
            <td><h5 class="tit">カラムその１</h5><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></td>
            <td><h5 class="tit">カラムその２</h5><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></td>
            <td><h5 class="tit">カラムその３</h5><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></td>
          </tr>
        </tbody>
      </table>




CSS

      <style>
        .testTit {
          text-align:center;
        }
        .reiBox {
          max-width: 600px;
          margin:0 auto;
        }
        .reiBox .inBox {
          float:left;
          max-width:196px;
          border:solid #B06715;
          border-width: 2px 0 2px 2px;
        }
        .reiBox .inBox.last {
          border:2px solid #B06715;
        }
        .reiTbl {
          max-width:600px;
          margin:0 auto;
          border-collapse:collapse;
        }
        .reiTbl td {
          max-width:196px;
          border:2px solid #B06715;
          vertical-align:top;
        }
      </style>




floatの場合

カラムその１

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

カラムその２

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

カラムその３

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

tableの場合

カラムその１

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
カラムその２

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
カラムその３

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

tableの利点としてもう一つ、上下の中央揃えが容易にできるようになります。
vertical-align:middle;がtableのcellに内包されるインライン要素に適応されるからですね。
たとえば、見出しの頭に大きなアイコン画像を置いた状態や、他の見出し文が改行されたときも上下中央基準にしたいときは、vertical-alignを使いたいです。でも、通常のブロック要素には適応されません。
特性として、インライン要素とテーブルセルにしか適応されないからです。
しかし、このdisplayプロパティを使うことで、通常のブロック要素でも容易に出来るようになります。(*´ω｀*)ﾍﾞﾝﾘ

ですが、ここで注意点
display:table;は【IE7以下は対応していません】
近年、IE7への対応が減っていきいるとはいえ、まだまだ現役なIE7以下のIEシリーズちゃん達。。。
対応ブラウザがIE8以上で良いのであればじゃんじゃん使ってよいとおもいます。

では、先ほどのfloatで作った3カラムをそのままtableレイアウトにしてみましょう

float組だったモデルをdisplay:table;とdisplay:table-cell;でtable化してみます

HTML

    <div class="reiBox02 clearfix">
        <div class="inBox"><h5 class="tit">カラムその１</h5><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div>
        <div class="inBox"><h5 class="tit">カラムその２</h5><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div>
        <div class="inBox last"><h5 class="tit">カラムその３</h5><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div>
    </div>




CSS

    <style>
        .reiBox02 {
          display:table;
          max-width: 600px;
          margin:0 auto;
          border-collapse:collapse;/* 重複するborderを合体させます */
        }
        .reiBox02 .inBox {
          display:table-cell;
          max-width:196px;
          border:2px solid #B06715;
        }
    </style>




カラムその１

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

カラムその２

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

カラムその３

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

このように、tableレイアウトと同じ様になります。
なので、ここにvertical-align:middle;をいれると全体が上下中央揃えになります。

HTML

    <div class="reiBox02 clearfix">
        <div class="inBox middle"><h5 class="tit">カラムその１</h5><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div>
        <div class="inBox middle"><h5 class="tit">カラムその２</h5><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div>
        <div class="inBox middle last"><h5 class="tit">カラムその３</h5><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div>
    </div>




CSS

    <style>
        .reiBox02 .inBox.middle {
          vertical-align:middle;
        }
    </style>




カラムその１

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

カラムその２

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

カラムその３

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

上下中央揃えになりましたね。しかし、下記ようなtableレイアウトも再現することはできますがわざわざする必要がないので、この場合はtableで組むほうがいいと思います。

HTML

    <table class="reiTbl02">
      <tr>
        <th>カラムその１</th>
        <th>カラムその２</th>
        <th>カラムその３</th>
      </tr>
      <tr>
        <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
        <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
        <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
      </tr>
    </table>




CSS

    <style>
      .reiTbl02 {
          max-width:600px;
          margin:0 auto;
          border-collapse:collapse;
      }
      .reiTbl02 tr th {
          max-width:196px;
          border:2px solid #B06715;
          vertical-align:middle;
          text-align:center;
      }
      .reiTbl02 tr td {
          border:2px solid #B06715;
          vertical-align:top;
      }
    </style>




カラムその１ カラムその２ カラムその３
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

display:table;で簡易再現

HTML

      <div class="reiBox03">
      	<div class="reiBox03_1">
      	  <h5 class="tit">カラムその１</h5>
      	  <h5 class="tit">カラムその２</h5>
      	  <h5 class="tit">カラムその３</h5>
      	</div>
      	<div class="reiBox03_2">
      	  <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      	  <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      	  <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      	</div>
      </div>




CSS

      <style>
        .reiBox03 {
          display: table;
          max-width: 600px;
          margin: 0 auto;
          border-collapse: collapse;
        }
        .reiBox03_1 {
          display: table-row; /* いわゆるtrです */
        }
        .reiBox03_1 .tit {
          display: table-cell;
          width: 33.33%;
          border: 2px solid #B06715;
          vertical-align: middle;
          text-align: center;
        }
        .reiBox03_2 {
          display: table-row; /* いわゆるtrです */
        }
        .reiBox03_2 .txt {
          display: table-cell;
          width: 33.33%;
          border: 2px solid #B06715;
        }
      </style>




カラムその１
カラムその２
カラムその３

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

このように、trに該当するボックスを使わなければならないなど、とても面倒になります。
このような場合はtableで組むほうがいいですね！

話は戻りまして、このdisplay:table;をつかって出来る有効な使用例をご紹介します。
先に言いましたが、見出しなどで高さが変わっても上下中央揃えにしたい場合などはとても有効です。

見出しなどで使える使用例

HTML

      <div class="reiBox04 clearfix">
        <div class="inBox"><p class="titImg">アイコン</p><h5 class="tit">見出し０１</h5></div>
      </div>
      <div class="reiBox04 clearfix">
        <div class="inBox"><p class="titImg02">アイコン</p><h5 class="tit">見出しその２</h5></div>
      </div>
      <div class="reiBox04 clearfix">
        <div class="inBox"><p class="titImg">アイコン</p><h5 class="tit">見出しその３<br>見出しその３見出しその３<br>見出しその３見出しその３見出しその３</h5></div>
      </div>




CSS

      <style>
        .reiBox04 {
          margin-bottom:10px;
        }
        .reiBox04 .inBox {
          display:table;
          vertical-align:middle;
        }
        .reiBox04 .inBox .titImg {
          display:table-cell;
          max-width:50px;
          height:50px;
          background:#C1FFE9;
          vertical-align: middle;
          text-align:center;
          font-size:12px;
        }
        .reiBox04 .inBox .titImg02 {
          display:table-cell;
          max-width:100px;
          height:100px;
          background:#C1FFE9;
          vertical-align: middle;
          text-align:center;
          font-size:12px;
        }
        .reiBox04 .inBox .tit {
          display:table-cell;
          padding-left:10px;
          vertical-align: middle;
          font-size:16px;
        }
      </style>




アイコン

見出し０１

アイコン

見出しその２

アイコン

見出しその３
見出しその３見出しその３
見出しその３見出しその３見出しその３

見出し０２はアイコンが大きくなった場合、見出し０３は見出し文が改行されて縦に伸びた場合を想定しています。
アイコンの文字が画像の場合同じように中央にいきます。

あまりなさそうで結構あるケースですので、覚えておくと役に立ちます！(´・ω・｀)ｂ
注意点は、親要素にdisplay:table;を入れ、子要素にdisplay:table-cell;のみを設定した場合、table:cell;は全て横並びになってしまうことです。
テーブルでいうとtrがひとつしか無い状態になるので、その仕組さえわかれば大丈夫とおもいます。
グループ分けはこの後ご説明いたします。

inline-table

次はinline-tableです。
その名の通り、文章の文節と同じよう行内での扱いとなるtable要素が生成されます。
display:inline-block;のtable版ですね。

それでは少し例を作ってみます。

例

HTML

      <div class="reiBox05">
        あいうえお
        <table class="reiTbl03">
          <tr>
            <td>か</td>
            <td>き</td>
          </tr>
          <tr>
            <td>く</td>
            <td>け</td>
          </tr>
          <tr>
            <td colspan="2">こ</td>
          </tr>
        </table>
        さしすせそ
      </div>
      <div class="reiBox05_2">
        ほかにも<p class="txt">
        <span class="frame">こ<br>ん</span>
        <span class="frame">な<br>こ</span>
        <span class="frame">と<br>も</span>
        <span class="frame">で<br>き</span>
        <span class="frame">ま<br>す</span></p>
      </div>




CSS

      <style>
        .reiBox05 {
        }
        .reiBox05 .reiTbl03 {
          display:inline-table;
          max-width:100px;
          border-collapse:collapse;
        }
        .reiBox05 .reiTbl03 td{
          border:1px solid #B06715;
          text-align:center;
        }
        .reiBox05_2 {
        }
        .reiBox05_2 .txt {
          display:inline-table;
          border-collapse:separate;
          border-spacing:15px;
        }
        .reiBox05_2 .txt .frame {
          display:table-cell;
          padding:2px;
          border:1px solid #B06715;
          font-weight:bold;
        }
      </style>




あいうえお
か き
く け
こ
さしすせそ
ほかにも

こ
ん な
こ と
も で
き ま
す

使い方はその都度の案件のケースに合わせてですが、inlineとしてtableを扱うことができる。
という程度の認識で良いと思います。

table-header-groupその他

ここまでするケースはまず無いのですが、tableを使わずにtableとほぼ同じ挙動のものを作ることが出来ます。
しかし、colspanなどが使用できないので、実用性はないです。 なのでこのへんは、知識としてちょっと知っておくくらいで良いと思います。

値表

table table要素と同じ挙動に変更する
table-caption caption要素と同じ挙動に変更する
table-header-group thead要素と同じ挙動に変更する
table-row-group tbody要素と同じ挙動に変更する
table-footer-group tfoot要素と同じ挙動に変更する
table-row tr要素と同じ挙動に変更する
table-cell th要素、td要素と同じ挙動に変更する

使うであろうものはこのくらいです。
それではdivを使ってモデルをつくってみます。
こちらのソースを参照していただくと、なんとなく構造のつくりがわかると思います。
theadやtbodyってなんだっけ？というかたはtableの基本をもう一度見なおしてみましょう。

HTML

      <div class="reiBox06">
        <div class="caption">キャプションです</div>
        <div class="thead">
          <div class="headerBox">
            <h4 class="tit">タイトル01</h4>
            <h4 class="tit">タイトル02</h4>
            <h4 class="tit">タイトル03</h4>
            <h4 class="tit">タイトル04</h4>
            <h4 class="tit">タイトル05</h4>
          </div>
        </div><!-- / .thead -->
        <div class="tbody">
          <div class="txtBox">
            <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
          </div>
          <div class="txtBox">
            <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
          </div>
          <div class="txtBox">
            <p class="txt">テキストテキストテキストテキストテキスト</p>
            <p class="txt">テキストテキストテキストテキストテキスト</p>
            <p class="txt">テキストテキストテキストテキストテキスト</p>
            <p class="txt">テキストテキストテキストテキストテキスト</p>
            <p class="txt">テキストテキストテキストテキストテキスト</p>
          </div>
        </div><!-- / .tbody -->
        <div class="tfoot">
          <div class="footerBox"><p class="txt"></p><p class="txt"></p><p class="txt">フッターになります</p><p class="txt"></p><p class="txt"></p></div>
        </div>
      </div>




CSS

      <style>
        .reiBox06 {
          display: table;
          border-collapse: collapse;
          max-width: 680px;
          margin: 0 auto;
        }
        
        .reiBox06 .caption {
          display: table-caption;
          padding: 6px 0;
          text-align: center;
          font-size: 18px;
          font-weight: bold;
        }
        
        .reiBox06 .thead {
          display:table-header-group;
        }
  
        .reiBox06 .thead .headerBox {
          display:table-row;
        }
        
        .reiBox06 .thead .headerBox .tit {
          display: table-cell;
          padding: 6px 0;
          border: 1px solid #B06715;
          text-align: center;
        }
        
        .reiBox06 .tbody {
          display:table-row-group;
        }
        
        .reiBox06 .tbody .txtBox {
          display:table-row;
        }
        
        .reiBox06 .tbody .txtBox .txt {
          display:table-cell;
          padding: 8px;
          border:1px solid #B06715;
        }
        
        .reiBox06 .tfoot {
          display:table-footer-group;
        }
        
        .reiBox06 .tfoot .footerBox {
          display:table-row;
          border:1px solid #B06715;
  
        }
        
        .reiBox06 .tfoot .footerBox .txt {
          display:table-cell;
          padding: 6px 0;
        }
      </style>




キャプションです

タイトル01

タイトル02

タイトル03

タイトル04

タイトル05

テキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキスト

フッターになります

と言った感じで、tableもどきが作れます。
結合が出来ない（やり方あったら教えて下さい。）ので、実用で使う場面でいうとレスポンシブの時、もともと文章だったものを表にしたり、その逆をしたりといったケースのときでしょうか。
そうそう無いですが、知っているといざというときにさっと対応出来て良いと思います(´・ω・｀)ｂ

これでこのシリーズは終わりです。
おもったより、ボリューミーになりましたが、読んでくださった方に感謝です。
それでは、良きコーディングライフを(´・ω・｀)ﾉｼ

第一回はこちら

]]> https://taneppa.net/display_other02/feed/ 0 CSSの【display list-item・flex・その他編】プロパティでよく使うものをあつめてみた(第一回) https://taneppa.net/display_other01/ https://taneppa.net/display_other01/#comments Sat, 04 Apr 2015 02:50:17 +0000 yanoppa! https://taneppa.net/?p=2338

目
次
へ
戻
る

CSSの【display】プロパティでよく使うものをあつめてみた。【第一回 list-item・flex・その他編】

みなさま、お久しぶりでございます。やのっぱでございます(´・ω・｀)ﾌﾞﾋｰ

今回はCSSの display: inline、display: block、display: inline-block をマスターしよう！で紹介していますdisplayプロパティの他の値を掘り下げてみようとおもいます。

displayはよくinlineやblock,inline-block,noneを使用しますが、他にもたくさんの値が用意されています。
たくさんありすぎるので、使用しなさそうなcompact、ran-inやテスト段階のgridなどは省いていますが、参考になれば幸いです。

ボリュームが大きくなったので、二回に分けて投稿しました。
第二回はこちら
目次からも移動できるようにしています。

では順番に見て行きましょう！

none

おなじみのdisplay:none;です。
この値をあたえると、その要素の表示を非表示にします。
レイアウトからも消えるので、表示上無かったことになります。

注意すべきは、与えた要素の子要素全てが非表示になることです。

block

こちらもおなじみのdisplay:block;です。
この値をあたえると、その要素はブロック要素になります。

ブロック要素？なにそれ？おいしいの？っという方はこちらCSSの display: inline、display: block、display: inline-block をマスターしよう！で詳しく説明されてますので、覗いてみてください

例


HTML

    <div class="test01">
      <p>ここはインライン<span class="block">ここはspanでブロックに変換</span>ここはインライン</p>
    </div>




CSS

    <style>
      .test01 .block { display:block;}
    </style>




ここはインラインここはspanでブロックに変換ここはインライン


このように元々inlineなどの要素を強制的にblockに変えることができます。
ブロック要素なので、paddingの上下やheightが有効になってきます。
よく使うのはaタグにdisplay:block;を与えて、CSSでボタンをつくったりですね。

こんな感じです。


HTML

      <p class="testBtn"><a href="#">aタグでボタン</a></p>




CSS

      <style>
      .testBtn a {
        display: block;
        max-width: 200px;
        padding: 10px;
        margin: 0 auto;
        background: #EC9608;
        border-radius: 4px;
        box-shadow: inset -2px -2px 2px #A26400, 1px 1px 2px #FFE6CC;
        text-align: center;
        text-decoration: none;
        font-size: 20px;
        font-weight: bold;
        color: #FFFFFF;
        text-shadow: -1px -1px #A07F1C;
        }
      .testBtn a:hover {
        box-shadow: inset 2px 2px 2px #A26400,1px 1px 3px #F9F0DA;
        background: #A07F1C;
        }
    </style>




aタグでボタン

inline

まいどおなじみのdisplay:inline;さんです
この値を与えると、強制的にインライン要素になります。
こちらもなんぞや？っという方はこちらCSSの display: inline、display: block、display: inline-block をマスターしよう！で確認してみてください。

こちらはよくリストの横並びなど、連続するブロック要素を横に並べるときなどに使用しています。
また、text-alignでブロック要素を左・右・中央に寄せる時などでも使用します。

注意なのは、inlineの場合改行が半角の空白として認識されるため(inlineは文章の文字扱いのため)、改行があると要素間に隙間ができることです。
解消法は改行をなくすか、要素と要素の間にコメントアウトを入れてあげると解消します。

例


HTML

    <div class="test02">
      <p>改行あり</p>
      <ul class="testList">
        <li>リスト1</li>
        <li>リスト2</li>
        <li>リスト3</li>
        <li>リスト4</li>
        <li>リスト5</li>
      </ul>
      <p>改行なし</p>
      <ul class="testList">
        <li>リスト1</li><li>リスト2</li><li>リスト3</li><li>リスト4</li><li>リスト5</li>
      </ul>
      <p>コメントアウト法</p>
      <ul class="testList">
        <li>リスト1</li><!--
     --><li>リスト2</li><!--
     --><li>リスト3</li><!--
     --><li>リスト4</li><!--
     --><li>リスト5</li>
      </ul>
    </div>




CSS

    <style>
      .test02 .testList li { 
        display:inline;
        border: 1px solid #FF9B00;
        padding: 8px;
        }
    </style>




改行あり

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

改行なし

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

コメントアウト法

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

inline-block

個人的によく使用するdisplay:inline-block;さんです
この値を与えるとインラインだけどブロックな要素になります。
詳しくはこちらCSSの display: inline、display: block、display: inline-block をマスターしよう！に記載されていますが、イメージとしてはimgタグのような挙動をします。
ブロック要素と同じプロパティが適応されるinline要素です。
たとえば、inlineにwidthやheight、上下のmarginなどが適応されませんが（ブロック、いわゆる箱として機能しないから）、inline-blockならばそれらが適応されます。

利点としてはinline扱いのblockなので、text-alignが適応される点などあります。
また、先のinlineのように横並びになりますが改行＝半角スペースなので、隙間に注意が必要です。

使用時注意して頂きたいのは、IE7以下では使えません、ので下記の例にあるIE7ハックをセットで使用することをオススメします。

では、例をあげてみます。
今回は、全体を右寄せ、中のメニューは左揃えの形をdisplay:inline-block;をつかってつくってみます。

例


HTML

      <div class="test03">
        <ul class="testList">
          <li>メニュー01</li><li>メニュー02</li><li>メニュー03</li><li>メニュー04</li><li>メニュー05</li>
        </ul>
      </div>




CSS

      <style>
        .test03 { 
          max-width:700px;
          margin:0 auto; 
          border:2px solid #B06715; 
          text-align:right;
          }
        .test03 .testList {
          display:inline-block; 
          max-width:500px;
          background:#E7F0D4;
          text-align:left;
          }
        .test03 .testList li {
          display:inline-block;
         *display:inline; /* IE7ハック */
         *zoom:1; /* IE7ハック この２つがないとIE7では縦並びになってしまいます */
          max-width: 80px; 
          margin: 0 0 0 10px;
          background: #FFF5EC;
          text-decoration: underline; 
          text-align:center;
          }
       </style>




  • メニュー01
  • メニュー02
  • メニュー03
  • メニュー04
  • メニュー05

list-item

未だ実際に使うことがまったくないdisplay:list-item;さんです
この値を与えると、liと同じ挙動になります。
list-styleが適用され、リスト項目として使うことができます。
使い所はよくわかりませんが、javaScriptで一定条件下ではリストとして扱うといったときに使えるかもしれません。
今回はpタグの文章の途中をインライン要素【span】で囲って、リスト化してみたいとおもいます。

例


HTML

        <div class="test04">
          <p class="testTxt">普通のテキスト普通のテキスト普通のテキスト普通のテキスト<span class="testList">無理やりリスト化</span><span class="testList">無理やりリスト化</span><span class="testList">無理やりリスト化</span><span class="testList">無理やりリスト化</span>普通のテキスト普通のテキスト普通のテキスト普通のテキスト普通のテキスト普通のテキスト普通のテキスト普通のテキスト</p>
        </div>




CSS

        <style>
          .test04 {
            max-width: 580px;
            padding:10px;
            border:2px solid #B06715;
          }
          .test04 .testTxt .testList {
            display:list-item;
            margin-left:2em;
          }
        </style>




普通のテキスト普通のテキスト普通のテキスト普通のテキスト無理やりリスト化無理やりリスト化無理やりリスト化無理やりリスト化普通のテキスト普通のテキスト普通のテキスト普通のテキスト普通のテキスト普通のテキスト普通のテキスト普通のテキスト

このような感じで、強制的にリスト項目として使うことができます。
しかし、リストは文章構造的にulで組むのが良いので、特に理由がなければulでちゃんと作ることをおすすめします(´・ω・｀)ｂ

display:flex; or display:inline-flex;

さて、長くなってきましたがdisplay:flex;をご説明します。
これは、要素をフレキシブルなモデルに変えるという画期的なプロパティです。

まだ現在草案なので、仕様が変更されたり、ベンダープレフィックスが必要と色々面倒ですが、おもしろいので是非使ってみていただきたいです。
さて、いやゆるフレックスボックスは専用のプロパティや値が多いので、まずはそこからざっと見て行きましょう。

プロパティ 値 効果
display flex
inline-flex		 Flexboxコンテナーを定義します。inline-flexはinline-blockと同じようにインラインボックスとして定義されます。
flex-direction
子要素の配置の指定		 row 子要素を左から右へ配置する値です。基本HTMLの書いた順に並びます。（初期値）
column 子要素を上から下へ配置する値です。同じく書いた順に並びます。
row-reverse 子要素を右から左へ配置する値です。rowの逆になります。
column-reverse 子要素を下から上へ配置する値です。columnの逆になります。
flex-wrap
折り返し方の指定		 nowrap 折り返しなし（初期値）
wrap 折り返しあり floatの時のように下に落ちます
wrap-reverse 折り返しあり 折り返し地点が逆になります。
flex-flow
まとめて記述		 例 row wrap flex-directionとflex-wrapの値をまとめて記述できます。
justify-content
水平方向の揃えの指定		 flex-start 横方向は左、縦方向は上に揃えます。
flex-end 横方向は右、縦方向は下に揃えます。
center 中央揃えです
space-between 均等間隔です。
space-around 左右の端にも間隔がある均等間隔です
align-items
垂直方向の揃えの指定		 flex-start 横配置の場合は上、縦配置の場合は左に揃えます。
flex-end 横配置の場合は下、縦配置の場合は右に揃えます。
center 中央揃えです
baseline ベースラインです
stretch 自動で高さを合わせます
align-content
複数行の揃え方の指定		 flex-start 複数行になったとき、横方向は上、縦方向は左
flex-end 複数行になったとき、横方向は下、縦方向は右
center 中央揃えです
space-between 均等間隔です
space-around 上下端にも間隔がある均等揃えです
flex
伸縮性の指定		 flex-grow 伸びの倍率、余ったスペースをこのプロパティの値に従って自動的に埋めます
flex-shrink 縮みの倍率、コンテナに入りきらないアイテムを収まるように収縮する
flex-basis 元の長さを指定します。min-widthのような感じです。
補足 flexはflex: 1 1 auto;のように flex-grow flex-shrink flex-basisの順にまとめて記述できます
align-self
垂直方向の揃えを個別指定		 align-itemsと同じ align-itemsと同じですが、全体ではなく個別の指定となります。
order
順番の指定		 数字 初期値は連番ですが、それを指定することで順番をかえることができます。

こんな感じです。
たくさん増えましたがそんなに難しくはないとおもいます。

基本は親要素にdisplay:flex;をあたえることで子要素がflexアイテムとして扱われます。
あとは各プロパティをあたえることで、子要素がフレキシブルなBOXになっていきます。

それでは、実際に作っていきますが、ブログ自体が幅を固定されているのでご自身で色々試していただいて掴んでいただければとおもいます(´・ω・｀)ｂ

基本形（リスト横並び）

HTML

      <div class="reiBox01">
        <ul class="boxList">
          <li>1</li>
          <li class="even">2</li>
          <li>3</li>
          <li class="even">4</li>
          <li>5</li>
          <li class="even">6</li>
          <li>7</li>
        </ul>
      </div>




CSS

      <style>
        .reiBox01 {
          max-width: 700px;
          padding: 10px;
          margin: 0 auto 10px;
          border: 1px solid #903813;
        }
        .reiBox01 .boxList {
          display: -webkit-flex;
          display: -moz-flex;
          display: -ms-flex;
          display: -o-flex;
          display: flex;
          padding:10px 0;
          background:#FFF4D1;
        }
        .reiBox01 .boxList li {
          flex: 1 0 60px;
          min-height: 40px;
          padding-top: 10px;
          background: #C5FEDD;
          list-style: none;
          font-size: 30px;
          text-align: center;
          line-height: 1;
        }
        .reiBox01 .boxList li.even {
          background:#F6D990;
        }
      </style>




  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

固定されているとおもいますので、ブラウザの開発者ツールなどで、reiBox01のwidthを変えてみてください。(ブログ改修前に投稿しています)
デフォルトは折り返し無しなのでどんなに縮めてもはみ出ないようflexを設定しています。

それでは、少しずつ変えていきます。
まずはdirectionを変えてみます。初期値はrowです。
directionでは、配置の指定ができます。　寄せではなく、並び方に関する指定です。

flex-derection

HTML

      <div class="reiBox01">
        <p>row：左を起点に左から右へ順に並びます。</p>
        <ul class="boxList direction row">
          <li>1</li>
          <li class="even">2</li>
          <li>3</li>
          <li class="even">4</li>
          <li>5</li>
          <li class="even">6</li>
          <li>7</li>
        </ul>
      </div>
      <div class="reiBox01">
        <p>column：上から下へ縦方向に順にならびます。</p>
        <ul class="boxList direction column">
          <li>1</li>
          <li class="even">2</li>
          <li>3</li>
          <li class="even">4</li>
          <li>5</li>
          <li class="even">6</li>
          <li>7</li>
        </ul>
      </div>
      <div class="reiBox01">
        <p>row-reverse：右を起点に右から左へ順に並びます。</p>
        <ul class="boxList direction row-reverse">
          <li>1</li>
          <li class="even">2</li>
          <li>3</li>
          <li class="even">4</li>
          <li>5</li>
          <li class="even">6</li>
          <li>7</li>
        </ul>
      </div>
      <div class="reiBox01">
        <p>culumn-reverse：下から上へ縦方向に順にならびます。</p>
        <ul class="boxList direction culumn-reverse">
          <li>1</li>
          <li class="even">2</li>
          <li>3</li>
          <li class="even">4</li>
          <li>5</li>
          <li class="even">6</li>
          <li>7</li>
        </ul>
      </div>




CSS

      <style>
        .reiBox01 .boxList.direction li {
          flex: 0 0 60px;
        }
        .reiBox01 .boxList.direction.row li {
          flex-direction: row ;
        }
        .reiBox01 .boxList.direction.column {
          flex-direction: column ;
        }
        .reiBox01 .boxList.direction.column li {
          max-width:60px;
        }
        .reiBox01 .boxList.direction.row-reverse {
          flex-direction:row-reverse;
        }
        .reiBox01 .boxList.direction.culumn-reverse {
          flex-direction:column-reverse;
        }
        .reiBox01 .boxList.direction.culumn-reverse li {
          max-width:60px;
        }
      </style>




row：左を起点に左から右へ順に並びます。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

column：上から下へ縦方向に順にならびます。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

row-reverse：右を起点に右から左へ順に並びます。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

culumn-reverse：下から上へ縦方向に順にならびます。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

次は折り返しの指定をかえてみます。
初期値はnowrap 折り返し無しになっています。
有りにするとfloatと同じ動きになります。
それぞれboxListのwidthを狭めて挙動をみていきます。liはwidthを80px以下には縮まないようにしておきます。

flex-wrap

HTML

      <div class="reiBox01">
        <p>nowrap：折り返し無しです。設定によっては子要素がフレックスコンテナをはみ出たり、無理やり収まるように伸縮したりします。</p>
        <ul class="boxList Fwrap nowrap">
          <li>1</li>
          <li class="even">2</li>
          <li>3</li>
          <li class="even">4</li>
          <li>5</li>
          <li class="even">6</li>
          <li>7</li>
        </ul>
      </div>
      <div class="reiBox01">
        <p>wrap：折り返しするようになります。 floatのような感じですが、伸縮設定をしているとそれぞれが隙間をきっちり埋める動きをします。(伸縮設定は後ほど触れます)</p>
        <ul class="boxList Fwrap wrap">
          <li>1</li>
          <li class="even">2</li>
          <li>3</li>
          <li class="even">4</li>
          <li>5</li>
          <li class="even">6</li>
          <li>7</li>
        </ul>
      </div>
      <div class="reiBox01">
        <p>wrap-reverse：同じく折り返しするようになりますが、折り返し地点が逆になります。</p>
        <ul class="boxList Fwrap wrap-reverse">
          <li>1</li>
          <li class="even">2</li>
          <li>3</li>
          <li class="even">4</li>
          <li>5</li>
          <li class="even">6</li>
          <li>7</li>
        </ul>
      </div>




CSS

      <style>
        .reiBox01 .boxList.Fwrap {
          width:60%;
          margin:0 auto;
        }
        .reiBox01 .boxList.Fwrap li {
          flex:0 0 80px;
        }
        .reiBox01 .boxList.Fwrap.nowrap {
          flex-wrap: nowrap;
        }
        .reiBox01 .boxList.Fwrap.nowrap li {
        }
        .reiBox01 .boxList.Fwrap.wrap {
          flex-wrap: wrap;
        }
        .reiBox01 .boxList.Fwrap.wrap-reverse {
          flex-wrap:wrap-reverse;
        }
      </style>




nowrap：折り返し無しです。設定によっては子要素がフレックスコンテナをはみ出たり、無理やり収まるように伸縮したりします。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

wrap：折り返しするようになります。 floatのような感じですが、伸縮設定をしているとそれぞれが隙間をきっちり埋める動きをします。(伸縮設定は後ほど触れます)

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

wrap-reverse：同じく折り返しするようになりますが、折り返し地点が逆になります。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

上記のflex-directionとflex-wrapはflex-flowを使うことでショートハンドで記入することができます

HTML

      <div class="reiBox01">
        <p>flow：flex-wrapとflex-flowを同時に設定します。今回はrow-reverseとwrap-reverseにしてみました。<br>右から始まって上へ折り返すようになってます。</p>
        <ul class="boxList flow">
          <li>1</li>
          <li class="even">2</li>
          <li>3</li>
          <li class="even">4</li>
          <li>5</li>
          <li class="even">6</li>
          <li>7</li>
        </ul>
      </div>




CSS

      <style>
        .reiBox01 .boxList.flow {
          width:60%;
          margin:0 auto;
          flex-flow:row-reverse wrap-reverse;
        }
        .reiBox01 .boxList.flow li {
          flex:0 0 80px;
        }
      </style>




flow：flex-wrapとflex-flowを同時に設定します。今回はrow-reverseとwrap-reverseにしてみました。
右から始まって上へ折り返すようになってます。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

配置関係はこんなところです、組み合わせなどよく考えて使うといいと思います。
これまでなかった逆折り返しなど、一度やってみると新しい概念ができるので試しにやってみるのもいいかもです。
知っていれば幅は広がりますからね(´・ω・｀)v
次は揃え関係を触っていきます。

注意すべきは、親要素より子要素（固定ブロック）が小さいことです。
隙間がなければ、揃えを使う意味がなくなりますのでご注意です。
今回は子要素を伸縮なしの50pxにしてあります。

justify-content

HTML

      <div class="reiBox01">
        <p>flex-start：通常の左上揃えです。子要素が左上に向かって寄って行ってます。</p>
        <ul class="boxList justify start">
          <li>1</li>
          <li class="even">2</li>
          <li>3</li>
          <li class="even">4</li>
          <li>5</li>
          <li class="even">6</li>
          <li>7</li>
        </ul>
      </div>
      <div class="reiBox01">
        <p>flex-end：右下揃えです。子要素が右下に向かって寄って行ってます。注意は右上ではないことです。</p>
        <ul class="boxList justify end">
          <li>1</li>
          <li class="even">2</li>
          <li>3</li>
          <li class="even">4</li>
          <li>5</li>
          <li class="even">6</li>
          <li>7</li>
        </ul>
      </div>
      <div class="reiBox01">
        <p>center：中央揃えです。中央に向かって寄っていきます。</p>
        <ul class="boxList justify center">
          <li>1</li>
          <li class="even">2</li>
          <li>3</li>
          <li class="even">4</li>
          <li>5</li>
          <li class="even">6</li>
          <li>7</li>
        </ul>
      </div>
      <div class="reiBox01">
        <p>space-between：子要素が両端を詰めた形での均等揃えです。このへんから、float組などでは若干手間なものが簡単に出来てきます。</p>
        <ul class="boxList justify between">
          <li>1</li>
          <li class="even">2</li>
          <li>3</li>
          <li class="even">4</li>
          <li>5</li>
          <li class="even">6</li>
          <li>7</li>
        </ul>
      </div>
      <div class="reiBox01">
        <p>space-around：両端にも均等に左右の隙間ができる均等揃えです。<br>フレキシブルなので親要素が伸びれば均等に離れていくすぐれものです。<br>floatやinline-blockでも同じようなことができますが、こちらは要素が増えても問題ないところが優れています。</p>
        <ul class="boxList justify around">
          <li>1</li>
          <li class="even">2</li>
          <li>3</li>
          <li class="even">4</li>
          <li>5</li>
          <li class="even">6</li>
          <li>7</li>
        </ul>
      </div>




CSS

      <style>
        .reiBox01 .boxList.justify li {
          flex:0 0 50px;
        }
        .reiBox01 .boxList.justify.start{
          justify-content: flex-start;
        }
        .reiBox01 .boxList.justify.end{
          justify-content: flex-end;
        }
        .reiBox01 .boxList.justify.center{
          justify-content: center;
        }
        .reiBox01 .boxList.justify.between{
          justify-content: space-between;
        }
        .reiBox01 .boxList.justify.around{
          justify-content: space-around;
        }
      </style>




flex-start：通常の左上揃えです。子要素が左上に向かって寄って行ってます。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

flex-end：右下揃えです。子要素が右下に向かって寄って行ってます。注意は右上ではないことです。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

center：中央揃えです。中央に向かって寄っていきます。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

space-between：子要素が両端を詰めた形での均等揃えです。このへんから、float組などでは若干手間なものが簡単に出来てきます。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

space-around：両端にも均等に左右の隙間ができる均等揃えです。
フレキシブルなので親要素が伸びれば均等に離れていくすぐれものです。
floatやinline-blockでも同じようなことができますが、こちらは要素が増えても問題ないところが優れています。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

この時点でも、たまに悩んでしまうような配置がラクラクとできてます。
次は垂直方向の揃えです。
このままだとわかりにくいので、evenのclassを振っている要素の高さをかえてやってみます。

align-items

HTML

      <div class="reiBox01">
        <p>flex-start：flex-directionが横配置の場合、上に揃います。<br>
  縦配置の場合は左へ揃います。</p>
        <ul class="boxList align start">
          <li>1</li>
          <li class="even">2</li>
          <li>3</li>
          <li class="even">4</li>
          <li>5</li>
          <li class="even">6</li>
          <li>7</li>
        </ul>
      </div>
      <div class="reiBox01">
        <p>flex-end：こちらは横配置の場合下揃え、縦配置だと右へ揃います</p>
        <ul class="boxList align end">
          <li>1</li>
          <li class="even">2</li>
          <li>3</li>
          <li class="even">4</li>
          <li>5</li>
          <li class="even">6</li>
          <li>7</li>
        </ul>
      </div>
      <div class="reiBox01">
        <p>center：上下中央揃えです。わかりやすいよう親要素にheightを入れました。<br>
  さて、お気づきになりましたでしょうか？・・・<br>
  そう、これを使うと、上下左右中央揃えが簡単にできちゃいます。　(´・ω・｀)ｽｺﾞｸﾅｲ?</p>
        <ul class="boxList align center">
          <li>1</li>
          <li class="even">2</li>
          <li>3</li>
          <li class="even">4</li>
          <li>5</li>
          <li class="even">6</li>
          <li>7</li>
        </ul>
      </div>
      <div class="reiBox01">
        <p>おまけ：上下中央揃え</p>
        <ul class="boxList align justify center">
          <li>1</li>
          <li class="even">2</li>
          <li>3</li>
          <li class="even">4</li>
          <li>5</li>
          <li class="even">6</li>
          <li>7</li>
        </ul>
      </div>
      <div class="reiBox01">
        <p>baseline：ベースライン揃えです。ベースラインとは、中の文字を基準に揃える方法です。</p>
        <ul class="boxList align base">
          <li>1</li>
          <li class="even">2</li>
          <li>3</li>
          <li class="even">4</li>
          <li>5</li>
          <li class="even">6</li>
          <li>7</li>
        </ul>
      </div>
      <div class="reiBox01">
        <p>stretch：自動で高さを合わせてくれます。<br>
  ようは、上下の隙間を埋めてくれる感じです。ためしに親要素の高さを200pxにしてみました。</p>
        <ul class="boxList align stretch">
          <li>1</li>
          <li class="even">2</li>
          <li>3</li>
          <li class="even">4</li>
          <li>5</li>
          <li class="even">6</li>
          <li>7</li>
        </ul>
      </div>




CSS

      <style>
        .reiBox01 .boxList.align {
        }
        .reiBox01 .boxList.align li {
          height:50px;
        }
        .reiBox01 .boxList.align li.even{
          height:100px;
        }
        .reiBox01 .boxList.align.start {
          align-items:flex-start;
        }
        .reiBox01 .boxList.align.end {
          align-items:flex-end;
        }
        .reiBox01 .boxList.align.center {
          height:200px;
          align-items:center;
        }
        .reiBox01 .boxList.align.base {
          align-items:baseline;
        }
        .reiBox01 .boxList.align.stretch {
          height:200px;
          align-items:stretch;
        }
        .reiBox01 .boxList.align.stretch li{
          height:auto;
        }
      </style>




flex-start：flex-directionが横配置の場合、上に揃います。
縦配置の場合は左へ揃います。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

flex-end：こちらは横配置の場合下揃え、縦配置だと右へ揃います

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

center：上下中央揃えです。わかりやすいよう親要素にheightを入れました。
さて、お気づきになりましたでしょうか？・・・
そう、これを使うと、上下左右中央揃えが簡単にできちゃいます。　(´・ω・｀)ｽｺﾞｸﾅｲ?

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

おまけ：上下中央揃え

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

baseline：ベースライン揃えです。ベースラインとは、中の文字を基準に揃える方法です。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

stretch：自動で高さを合わせてくれます。
ようは、上下の隙間を埋めてくれる感じです。ためしに親要素の高さを200pxにしてみました。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

と言った感じで、横にも縦にも臨機応変に設定可能です。
では、改行され複数行になったときの設定をしてみます。

align-content

HTML

      <div class="reiBox01">
        <p>flex-start：複数行のときの揃い方を設定します。<br>
  flex-startはdirectionが横方向ならば上、縦ならば左揃えになります。</p>
        <ul class="boxList aContent start">
          <li>1</li>
          <li class="even">2</li>
          <li>3</li>
          <li class="even">4</li>
          <li>5</li>
          <li class="even">6</li>
          <li>7</li>
        </ul>
      </div>
      <div class="reiBox01">
        <p>flex-end：こちらは複数行のとき横方向ならば下、縦方向なら右に揃います。</p>
        <ul class="boxList aContent end">
          <li>1</li>
          <li class="even">2</li>
          <li>3</li>
          <li class="even">4</li>
          <li>5</li>
          <li class="even">6</li>
          <li>7</li>
        </ul>
      </div>
      <div class="reiBox01">
        <p>center：こちらは複数行のとき上下中央揃えになります。</p>
        <ul class="boxList aContent center">
          <li>1</li>
          <li class="even">2</li>
          <li>3</li>
          <li class="even">4</li>
          <li>5</li>
          <li class="even">6</li>
          <li>7</li>
        </ul>
      </div>
      <div class="reiBox01">
        <p>space-between：こちらは複数行のとき上下均等揃えになります。</p>
        <ul class="boxList aContent between">
          <li>1</li>
          <li class="even">2</li>
          <li>3</li>
          <li class="even">4</li>
          <li>5</li>
          <li class="even">6</li>
          <li>7</li>
        </ul>
      </div>
      <div class="reiBox01">
        <p>space-around：こちらは複数行のとき上下中央揃えになり、上下の端にも間隔がある均等揃えになります。</p>
        <ul class="boxList aContent around">
          <li>1</li>
          <li class="even">2</li>
          <li>3</li>
          <li class="even">4</li>
          <li>5</li>
          <li class="even">6</li>
          <li>7</li>
        </ul>
      </div>




CSS

      <style>
        .reiBox01 .boxList.aContent {
          flex-wrap:wrap;
        }
        .reiBox01 .boxList.aContent li {
          flex:0 0 120px;
        }
        .reiBox01 .boxList.aContent.start {
          align-content:flex-start;
        }
        .reiBox01 .boxList.aContent.end {
          height:200px;
          align-content:flex-end;
        }
        .reiBox01 .boxList.aContent.end li {
          height:40px;
        }
        .reiBox01 .boxList.aContent.center {
          height:200px;
          align-content:center;
        }
        .reiBox01 .boxList.aContent.between {
          height:300px;
          padding:0;
          align-content:space-between;
        }
        .reiBox01 .boxList.aContent.between li {
          flex:0 0 300px;
        }
        .reiBox01 .boxList.aContent.around {
          height:300px;
          padding:0;
          align-content:space-around;
        }
        .reiBox01 .boxList.aContent.around li {
          flex:0 0 300px;
        }
      </style>




flex-start：複数行のときの揃い方を設定します。
flex-startはdirectionが横方向ならば上、縦ならば左揃えになります。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

flex-end：こちらは複数行のとき横方向ならば下、縦方向なら右に揃います。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

center：こちらは複数行のとき上下中央揃えになります。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

space-between：こちらは複数行のとき上下均等揃えになります。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

space-around：こちらは複数行のとき上下中央揃えになり、上下の端にも間隔がある均等揃えになります。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

これは複数行の時、という条件付きですがちゃんとつかえればレスポンシブなどのときに役立ちそうですね。
次は伸縮設定です。これがフレックスの大きな利点でしょうか。
さっそくやっていきます。

flex

ここまでで、ちょいちょい使用していましたが、flexのご紹介です。
こちらは今までのと違い、子要素へ設定するので気を付けてください。

HTML

      <div class="reiBox01">
        <p>flex-grow：伸びの倍率設定です、全てに1を設定すれば均等に割り振られます。<br>注意すべきは、余ったスペースを埋める性質なのをわすれずに</p>
        <ul class="boxList flex grow">
          <li>1</li>
          <li class="even">2</li>
          <li>3</li>
          <li class="even">4</li>
          <li>5</li>
          <li class="even">6</li>
          <li>7</li>
        </ul>
      </div>
      <div class="reiBox01">
        <p>flex-growその2：evenだけ倍率を変えてみます。</p>
        <ul class="boxList flex grow02">
          <li>1</li>
          <li class="even">2</li>
          <li>3</li>
          <li class="even">4</li>
          <li>5</li>
          <li class="even">6</li>
          <li>7</li>
        </ul>
      </div>
      <div class="reiBox01">
        <p>flex-shrink：縮みの倍率設定です。0だと縮まりませんので、折り返し設定をしてない場合コンテナからはみ出ます。1で均等に縮まります。<br>この場合元の長さが長く、子要素がの合計がコンテナより大きくないといけないので、次にご紹介するflex-basisも一緒に使用します。<br>
  元の長さは200pxにしてあります。</p>
        <ul class="boxList flex shrink">
          <li>1</li>
          <li class="even">2</li>
          <li>3</li>
          <li class="even">4</li>
          <li>5</li>
          <li class="even">6</li>
          <li>7</li>
        </ul>
      </div>
      <div class="reiBox01">
        <p>flex-basis：元の長さを設定します。<br>
  伸縮倍率がかかってない場合、これが基本のwidthとなります。<br>
  ためしに、倍率を0にして、40pxにしてみます。</p>
        <ul class="boxList flex basis">
          <li>1</li>
          <li class="even">2</li>
          <li>3</li>
          <li class="even">4</li>
          <li>5</li>
          <li class="even">6</li>
          <li>7</li>
        </ul>
      </div>
      <div class="reiBox01">
        <p>flex：flex-grow、flex-shrink、flex-basisをまとめてショートハンド記入できます。<br>記入順はgrow shrink basisです。</p>
        <ul class="boxList flex sHand">
          <li>1</li>
          <li class="even">2</li>
          <li>3</li>
          <li class="even">4</li>
          <li>5</li>
          <li class="even">6</li>
          <li>7</li>
        </ul>
      </div>




CSS

      <style>
        .reiBox01 .boxList.flex {
        }
        .reiBox01 .boxList.flex.grow {
        }
        .reiBox01 .boxList.flex.grow li {
          flex-grow: 1;
        }
        .reiBox01 .boxList.flex.grow02 li.even {
          flex-grow: 3;
        }
        .reiBox01 .boxList.flex.shrink li {
          flex-shrink: 1;
          flex-basis: 200px;
        }
        .reiBox01 .boxList.flex.basis li {
          flex-grow: 0;
          flex-shrink: 0;
          flex-basis:40px;
        }
        .reiBox01 .boxList.flex.sHand li {
          flex: 1 1 200px;
        }
      </style>




flex-grow：伸びの倍率設定です、全てに1を設定すれば均等に割り振られます。
注意すべきは、余ったスペースを埋める性質なのをわすれずに

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

flex-growその2：evenだけ倍率を変えてみます。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

flex-shrink：縮みの倍率設定です。0だと縮まりませんので、折り返し設定をしてない場合コンテナからはみ出ます。1で均等に縮まります。
この場合元の長さが長く、子要素がの合計がコンテナより大きくないといけないので、次にご紹介するflex-basisも一緒に使用します。
元の長さは200pxにしてあります。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

flex-basis：元の長さを設定します。
伸縮倍率がかかってない場合、これが基本のwidthとなります。
ためしに、倍率を0にして、40pxにしてみます。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

flex：flex-grow、flex-shrink、flex-basisをまとめてショートハンド記入できます。
記入順はgrow shrink basisです。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

最後におまけな値です。

align-self or order

alige-self

align-self：機能はalign-itemsと同じです。なのでプロパティも同じものを使います。ですが、こちらは個別指定です。
個別とはどういうことかといいますと、align-itemsは親要素（Flexコンテナ）に設定し全体を変えるのですが、align-selfは子要素（Flexアイテム）に直接効かせることができます。

HTML

      <div class="reiBox01">
        <ul class="boxList self">
          <li>1</li>
          <li class="even num02">2</li>
          <li class="num03">3</li>
          <li class="even num03">4</li>
          <li class="num05">5</li>
          <li class="even num06">6</li>
          <li class="num07">7</li>
        </ul>
      </div>




alige-self CSS

      <style>
        .reiBox01 .boxList.self {
          height:200px;
          flex-wrap: wrap;
          align-items: center;
        }
        .reiBox01 .boxList.self li{
          flex:1 1 auto;
        }
        .reiBox01 .boxList.self li.num02 {
          align-self:flex-start;
        }
        .reiBox01 .boxList.self li.num03 {
          align-self:flex-end;
        }
        .reiBox01 .boxList.self li.num04 {
          font-size:40px;
          align-self:baseline;
        }
        .reiBox01 .boxList.self li.num05 {
          align-self:stretch;
        }
        .reiBox01 .boxList.self li.num06 {
          align-self:baseline;
        }
        .reiBox01 .boxList.self li.num07 {
        }
  
      </style>




  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

order

order：最後にこちらは順番を指定することができるプロパティです。
初期値は当然0からの連番ですが、こちらで順番を指定することができます。
たとえば、レスポンシブでブレイクポイントに達した時並びを変えるなんてことが出来たりします。
今回nthを使っていますが、classを振るなど工夫して使用してみてください。

HTML

      <div class="reiBox01">
        
        <ul class="boxList flex order">
          <li>1</li>
          <li class="even">2</li>
          <li>3</li>
          <li class="even">4</li>
          <li>5</li>
          <li class="even">6</li>
          <li>7</li>
        </ul>
      </div>




CSS

      <style>
        .reiBox01 .boxList.flex.order {
          flex-wrap:wrap;
        }
        .reiBox01 .boxList.flex.order li {
          flex:1 1 200px;
          box-shadow: inset 0 0 5px rgba(27, 27, 27, 0.22);
        }
        .reiBox01 .boxList.flex.order li:nth-child(1) {
          order:2;
        }
        .reiBox01 .boxList.flex.order li:nth-child(2) {
          order:5;
        }
        .reiBox01 .boxList.flex.order li:nth-child(3) {
          order:1;
        }
        .reiBox01 .boxList.flex.order li:nth-child(4) {
          order:7;
        }
        .reiBox01 .boxList.flex.order li:nth-child(5) {
          order:3;
        }
        .reiBox01 .boxList.flex.order li:nth-child(6) {
          order:4;
        }
        .reiBox01 .boxList.flex.order li:nth-child(7) {
          order:6;
        }
      </style>




  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

フレックスボックスは色々な可能性を秘めていますね。
それぞれの使い方ばかりになりましたが、組み合わせるとフレキシブルな組み方がたくさんできます。
IEとSafariが未対応なのと、ベンダープレフィックスが必要といろいろまだ制限がございますが、使える環境化ではとても有効で面白いプロパティです。
ぜひ、試してみてください。(´・ω・｀)ｖ

お次は無理やりdisplay:table;をつかって、tableレイアウトを再現したりします。
第二回はこちら

]]> https://taneppa.net/display_other01/feed/ 0 【CSS3】で写真に色々装飾を加えてみた(hoverしたときのエフェクトを作る【IE9以前は非推奨】 https://taneppa.net/css3_03/ https://taneppa.net/css3_03/#comments Mon, 02 Feb 2015 10:00:42 +0000 yanoppa! https://taneppa.net/?p=2060 【CSS3】で写真をhoverしたときのエフェクトを作る【IE9以前は非推奨】

おはこんばんちわ、あなたのわたしのやのっぱです(´・ω・｀)ﾉ


CSS3とかで写真に装飾つけるシリーズも第三回となりました。
今回はhover時のエフェクトを付けてみようとおもいます。


CSSで作るので、例のごとくレガシーブラウザ(IEとかIEとかIEのIE9以前)には未対応なのですが・・・
使う場面があることを信じて、作っていくのです。


それでは今回もブランケットに包まるさんにご登場していただきましょう。
widthは300pxにしてあり、box-sizingと枠を追加しています。
枠は今回paddingではなく、エフェクトの影響を避けるためborderで白枠をとっています。
境界線はbox-shadowで作っています。
また、今回はエフェクトがはみ出ないようoverflow:hidden;をかけています。


ブランケットを羽織った女性


<style>
	  .img01 {
      position:relative;
      overflow:hidden;/* はみ出し防止 */
	    width:300px;
	    margin:0 auto;
	    box-sizing:border-box;/* borderとpaddingをwidthに含める */
	    -moz-box-sizing:border-box;
	    -webkit-box-sizing:border-box;
	    -ms-box-sizing:border-box;
	  }
    .waku01{
      border:7px solid #fff;
      box-shadow: 0 0 1px 0 #aaa; /* 枠の外の境界線 */
	  }
	  .img01 img {
	    width:100%;
	    height:auto;
	    vertical-align:top;
	  }
</style>
<p class="img01 waku01"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>

では、まずは簡単にマスクをかけたようなエフェクトを作ってみます。


ブランケットを羽織った女性


<style>
	  .anime01:before {
      content:" ";
      display:block;
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background:#000;
      opacity:0;
      cursor:pointer;
      -webkit-transition:all 0.3s linear;/* all(変化させたい要素) 0.3s(変化する早さ) linear(変化の動き:linearは一定の早さ) */
      -moz-transition:all 0.3s linear;
      -ms-transition:all 0.3s linear;
      transition:all 0.3s linear;
	  }
    .anime01:hover:before {
      opacity:0.3;
    }
</style>
<p class="img01 waku01 anime01"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>

次にふんわりとフォーカスしたようなエフェクトを作ってみます。

ブランケットを羽織った女性


<style>
	  .anime02:before {
      content:" ";
      display:block;
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      box-shadow:inset 0 0 200px 30px rgba(0,0,0,0.6);
      opacity:0;
      cursor:pointer;
      -webkit-transition:all 0.3s linear;
      -moz-transition:all 0.3s linear;
      -ms-transition:all 0.3s linear;
      transition:all 0.3s linear;
	  }
    .anime02:hover:before {
      opacity:1;
    }
</style>
<p class="img01 waku01 anime02"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>

ベタのマスクを乗っけるよりも、こっちのほうがおしゃれにみえますね。



※ やのっぱさんのちょっとした豆知識(´・ω・｀)ﾏﾒﾖｰ

今回、ソースを見ていただくとわかるように、擬似要素に擬似クラスを振っています。

擬似要素とは:beforeとか:afterで、擬似クラスとは:hoverとか:activeとか:first-childとかですね。
で、こちらを組み合わせるときには順番に決まりがありますのでご注意です。
要素＋擬似クラス＋擬似要素の順番に記述しないと動作しません。
たとえば、.test:before:hoverではなく、.test:hover:beforeという順番で記述します。
擬似擬似コンビは使い勝手良いのですが、こういう決まり事があるので覚えておくと良いと思います(´・ω・｀)ｂ



次にちょっと余計な動きを入れてみました。
目にうるさいのでおすすめはしませんが、このような動きも付けることができます。

中央で回転

ブランケットを羽織った女性


<style>
	  .anime03:before {
      content:" ";
      display:block;
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      box-shadow:inset 0 0 200px 30px rgba(0,0,0,0.6);
      border-radius:100%;
      opacity:0;
      cursor:pointer;
      
      -webkit-transform: rotate(180deg) scale(0);/* 要素を回転表示させる scale：拡大縮小値 */
      transform: rotate(180deg) scale(0);
      
      -webkit-transition:all .3s linear;
      transition:all .3s linear;
	  }
    .anime03:hover:before {
      border-radius:0%;
      -webkit-transform: rotate(0deg) scale(1);
      transform: rotate(0deg) scale(1);
      
      opacity:1;
    }
</style>
<p class="img01 waku01 anime03"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>

横にくるっとする

ブランケットを羽織った女性


<style>
	  .anime04:before {
      content:" ";
      display:block;
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background:rgba(0,0,0,0.3);
      opacity:0;
      cursor:pointer;
      
      -webkit-transform: rotateY(180deg);/* Y軸方向へ回転 */
      transform: rotateY(180deg);
      
      -webkit-transition:all .3s linear;
      transition:all .3s linear;
	  }
    .anime04:hover:before {
      -webkit-transform: rotateY(0deg);
      transform: rotateY(0deg);
      
      opacity:1;
    }
</style>
<p class="img01 waku01 anime04"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>

縦もできちゃう

ブランケットを羽織った女性


<style>
	  .anime05:before {
      content:" ";
      display:block;
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background:rgba(0,0,0,0.3);
      opacity:0;
      cursor:pointer;
      
      -webkit-transform: rotateX(180deg);/* X軸方向へ回転 */
      transform: rotateX(180deg);
      
      -webkit-transition:all .3s linear;
      transition:all .3s linear;
	  }
    .anime05:hover:before {
      -webkit-transform: rotateX(0deg);
      transform: rotateX(0deg);
      
      opacity:1;
    }
</style>
<p class="img01 waku01 anime05"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>

外からふわっと

ブランケットを羽織った女性

<style>
	  .anime06:before {
      content:" ";
      display:block;
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      box-shadow:inset 0 0 200px 30px rgba(0,0,0,0.6);
      opacity:0;
      cursor:pointer;
      
      -webkit-transform: scale(5);
      transform: scale(5);
      
      -webkit-transition:all .4s ease;
      transition:all .4s ease;
      
      -webkit-transform: scale(1);
      transform: scale(1);

	  }
    .anime06:hover:before {
      -webkit-transform: scale(1);
      transform: scale(1);
      
      opacity:1;
    }
</style>
<p class="img01 waku01 anime06"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>

このように、擬似要素にtransitionやtransformを加えることで色々な動きを作ることができます。
行き過ぎたエフェクトは目にうるさく、ごちゃっとした印象になってしまいますが、さり気なくつけると、おっ！おしゃれっ！と言った感じになりますね。
ポイントはやり過ぎない、これです(´・ω・｀)ﾀﾞﾒﾖｰﾀﾞﾒﾀﾞﾒ
ほとんどがtransitionとtransformの使い方のようになりましたが、hover時のエフェクトのお話でした(´・ω・｀)ﾉｼ

]]> https://taneppa.net/css3_03/feed/ 0 【CSS3】で写真に色々装飾を加えてみた（box-shadow編【IE9以前は非推奨】 https://taneppa.net/css3_02/ https://taneppa.net/css3_02/#comments Mon, 26 Jan 2015 06:26:27 +0000 yanoppa! https://taneppa.net/?p=2043 どうもおはこんばんちわ、トメィトゥが大好きなやのっぱです(´・ω・｀)

リコピン♪リコピン♪(*´ω｀*)

今回もCSSで装飾するよ！
前回→【CSS3】で写真に色々装飾を加えてみた(枠・写真加工編)【IE9以前は非推奨】

さて、今回はbox-shadowを使って色々作ってみようと思います。
box-shadowが実装されて、今までわざわざ画像にしたり、どこできったらいいのかわからなかったり、予定より画像がでかくなってこまっていた
あのドロップシャドウをCSSで表現できるようになりました。

これで画像の量も減るし、楽になりますね！

前回でも少し使用しましたが、今回は影の形を変えることで写真などの浮き表現を変えたりしていきます。

記述がすこし面倒ですが、サムネイルなどに使う場合一つ作ってしまえば増えても増えても同じ効果をつけれるので便利です。
それでは、作っていきましょう！

下準備

今回も前回と同じ写真をつかいます。

前回と同様に可変仕様にして、今回widthを半分にして小さくし、枠も付けてあげます。。

ブランケットを羽織った女性

  <style>
	  .img01 {
	    width:250px;
	    margin:0 auto;
	    box-sizing:border-box;/* borderとpaddingをwidthに含める */
	    -moz-box-sizing:border-box;
	    -webkit-box-sizing:border-box;
	    -ms-box-sizing:border-box;
	  }
    .waku01{
	    padding:7px;
	    background:#fff;
      border:1px solid #ccc;
	  }
	  .img01 img {
	    width:100%;
	    height:auto;
	    vertical-align:top;
	  }
	</style>
  <p class="img01 waku01"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>






それでは、基本の影をつけてみます

box-shadowを使う

box-shadowの使い方をおさらいしておきます。

例）

box-shadow:10px 10px 10px 10px rgba(0,0,0,0.2)
box-shadow:y方向のオフセット x方向のオフセット ぼかし 広がり 色

という感じです。※現在最新のモダンブラウザはベンダープレフィックスいらなくなってます

では、実際につけてみます。

ブランケットを羽織った女性

  <style>
    .shadow01 {
      box-shadow:2px 2px 4px 0 rgba(0,0,0,0.2);
    }
  </style>
  <p class="img01 waku01 shadow01"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>






マイナスの値を与えることで逆などもできます

ブランケットを羽織った女性

<style>
  .shadow02 {
    box-shadow:-2px -2px 4px 0 rgba(0,0,0,0.2);
  }
</style>
<p class="img01 waku01 shadow02"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>






ブランケットを羽織った女性

<style>
  .shadow03 {
    box-shadow:2px -2px 4px 0 rgba(0,0,0,0.2);
  }
</style>
<p class="img01 waku01 shadow03"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>






こんなかんじで四方に影を落とすことができます。
「,」カンマを使うことで、いくつも重ねてつかえます。
例えば、ボタンを作るときなどによく重ねて使います。（imgがあると内側の影が見えないのでDIVでボタンっぽいのをつくってみます。）

<style>
  .box1 {
    width:200px;
    height:40px;
    margin:0 auto;
    background:#209FFB;
  }
  .shadow04 {
    box-shadow:inset -2px -2px 4px 0 rgba(0,0,0,0.2),inset 2px 2px 2px 0 rgba(255,255,255,1);
  }/* insetは内側に影を付けたいときに使います。 */
</style>
<div class="box1 shadow04"></div>






少しそれましたが、これでbox-shadowの基本は終わりです。
これを駆使してシャドウやハイライトを表現していきます。

それでは本題のすこし変わった影を作っていきます。

擬似要素を使って色々な影を表現してみる

今回も擬似要素:before :afterを使います。

まずは、定番の左右に影をつけて、浮いたように見せるあれです。

ブランケットを羽織った女性

<style>
  .shadow05 {
    position:relative;
  }
  .shadow05:before,
  .shadow05:after {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 3px;
    z-index: -1;
    width: 50%;
    height: 5px;
    box-shadow: 0 4px 6px 0 rgba(0,0,0,0.3);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  .shadow05:after {
    right:3px;
    left:auto;
    -webkit-transform:rotate(3deg);
    -moz-transform:rotate(3deg);
    -ms-transform:rotate(3deg);
    transform:rotate(3deg);
  }
</style>
<p class="img01 waku01 shadow05"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>






よく見るやつですね♪
これを作れるようになれば、あとは全部応用です。
左だけ右だけもbeforeだけにして、右だけの場合はafterのpositionとtransformをbeforeに移すだけです。

ブランケットを羽織った女性

<style>
  .shadow05_1 {
    position:relative;
  }
  .shadow05_1:before {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 3px;
    z-index: -1;
    width: 50%;
    height: 5px;
    box-shadow: 0 4px 6px 0 rgba(0,0,0,0.3);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
</style>
<p class="img01 waku01 shadow05_1"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>






ブランケットを羽織った女性

<style>
  .shadow05_2 {
    position:relative;
  }
  .shadow05_2:before {
    content: "";
    position: absolute;
    bottom: 3px;
    right: 3px;
    z-index: -1;
    width: 50%;
    height: 5px;
    box-shadow: 0 4px 6px 0 rgba(0,0,0,0.3);
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
  }
</style>
<p class="img01 waku01 shadow05_2"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>






付箋などの表現にも使えそうですね(*´ω｀*)

縦方向にアーチしたような影

ブランケットを羽織った女性

<style>
  .shadow06 {
    position: relative;
    box-shadow: inset 0px 7px 16px -4px rgba(0,0,0,0.1),
                inset 0 -7px 16px -4px rgba(0,0,0,0.1);
  }
  .shadow06:before,
  .shadow06:after {
    content: "";
    position: absolute;
    bottom: 17%;
    left: 11px;
    z-index: -1;
    width: 4%;
    height: 50%;
    box-shadow: 1px 0px 10px 0 rgba(0,0,0,1);
    -webkit-transform: skew(4deg,95deg);
    -moz-transform: skew(4deg,95deg);
    -ms-transform: skew(4deg,95deg);
    transform: skew(4deg,95deg);
  }
  .shadow06:after {
    right:14px;
    left:auto;
  }
</style>
<p class="img01 waku01 shadow06"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>






ちょっと雑ですが、このようなこともできます♪

他にも意外とつくろうと思えばいくらでも作れたりします。
基本は擬似要素を使うことですね。
擬似要素便利♪

最後にbox-shadowはborderとしても使えます。
普通のborderよりもbox-shadowで作ったほうが雰囲気よかったりもするので使ってみるのも良いかと思います。

ブランケットを羽織った女性

すこしぼかしが効いてリッチな雰囲気とか出そうです♪
今回は影として使いましたが、光彩としてもつかえます。
工夫次第でいろんな表現が可能ですね。

是非、色々と試してみてください。

それでは！良きコーディングライフを～(・ω<)ﾉｼ

]]> https://taneppa.net/css3_02/feed/ 0 【CSS3】で写真に色々装飾を加えてみた border-imageなど (枠・写真加工編【IE9以前は非推奨】 https://taneppa.net/css3_01/ https://taneppa.net/css3_01/#comments Fri, 16 Jan 2015 00:21:43 +0000 yanoppa! https://taneppa.net/?p=2018

どうもおはこんばんちわ、暑がりで寒がりな面倒くさいやつ…やのっぱです(´・ω・｀)おほー

今回はお役立ち記事が思い浮かばないので、装飾つくって遊んだだけです。

こういうのお好きな方は参考にしたり、もっとこうしたほうがいいよね…など考える材料にしたりしていただけると幸いです。
なお、今回IE9～6は無視してます。border-imageなどがIE10以降実装になってるからですね。
IEでも表示したい！って方はCSS3 PIEやcssSandpaperを使って対応させると良いですよ(´・ω・｀)ｂ


今回写真は「ぱくたそ」さんから拝借いたしました。
写真のチョイスは僕の趣味ですｗ 包まる娘っていいよね♪(´・ω・｀)


ブランケットを羽織った女性


それではちょこちょこやっていきましょう！


まずは、borderとかpaddingを使用した時に要素のサイズが変わるのを防ぐため、box-sizingを使用します。
次にimgを可変可能にしておきます。
これをしておくことで、とりあえず置いた画像のサイズをいちいち変えなくても崩れず編集していくことができます。

  <p class="img01"><img src="photo.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>
  




  <style>
	  .img01 {
	    max-width:500px;
	    margin:0 auto;
	    box-sizing:border-box;/* borderとpaddingをwidthに含める */
	    -moz-box-sizing:border-box;
	    -webkit-box-sizing:border-box;
	    -ms-box-sizing:border-box;
	  }
	  .img01 img {
	    width:100%;
	    height:auto;
	    vertical-align:top;
	  }
	</style>












枠を付ける編


では、まずはちょっと古臭いけど、白枠を付けてみます。(装飾用のclassを別に振ります)

ブランケットを羽織った女性

  <style>
	  .waku01{
	    padding:7px;
	    border:1px solid #ccc;
	    background:#fff;
	  }
	</style>
  




  <p class="img01 waku01"><img src="photo.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>












うん…普通ですね…ではちょっと影とか付けてみます。

ブランケットを羽織った女性

  <style>
	  .waku01 {
	    padding:7px;
	    border:1px solid #ccc;
	    background:#fff;
	    box-shadow: 1px 1px 5px rgba(20,20,20,0.2);/* ドロップシャドウ 【横位置 縦位置 ぼかし幅 色】の順に記述 */
	  }
	</style>












ちょっとましになりましたが、やっぱ古臭いですねｗ(´・ω・｀)
次は半透明な枠とか作ってみます。

作り方はimgを内包しているボックスをposition:relative;にして、擬似要素:before :afterを上に乗っける形をとります。
ここから自由度がぐっと上がります。

ブランケットを羽織った女性

  <style>
	  .waku02 {
	    position:relative; /* positionの基準とするためrelativeを与えます。 */
	  }
	  .waku02:before {
	    content: ''; /* このプロパティが無いと擬似要素は機能しません、お決まりの呪文です。 */
	    display: block; /* ブロック要素にします。 */
	    position: absolute; /* absoluteで上に乗っけます。 */
	    top: 0; /* 縦横の値を入れるのは基本です。入れないとだめ！っと思っておくほうが今後の為いいです。 */
	    left: 0;
	    width: 100%;
	    height: 100%;
	    box-shadow: inset 0 0 0px 8px rgba(255,255,255,0.6);
	    }
	</style>
  <p class="img01 waku02"><img src="photo.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>












すこしだけ角丸にしてみました。
さりげなくがよいです。 過剰な角丸って変になっちゃいますからね！(´・ω・｀)

ブランケットを羽織った女性

  <style>
	  .waku02.radius img {
	    border-radius: 4px;
	  }
	  </style>
  <p class="img01 waku02 radius"><img src="photo.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>












CSS3からborder-imageというプロパティが追加されました！
borderに画像を貼れるという代物です(´・ω・｀)ｂ

さっそく使ってみましょう！
紙のテクスチャ貼ったけど、なんだか額みたいですね・・・

ブランケットを羽織った女性

  <style>
	  .waku02.bImg {
	    border:10px solid #ccc;
	    border-image:url(paper.gif) 15 repeat;
	    -webkit-border-image:url(paper.gif) 15 repeat;
	  }
	</style>
  <p class="img01 waku02 bImg"><img src="photo.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>












額みたいなので、もうちょっと額っぽくしてみます。

ブランケットを羽織った女性

  <style>
	  .waku02.bImg:before {
	    box-shadow: none;  
	  }
	  .waku02.shadow {
	    box-shadow: 1px 3px 8px rgba(20,20,20,0.3);
	  }
	  .waku02.shadow:before {
	    box-shadow: inset 1px 1px 6px 0px rgba(0,0,0,0.4),
	                -1px -1px 2px rgba(40,40,40,0.2),
	                1px 1px 2px rgba(255,255,255,1);  
	  }
	  .waku02.bWidth {
	    border-width: 16px;
	  }
	</style>
  <p class="img01 waku02 bImg shadow bWidth"><img src="photo.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>












shadowを付けることで、少しはそれっぽく？なったと思いたいです。(´・ω・｀)


フィルターをかけたような効果を付けてみる。


先ほど作った額っぽい感じの中の写真にフィルター効果のようなものを付けてみます。

ブランケットを羽織った女性

  <style>
	  .filter01:after {
	    content: ' ';
	    display: block;
	    position: absolute;
	    top: 0;
	    left: 0;
	    z-index: 20;
	    width: 100%;
	    height: 100%;
	    background: -moz-linear-gradient(to right bottom, rgba(107, 84, 12, 0.5) 0%, rgba(248, 212, 119, 0.18) 50%,rgba(104, 107, 70, 0.7) 100%);; /* FF3.6+ */
	    background: -webkit-linear-gradient(to right bottom, rgba(107, 84, 12, 0.5) 0%, rgba(248, 212, 119, 0.18) 50%,rgba(104, 107, 70, 0.7) 100%);; /* Chrome10+,Safari5.1+ */
	    background: -ms-linear-gradient(to right bottom, rgba(107, 84, 12, 0.5) 0%, rgba(248, 212, 119, 0.18) 50%,rgba(104, 107, 70, 0.7) 100%);; /* IE10+ */
	    background: linear-gradient(to right bottom, rgba(107, 84, 12, 0.5) 0%, rgba(248, 212, 119, 0.18) 50%,rgba(104, 107, 70, 0.7) 100%); /* W3C */
	  }
	</style>
  <p class="img01 waku02 bImg shadow bWidth filter"><img src="photo.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>












セピアっぽくなるようにしてみました。
やり方は、beforeでもいいのですが、今回shadowでつかってますので、擬似要素：afterを使って、薄いグラデーションを載せています。
css filterを使えば、セピアとかさくっと出来るのですが、対応ブラウザが限定されるすぎるので今回この方法です。

それではもう一個つくってみます。

ブランケットを羽織った女性

  <style>
	  .filter02:after {
	    content: ' ';
	    display: block;
	    position: absolute;
	    top: 0;
	    left: 0;
	    z-index: 20;
	    width: 100%;
	    height: 100%;
	    background: -webkit-gradient(radial, center center, 0, center center, 400, from(rgba(255, 255, 255, 0)), to(rgba(255,255,255,1)));
	    background: -moz-radial-gradient(rgba(255, 255, 255, 0) 0%, rgba(255,255,255,1) 150%);
	    background: radial-gradient(rgba(255, 255, 255, 0) 0%, rgba(255,255,255,1) 150%);
	  }
	</style>
  <p class="img01 waku02 bImg shadow bWidth filter02"><img src="photo.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>












今度は円形グラデーションをつかってみました。(´・ω・｀)ｂ
雰囲気がガラッとかわりますね！
CSSのグラデーションは記述が面倒くさいですが、作ってしまえばclassを振るだけで同じ効果を得られるので、なんだかんだ便利です♪


でわ、写真風にもどして、レイアウトを変えてみましょう。

傾きを使って、工夫してみる


まずは写真風にもどして、すこし傾けたりしてみます。

ブランケットを羽織った女性

  <style>
	  .img01.waku03 {
	    border: 10px solid #fff;
	    box-shadow: 0 0 0 1px #ccc,1px 3px 8px 0 rgba(40,40,40,0.3);
	  }
	  .waku03.rotate01 {
	    -moz-transform:rotate(-3deg);
	    -webkit-transform:rotate(-3deg);
	    -ms-transform:rotate(-3deg);
	    transform:rotate(-3deg);
	  }
	  .waku03.rotate02 {
	    -moz-transform:rotate(1deg);
	    -webkit-transform:rotate(1deg);
	    -ms-transform:rotate(1deg);
	    transform:rotate(1deg);
	  }
	</style>
  <p class="img01 waku03 shadow rotate01"><img src="photo.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>













やはりこれも少し傾けるくらいがよいです。
大げさなのは今の流行りではないですし、安っぽくなってしまいます。


せっかくなので、先ほど作ったfilterを使ってみましょう！

ブランケットを羽織った女性


ブランケットを羽織った女性

  <p class="img01 waku03 shadow filter01 rotate01"><img src="photo.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>
  <br>
  <p class="img01 waku03 shadow filter02 rotate02"><img src="photo.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>













今回はこのくらいで！
次回は影などの表現をやってみたいと思います。(*´ω｀*)ﾉｼ

]]> https://taneppa.net/css3_01/feed/ 0 HTML5でコーディングするとき絶対しておいたほうが良い準備 https://taneppa.net/html5_1/ https://taneppa.net/html5_1/#comments Wed, 05 Nov 2014 03:22:22 +0000 yanoppa! https://taneppa.net/?p=1962

おはこんばんちわ、あなたのわたしのやのっぱです(´・ω・｀)おほー

最近、HTML5で記述することも多くなってきたのではないでしょうか？
初めてのHTML5！といった記事を書こうとおもったのですが、収まり効かなくなりそうなので
小出しにいたします。


今回は準備編です！
HTMLを勉強したてでHTML5はまだよくわからない！
でもなんだか最新ですごそう！使ってみたい！

そんな声が聞こえてきます（幻聴）


というわけで、初心者がよく抜けている【記述前にする準備】を紹介するよ(´・ω・｀)ｂ


まずは、え？なんの準備よ？ってお話ですが、HTML5はモダンブラウザはほぼ対応しています！、しかしながらIEはIE8以前は対応していません。またまたお前かIEェ….

どういうことかといいますと、新しく追加されたタグを認識しないのです。articleとかsectionとか…

なので、IEたんにこれはタグですよ～、箱なんですよ～、ブロック要素なんだよ～と教えてあげなければいけません。

これが初心者さんは意外と知らなくて、IEテストしたときにあれ？めっちゃ崩れてる！あわわっ！！
という場面をよく見かけます。

それではIEにタグを教えてあげましょう！


IEにHTML5をある程度対応させるおまじない

これを

<!--[if lt IE9]>
 <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


head内に貼り付けます。

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
  <link rel="stylesheet" href="style.css" media="all">
  <!--[if lt IE9]>
  <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <!-- ↑これです -->
</head>
<body>
	
</body>
</html>


これでIEに新要素のタグをある程度ブロック要素として認識してくれます。（中には対応していないものもあり）

ついでにHTML5対応のreset.cssも載せておきます。
resetせずに書く方は無視してください。

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border:0;
	outline: 0;
	vertical-align: baseline;
	background:transparent;
}
html {
	overflow: inherit;
	height: 100%;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display:block;
}
body {
	font-family: "メイリオ","Meiryo", "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", Osaka, sans-serif;
	color: #333333;
	font-size: 62.5%;
  line-height: 1.6;
	letter-spacing:0;
	-webkit-text-size-adjust: 100%;
}
h1, h2, h3, h4, h5, h6, p, td, th, address {
    font-weight: normal;
    font-size: 1.2em;
}
ol,ul {
	list-style: none;
}

fieldset,img { 
	border: 0;
}
img {
	vertical-align:top;
}
table {
	width:100%;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
}
th, td {
	text-align:left;
	vertical-align:top;
}
caption,th {
	text-align: left;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style: normal;
	font-weight: normal;
}
sup {
	font-size:62.5%;
	vertical-align: text-top;
}


基本は押えていますが、作る内容によって追加したり色々いじります。
とりあえず！ということでこれをreset.cssとして貼り付けておくと良いでしょう。


HTML5で記述するまえに、こういった準備をして自分なりに出来上がったものをテンプレートとして保存しておくことをおすすめします。


あと個人的にresetはしておいたほうが良いと思います。
多人数で編集するときなど、なんでここでlist-style入んねん！！！くそっ！
などとなることもあるからですね。


それでは、よきコーディングライフを～(´・ω・｀)

]]> https://taneppa.net/html5_1/feed/ 0 【CSS】のショートハンドまとめてみた【プロパティを一括で指定しよう！】 https://taneppa.net/shorthand/ https://taneppa.net/shorthand/#comments Sat, 11 Oct 2014 08:52:37 +0000 yanoppa! https://taneppa.net/?p=1969

おはこんばんちわ、たまにデザインすると通常の１７倍くらいストレスがたまるやのっぱです(´・ω・｀)おほー


今回は、後輩にちょっとコーディング手伝わせた時にショートハンド使ってなくて気になったので、CSSのショートハンドについてまとめてみました。


ショートハンド？なにそれ？ショートケーキかなにか？おいしいの？っという方のためにちょっとご説明します。


ショートハンドとは


例）

margin-top: 10px;
margin-right: 8px;
margin-bottom: 6px;
margin-left: 20px;


このように、marginなどは四方向個別に指定できますよね。
しかし、こんなだらだら書くのはかっこ悪いので、スマートに一括指定したのがショートハンドです。


例）ショートハンド版

margin: 10px 8px 6px 20px; /*上 右 下 左の順*/


このように短い記述で同じ指定が出来ます。
スマートになって、かっこいいですよね！←ここ重要


CSSの行数も短くなって、見やすくなります。
全ページのCSSのをstyle.cssなどに全部記述しなくてはいけない時とか、行数多いとうんざりです(´・ω・｀)


それでは、よく使うショートハンドをまとめてみます(´・ω・｀)まとめはじまるよー



margin/padding ショートハンド(指定方法はどちらもいっしょ）

.className {
  margin: 10px 8px 6px 4px; /* 上 右 下 左 */
  margin: 10px 20px 8px;    /* 上 左右 下 */
  margin: 10px 20px;        /* 上下 左右 */
  margin: 20px;             /* 四方向共通 */
}



基本時計回りですね。
この方式は四方向の指定ができるプロパティほぼすべてに使えます。


他の使用可能プロパティ


・border-width(枠線の太さ）

例）

.className {
  border-width: 2px 1px 2px; /* こんな感じ */
}



・border-style(線の種類)

例）

.className {
  border-style: solid dashed double dotted; /* 上:直線 右:破線 下:二重線 左:点線 */
}



・border-color(線の色）

例）

.className {
  border-color: red blue grey green; /* 上:赤 右:青 下:灰色 左:緑 */
}



・border-radius(角丸指定)

※border-radiusは角の指定なので上下左右ではなく、四角の指定にかわります。

例）

.className {
  border-radius: 3px 5px 7px 9px; /* 左上 右上 右下 左下 */
  border-radius: 3px 5px 7px;     /* 左上 右上左下 右下 */
  border-radius: 5px 7px;         /* 左上右下 右上左下 */
  border-radius: 5px;             /* 四つ角共通 */
}



時計回り型ショートハンドはこんな感じでした。


次にbackgroundプロパティのショートハンド



background


例）

.className {
  background-image: url(bgimg.jpg);  /* 画像 */
  background-position: left bottom;  /* 表示位置 */
  background-repeat: repeat-x;       /* 繰り返し */
  background-color: red;             /* 背景色 */
  background-attachment: fixed;      /* scroll(一緒にスクロール)かfixed(画面に固定) */
}



backgrondを分解するとこのようなプロパティにわかれます。


これをショートハンドで記述すると


例）ショートハンド版

.className {
  backgrond: url(bgimg.jpg) left bottom repeat-x red fixed;
}



っとなります。
短くて素敵ですね。
気をつけないと行けないところは、positionの記述ですね。基本、左右 上下の順に記述します。


あと、backgrond-sizeはたぶんショートハンド化は出来なかったと思うので書いてないです。
background-positionと記述がかぶるからだと思われます。


記述順に特に決まりはありませんが、自分なりの順番を決めておくことをおすすめします。


最後にfontのショートハンドです。



font


例）

.className {
  font-style: normal;
  font-variant:normal;
  font-weight:bold;
  font-size:140%;
  line-height:1.6;
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}



こちら、fontを一括指定できるのですが、他のショートハンドと違って、記述順に注意しなくては行けません。


例）ショートハンド版

.className {
  font:normal normal bold 140%/1.6 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}



このようにfont-style font-variant font-weightまでは順番は自由なのですが


font-size line-height font-familyはこの順番で記述しないといけません。


僕は面倒いので、fontに関してはショートハンド無しで記述していますね。


fontは別として、padding margin border backgroundはほとんどショートハンドで記述します。
一つだけ指定する場合は個別ですが、２つ以上指定する場合、ショートハンドの記述です。


web初心者の方は別々で書いているかもしれませんが、ショートハンドを使用して見慣れておくことをおすすめします。


現場ではほぼショートハンドですので、読めないと大変ですよ(´・ω・｀)


それでは、良きコーディングライフを～(・ω<)ﾉｼ

]]> https://taneppa.net/shorthand/feed/ 0 【Dreamweaver CC】でHTML5での画像挿入バグを直す方法 https://taneppa.net/dwbug/ https://taneppa.net/dwbug/#comments Mon, 28 Jul 2014 06:33:56 +0000 yanoppa! https://taneppa.net/?p=2070

おはこんばんちわ、毎年かならず風邪を3度は患うやのっぱです(´・ω・｀)おほー


本日はあの煩わしかったDreamweaverCCの画像挿入バグ改善法をご紹介します。


この改善方法が、意外とググっても出てこないんですよね。。。
というわけで、ふたっぱのジェバンニ（Boss）が一晩でやってくれました←ものの4～5分


その前に、どのようなバグかと申しますと、DreamweaverCCを使用してドキュメントタイプHTML5でコーディングしていくとき
画像挿入をすると、<img src=”*****.jpg” width=”300″ height=”300″ alt=”"/>と出ます。


なにがおかしいの？っと思いますよね…
よくご覧になってください。

bug01

そう…HTML5は閉じスラッシュいらないんです…しかも半角スペースも入ってないし(´・ω・｀)


一応HTML5はxhtmlの記述でも問題なく動くのですが、気持ち悪いですよね。
きっちりしてる制作会社だと、直して～と言われるところです。


でわ、これを直す方法ですがDreamweaverを制御してるjsを直接編集していきます。
ファイルの場所など自信が無い方は、お近くのよく知ってる人にお願いしてみてください！


ファイルの場所

C:\Program Files (x86)＞\Adobe＞\AdobeDreamweaverCC＞\configuration＞\Objects＞\Common＞\image.js

のimage.jsを変更していきます。
階層が奥の方なので、変なところを触らないように気をつけましょう♪


では、エディターソフトでimage.jsを開きます。(Dreamweaverでも良いです)
失敗が心配な方はバックアップをとっておきましょう！ image.jsファイルをコピーして拡張子.jsを.bkなどに変えて置いておくと便利です。


編集する場所は52行目にある【rtnStr = rtnStr + ‘alt=”‘ + ‘” />’;】の部分です

bug02


ここを以下のソースに置き換えます。

 if(thisDOM.getIsXHTMLStrictDocument()){
   rtnStr = rtnStr + 'alt="' + '" />';
 }else{
   rtnStr = rtnStr + 'alt="' + '">';
 }




こんな感じになればよいです

bug03


保存したら、Dreamweaverを起動している方は一度落として、もう一度ソフトを立ち上げてください。

すると、imgタグのバグが直っているはずです！

この仕様に戸惑っていた方も多いはず！
早速書き換えてみてください♪

それでは！良きコーディングライフを～see you(・ω<)ﾉｼ

]]> https://taneppa.net/dwbug/feed/ 0 今さら聞けない、marginとpaddingの違い https://taneppa.net/margin_padding/ https://taneppa.net/margin_padding/#comments Wed, 23 Jul 2014 06:51:53 +0000 yanoppa! https://taneppa.net/?p=1889

こんばんちわ、初夏ですでに溶けそうなゲルっぱ。。。やのっぱです(´・ω・｀)ｳｪｳｪ

今回は超絶初心者さんへ贈る、margin(マージン)とpadding(パディング)を軽めに説明します。

注意：本記事のソースはclearfixを導入した状態で作っています。 実際にお試しになる場合はclearfixを導入してください。
clearfixなんぞや？はこちら

margin paddingとはなんぞや？

marginとは要素間の間隔のことです。

paddingとは要素内の余白のことです。

混同しがちなので言い方を変えてみました。

では、marginからいきましょ～(´・ω・｀)ｂ

margin

プロパティ

個別

margin-top: ○px; 上に対するmargin
margin-right: ○px; 右に対するmargin
margin-bottom: ○px; 下に対するmargin
margin-left: ○px; 左に対するmargin

ショートハンド

margin: ○px; 四方向共通
margin: ○px ○px; 上下　左右
margin: ○px ○px ○px; 上　左右　下
margin: ○px ○px ○px ○px; 上　右　下　左

今回論理プロパティ（margin-startとか）は説明に入れません。(IE8以前は未対応だし。。。またおまえかIEたん;)

これは後日「【CSS】marginについてちょっと本気出して説明してみた」にて詳しく説明いたします。

ではまず、ボックスモデルを確認してみましょう。


図：ボックスモデル


このように、marginとは要素の外に対するものなのです。
なので、たとえばdivに背景色を付けていても、marginは外の間隔のことなので、marginの領域にそのdivの背景色は付きません。

なんのこっちゃ抹茶に紅茶な方は、borderやbackgroundを付けてみましょう。

実際にやって見るとよくわかります。百聞は一見に如かずです( ｰ`дｰ´)ｷﾘｯ

ではもっとわかりやすくするため、divを並べてみましょう。

↑ここmargin

↑ここmargin

↑ここmargin

↑ここcontBoxのpadding

↓ここcontBoxのpadding

<style>
.contBox {
  width: 480px;
  padding: 25px 0;
  margin: 0 auto;
  background:#fff;
  border: 2px solid #ccc;
}
.contBox .marginBox01 {
  float: left;
  width: 200px;
  height :200px;
  margin: 0 20px;
  background: #9ADEFF;
}
.contBox .marginBox02 {
  float: left;
  width: 200px;
  height: 200px;
  margin: 0 20px;
  background: #BAFFAD;
}

</style>
<div class="contBox clearfix">
  <div class="marginBox01"></div>
  <div class="marginBox02"></div>
</div>






ChromeやFirefoxなどの開発者ツールでフォーカスするとmarginやpaddingに色がつくので、使い方がわかる方は確認してみましょう。

ここで注意して見ておいて頂きたいのは、真ん中のmarginです。
20px＋20pxで40pxになっているのを覚えておいてくださいね！

では次に、よく引っかかるmarginの相殺を考えていきます。

これがあるので、marginを理解してないうちはmargin使いにくっ！！っとなるのかもしれません。

marginの相殺とは

marginは縦方向（垂直方向）に限り、重なるmarginを相殺する性質があります。

どういうことかといいますと

<style>
.contBox02 {
  width: 480px;
  margin: 0 auto;
  border: 2px solid #ccc;
  background:#fff;
}
.contBox02 .marginBox01 {
  width: 200px;
  height: 200px;
  margin: 20px auto;
  background: #9ADEFF;
}
.contBox02 .marginBox02 {
  width: 200px;
  height: 200px;
  margin: 20px auto;
  background: #BAFFAD;
}
</style>
<div class="contBox02">
  <div class="marginBox01"></div>
  <div class="marginBox02"></div>
</div>






このようなボックスモデルをつくりました。
marginBoxの上下に20pxのmarginをつけてますが。。。

marginBox01とmarginBox02の間が20px+20pxの40pxになっていないのにお気づきになりましたでしょうか？

上下に隣接する要素のmarginが同じ場合、相殺されてしまい、20pxの場合40pxではなく20pxになります。

では、どちらかが少ない、または多い場合はどうなのか？

その場合、値が大きいほうが勝ちます。

20pxと40pxだと40pxに軍配があがります。

ではやってみましょう！

marginBox02のmargin-topを40pxにしてみます。

どうでしょう？40px離れましたね。

このような性質があるので、使いようによっては便利につかえます。

ちなみにデフォルトでは<p>には上下にmarginが1emかかっています。
なので、デフォルトだと<p>同士がつめつめにならないんですね！

次はpaddingに行ってみましょう！

padding

プロパティ

個別

padding-top: ○px; 上に対するpadding
padding-right: ○px; 右に対するpadding
padding-bottom: ○px; 下に対するpadding
padding-left: ○px; 左に対するpadding

ショートハンド

padding: ○px; 四方向共通
padding: ○px ○px; 上下　左右
padding: ○px ○px ○px; 上　左右　下
padding: ○px ○px ○px ○px; 上　右　下　左

図：ボックスモデル

この様に、paddingは内側の余白のことです。

内側の余白なので、paddingを追加するとブロック要素自体の大きさもかわります。

要は脂肪ですね。

borderを皮膚とするとpaddingは脂肪です。
増えるとブロック要素は太っていきます。

なので、floatなどでwidthをきっちり指定する場合は注意が必要ですね。


paddingはmarginと違い、相殺されることもありません。

特徴としてはブロック要素を膨張させるので背景色なども一緒についてきます。
これもborderとbackgroundを付けてあげるとわかりやすいので、やってみてくださいね。

では実践してみましょう！

ピンク色がpaddingです。
白いところがmarginですね、わかりやすいように無理やりつくりましたが、黄色のところがテキストだったりします。

marginにくらべ、難しくはないのですが、ブロック要素の大きさを変えてしまうということだけ気をつけましょう。

これでほぼ終わりなのですが、一つpaddingをつかった例を作ってみました。(IE10～対応)

  • NAVI01
  • NAVI02
  • NAVI03
  • NAVI04
  • NAVI05
<style>
.navTest {
  width:100%;
  padding:4px 0;
  background: #5b5b5b; /* Old browsers */
  background: -moz-linear-gradient(top,  #5b5b5b 0%, #2b2b2b 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5b5b5b), color-stop(100%,#2b2b2b)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #5b5b5b 0%,#2b2b2b 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #5b5b5b 0%,#2b2b2b 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #5b5b5b 0%,#2b2b2b 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #5b5b5b 0%,#2b2b2b 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b5b5b', endColorstr='#2b2b2b',GradientType=0 ); /* IE6-8 */
  border-top: 2px solid #9B9B9B;
  border-bottom: 2px solid #9B9B9B;
}
.navTest .navList {
  overflow: hidden;
  width:80%;
  margin:0 auto;
  padding:0;
  box-shadow: 1px 0 0 #686868,-1px 0 0 #414141;
  -webkit-box-shadow: 1px 0 0 #686868,-1px 0 0 #414141;
  -moz-box-shadow: 1px 0 0 #686868,-1px 0 0 #414141;
  list-style: none;
  font-weight: bold;
  text-align: center;
  color: #DDDDDD;
}
.navTest .navList li {
  float:left;
  width:20%;
  padding:1% 0;
  box-shadow: inset 1px 0 0 #686868,inset -1px 0 0 #414141;
  -webkit-box-shadow: inset 1px 0 0 #686868,inset -1px 0 0 #414141;
  -moz-box-shadow: inset 1px 0 0 #686868,inset -1px 0 0 #414141;
  cursor:pointer;
}
.navTest .navList li:hover {
  text-shadow: 0px 0px 6px rgba(0, 255, 0, 0.56);
  color:#6FA25B;
}
</style>
<div class="navTest">
  <ul class="navList clearfix">
  	<li>NAVI01</li>
  	<li>NAVI02</li>
  	<li>NAVI03</li>
  	<li>NAVI04</li>
  	<li>NAVI05</li>
  </ul>
</div>






ざくざく作ったのでソースがあれですが、paddingを効果的に使うことで、ナビの縦線が途中から始まってたり
NAVIの文字を上下中央にしたりしてます。改行されるとアウトですが(汗
縦全部に線あるよりも、なんとなくこっちのほうがかっこいい。。。気がします(・ω・｀;)

marginでも出来るんですけれど、ボックスモデル的にこっちのが綺麗かなと

さて、marginの特性がわかればpaddingもおのずとわかってくるとおもいます。

まずは色々やってみて検証してみるのが良いと思います。でわ！素敵なコーディングライフを～(・ω<)ﾉｼ

]]> https://taneppa.net/margin_padding/feed/ 0