サイトをリニューアルしたから今回使ったものをまとめてみた

今回自分のサイトをリニューアルしたので
kentsu-141.github.io
これに使ったものをざっくりまとめてみる

まず基本的なデザインはこのホームページを見て思いついた
sard.website
ただ画像なんかを用意するのがめんどくさかったのと
なるべく最初の状態でスクロールする状況を作りたくなかったので

折りたたみ(後述)といつもどおりのカラーだけでゴリ押しのスタイルで作ると
今回のようなサイトになった

今回使ったもので、表示部分を折りたためるあれは「アコーディオン」というもので
htmlタグのdl,dt,ddタグとjqueryを使って作った

参考にしたサイトはこれ
liginc.co.jp

これで表示部分を折りたためるようになった
しかしデフォルトでは折りたたまれず展開された状態になってしまうので

dd{
    display:none;
}

をスタイルシートに追加しておいた
これでページ読み込み時で折りたたまれた状態になる

今回は今まで使ってこなかった方法でフォントを持ってきてみた

@import url(http://fonts.googleapis.com/css?family=Economica:400,700);

普段はダウンロードしたrobotoとかtahoma,impactあたりを使うんだけどこれもこれで良かった
こうして持ってきたフォントは以下のように使う(今回は全ページで統一なのでbodyタグに)

body{
    font-family:'Economica',sans-serif;
}

これが一番気になるだろうけど、特に独自実装したわけでなく
外部からwow.jsとanimate.cssを持ってきただけという

animate.cssは以下のサイトからいろいろ選べる
https://daneden.github.io/animate.css/

wow.jsはanimate.cssと併用するため必要
以下のレポジトリからダウンロードした
github.com

ただ注意すべきは、wow.jsをググればわかるが
ページがスクロールされ表示範囲に入った時にアニメーションに入ることや
サイズの大きい要素や、いくつも要素を同時に動かすと特にスマホなどで見た時にラグがでてかくかくになるので注意

割といつもフラットデザインになるようにしているが今回もなかなか微妙な出来になってしまった

それが僕には楽しかったんです。