HTMLとCSSだけでアンドロイドのロゴを描く

・HTMLとCSSで絵を描く

イラレとかを使うとすぐ出来るというツッコミは置いておいて、HTMLとCSSのいい練習になるので、 描いてみた。 参考にしたのはこちらの動画。実際の製作者が入力した通りにコードが表示されるので、 打ち間違いとか入力の順番も含めて見られる。HTMLを全部書いてからCSSというふうに分かれてなくて、 ちょっとHTMLを書いたらCSSをつけて、またHTMLを足して、というふうに行ったり来たりして作るものなんですね。 人によるんだとは思うが。

CSS3 Android Logo

・気になったテクニック1 margin: 0 auto;

CSSでこう指定すると要素がセンタライズされるのだが、このautoって何か分からなくないですか？ 上下のマージンが0で、左右がautoということなんだろうけど・・・ 試しにマージン0でやるとブラウザの一番左上に寄せて表示される。まあこれは分かる。 でもなぜautoをつけただけで中央に寄るのか？

そこで調べたところ、どうやらautoを指定すると自動でマージンを調節してくれるようです。 ただし、marginとautoを使って中央寄せにするにはwidthがないといけない。 margin: 0 auto;を設定した場合、左右両方に均等にmarginが割り振られる。 margin-leftを設定すると右寄せ（左側にマージン）になり、margin-rightを設定すると左寄せ（右側にマージン）となる。 なので、widthが500pxで、ブラウザ幅が1,000pxだった場合、margin-left: auto;と設定すると、 左側に500pxのマージンが入るということ。

じゃあheightを設定してmargin-topを設定したら同じように動くのかな？と思ったらそれは動かない。 margin-topにautoじゃなくて数値を指定するとしっかり上側にマージンが入るのだが・・・ 上下と左右でautoの仕様が違うのかもしれない。

参考にさせて頂いたのはこの記事。ちょっと古いようですが、marginの部分の話は今も一緒かと思います。

kojika17.com

・気になったテクニック2 div div

下のように全てのdivに対してCSSを指定するのは分かるが、div divと二重になっている例に遭遇した。

div {
  background: black;
}

何で2回書く？と思ったが、divにネストしているdivのみに適用させるためのようだ。 なので、例えばこう書くと全てのpタグにboldが適用されるが、

p {
  font-weight: bold;
}

こう書けばdivにネストしているpタグにだけプロパティを適用できる。

div p {
  font-weight: bold;
}

・気になったテクニック3 transform

選択した要素を動かすことができるプロパティ。 今回は:hoverと組み合わせて、カーソルを持っていくと動くという形にした。 rotateは回転の動きを加える。カッコ内の数値で角度を指定する。プラスの数字の場合は時計回り、 マイナスの場合は半時計回りで動く。

translateは上下左右に移動させることが出来る。カッコ内の数値は基本的に1つあるいは2つ指定できる。 （3Dに動かすことも出来るらしいが今回は見ていない） 最初の数値で左右の動き、2つ目の数値で上下の動きを加える。 下のコード（transform: rotate(7deg) translate(5px, -15px);）では右に5px、上に15px動かしている。

scaleは要素の大きさを変える。カッコ内の数値で倍率を指定。translateと同じく、 最初の数値で左右のサイズ、2つ目の数値で上下のサイズを指定する。下のコードでは縦横の比を保ったまま 1.5倍にしている。

.head:hover {
    transform: rotate(7deg) translate(5px, -15px);
}

.l_eye:hover, .r_eye:hover {
    transform: scale(1.5, 1.5)
}

.l_arm:hover {
    transform: rotate(30deg) translate(-35px, 0px);
}

あと最後にもう１テクニックあるのだが、それは長くなるので次の記事にする。 完成したアンドロイドくんはSinatraに組み込んでherokuにデプロイしたので、 よかったら触ってみてください。

Android logo

※一応スマホでも動くようにしてますが、なんかカクカクしてる・・・