kentsu.dat

何かその時の興味でいろいろする人。最近はScala使ってる。アルゴリズムと自然言語処理、深層学習が大好き。

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

はじめに

今回自分のサイトをリニューアルしたので
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をググればわかるが
ページがスクロールされ表示範囲に入った時にアニメーションに入ることや
サイズの大きい要素や、いくつも要素を同時に動かすと特にスマホなどで見た時にラグがでてかくかくになるので注意

最後に

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