ハートを描けるCSS

ふとハートのアイコンが欲しくなったのですが、入手した画像の解像度が荒かったので、

『この科学文明の世の中にハートアイコンなどCSSで書かれてるに違いない』

と思ってググってみるとやっぱりありました。

おなじみcss-tricks

http://css-tricks.com/examples/ShapesOfCSS/

ハートだけじゃなくて色んなアイコンがあるのがウレシイ。

あと、アイコン単位でCSSが独立してるので、

『bootstrapのこれだけが使いたいのに、他のクラスもついてきて既存ソースへの影響ががが！』

的な悩みも気にしなくていいのですばらしい。

で、『これでなんでハートになるんだよ』って思ったので順を追ってみてみました。

ハート描画は以下のCSSで行っているのですが、なんかぱっと見たくさん書いてあるように見えます。

#heart {
  position: relative;
  width: 100px;
  height: 90px;
}
#heart:before,
#heart:after {
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: red;
  -moz-border-radius: 50px 50px 0 0;
  border-radius: 50px 50px 0 0;

  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;

}

#heart:after {
  left: 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin :100% 100%;
}

ただ大半は複数種類ブラウザ対応用のベンダープレフィックスなのでそれを取り除き、これからやること用のナビゲーションコメントをふると以下のようになります。
ちなみにワタクシはchrome使ってるので-webkit-のやつで試してます。

#heart {
  // サイズ調整
  position: relative;
  width: 100px;
  height: 90px;
}
#heart:before,
#heart:after {
  // 共通部分で右半分と左半分の領域サイズを定義したり色を定義したりしてる
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: red;
  // ハートの描画ステップ1（上丸長方形）
  border-radius: 50px 50px 0 0;

  // ハートの描画ステップ2（回転中心設定）
  transform-origin: 0 100%;

  // ハートの描画ステップ3（半時計周りに回転）
  transform: rotate(-45deg);
 
}

#heart:after {
  // ハートの描画ステップ4（今までafterとbeforeの二枚重ねだったやつのafterのleftを0にすることでafterを左にずらして見えるようにする＆回転中心設定）
  left: 0;
  transform-origin :100% 100%;

  // ハートの描画ステップ5（時計回りに回転）
  transform: rotate(45deg);
}

でこれを図解したのが以下です。


………
……
…
よくかんがえるね、こんなの。
すごいです。

CSSの中身は難しくないのでradiusの値とかwidthとかcolorとか調整したら任意のハートがつくれるでしょう。
今回は以上です。

それではまた次回までごきげんよう。

追記
上の画像回転の説明が若干うさんくさい（というか間違ってる部分がある）のですが、なんとなく雰囲気（ずらして回す）は伝わると思うのでそれでユルしてください。

Bootstrapのcarouselをつかってみる その２ 使ってみる

というわけでBootstrapのcarouselを実際に使ってみましょうというやつです。

の冒頭のサンプル

<div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

を使ってみます。
で、実際に使ってみたんですがこんなカンジになりました。

右上の○をクリックすると各ページに移動して、左右の△をクリックすると次/前ページ移動になります。 これとさっきのソースを照らし合わせてみてみると以下のカンジです。 ＃ソースに解説をつけただけです。

<!-- carousel全体のdiv --!>
<!-- class属性にcarouselとslideを指定する必要がある --!>
<div id="myCarousel" class="carousel slide">
  <!-- 右上のページ指定移動リンク -->

  <!-- carousel-indicators のclass指定で ○が横に並ぶのを実現（実際にはcssがやってくれる） -->
  <ol class="carousel-indicators">
    <!-- 右上の○の１つ１つ data-slide-to で移動先スライドを指定 -->
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- Carousel items -->

  <!-- 表示する写真たち carousel-innerをclassに指定するとスライドセットとして認識される -->
  <div class="carousel-inner">
    <!-- … という部分にはimgタグ等で写真を表示する -->
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Carousel nav -->

  <!-- ページめくりボタン -->
  <!-- classにcarousel-control left（right）と指定してdata-slide にprev(next)を指定すると機能する --!>
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

うむ、簡単だ。

carouselは使ったカンジのメモとしては以下のようなものがあります。

スライドショーの全体幅を調整するには？
大外のdiv（#myCarousel）にwidthを設定すればいい

自動スライドショーを止めるには？
大外のdiv（#myCarousel）に data attribute形式で指定
以下の感じ
data-interval="false"
ちなみに指定されない場合のデフォルトは多分5000ミリ秒になってるんだと思う（感覚）

サイズの違う画像をめくろうとするとどうなる？
大外のdiv（#）で指定したwidthに収まるようにリサイズされた
恐らくwidth,heightのうちオーバーする方に勝手にリサイズされるのだろう（多分divのフツーの挙動）

ページめくり画像ってどうしてるんだ？
『>』っていう文字を装飾しているようだ
なーる

右上の○○○は画像に引きずられて移動するの？
しない
CSSで
position: absolute;
top: 15px;
right: 15px;
と指定されてる

ちなみにposition: absolute;は
親要素が position:static のときはウィンドウの左上、親要素が position:static 以外の時は親要素の左上を基準位置とし、top, left あるいは right, bottom で指定されたオフセットの絶対位置に表示します。
らしいので、この場合は親divがposition:relative; なので親要素の左上が基準位置になっている

これモーダルダイアログ化できる？
（かなり簡単に）できた
ダマされたと思ってモーダルのデモコードのbodyの部分にcarouselのコードを挿入してみなさい


と言ったところでcarouselはこんなもんで（簡単なので）
それではまた次回までごきげんよう。