タグ: CSS

私はWeb制作をほぼ趣味でやっています。たまーにお仕事いただきますが知人とか、その友人とか。
普段は、マニュアル制作の進行管理がメインのサラリーマンなので帰宅してから勉強したり、制作したり。あ、通勤電車で技術系の書籍読んだりとか。HTML、CSS、WordPress、Webデザイン、コーディングなどなど。書籍から学んだり、アフター5にセミナーやWebスクールに通ってみたり。

コツコツやれどもやはり趣味レベル。
覚えてもやはり繰り返し実践してはないので、忘れます。。都度ググる、書籍ひっぱりだす、教わったメモを検索する。HTMLやCSSをコーディングするのは、大好きなんだけど上記の通り、「忘れる」やら「時間ない」やら。

そこで、以前から気になっていたCSSフレームワーク！それってなんじゃいな？と。簡単に言うと既に設計されたCSSを使用し、HTMLのclass属性に予め決まった属性値を入れるだけで、リッチなメニューやボタン、タブにマルチカラムレイアウトが出来ますよと。

Twitter Bootstrapなんてとっても有名だし、以前そのテンプレートから知人の会社サイト作ったこともあるけど、出来た箱にコンテンツ入れて、色変えて、ちょっとだけjQueryの設定した位で、そもそもが理解していない。。これ覚えたら、その先にいろんな事出来そうかなと予感し、初めてみようと。
で、私は数あるなかでも、FoundationというCSSフレームワークを学んでみようと思います。なんでかって、たまたまやろうとしたWordPressの書籍のサンプルがFoundationベースだったから！

いいんだよ。そんな動機で。おじさんの趣味なんだし。広く浅くでもいろいろ知識を食べたいのさ！頑張ろう。
ちなみに今回の書籍はこちら！

現場でかならず使われているWordPressデザインのメソッド

自身のブログ take4itsのコゴト のトップページはメニューのボタンを大きく構えております。
デザインセンスなんて皆無なので、思いついたままこの形にしました。最初は静的サイトで運用していましたので、メニューはカテゴリ分けにしてブログの記載内容を絞ってしまおうと考えていました。
その後、ネタが続かず後悔するのですが、、、
静的ページでしたので更新もブログ感覚で出来ず、都度HTMLを編集していました。面倒くさいですよね。そこでWordPressに移行した訳です。

ちょっと話がタイトルとそれそうです（笑）ともあれ、トップページのメニュータイトルを今まではhoverすると斜めに傾けるようにしていましたが、飽きてきた＆他を試したいということで、この度変更してみました。
ちなみに今までのCSSは以下です。
※斜めにするためのプロパティのみにしております。あしからず。

li {
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

li:hover {
	-webkit-transform: rotate(-2deg);
	-moz-transform: rotate(-2deg);
	-o-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);
}

transitionの設定はそのままでhover時のtransformの設定を今回は拡大する内容に変更してみたいと思います。

li {
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

li:hover {
	-webkit-transform: scale( 1.05 );
	-moz-transform: scale( 1.05 );
	-o-transform: scale( 1.05 );
	-ms-transform: scale( 1.05 );
	transform: scale( 1.05 );
}

変更点は、transform: rotate(-2deg);　→　transform: scale( 1.05 );だけです。
無事トップページメニューのhover時の動きが斜め　→　拡大に変更されました。
transitionで時間的変化の設定を入れて、transformで、要素にマトリクス変形、移動、縮尺、回転、傾斜などの変形を適用するということですね。
ここでは細かい説明などは書きません。ググってください。（無責任ですかね。。。）

今後こういった内容をネタに書く時はなるべくシンプルに、何をどうしたら、こうなった。
といった感じで書きたいと思っております。