お久しぶりです。DAFUです。
今回は、私の自己紹介・ポートフォリオとして使っているdafu.cfのデザインを一新したのでそのときのことについて書きます。
dafu.cfまずは、今回一新したデザインをお見せしましょう。
こんな感じにシンプルなデザインになっています。
また、画像にある通り、今回はPCで見たときにWindowsの設定画面のようなデザインにしました。
結構久しぶりにほぼ一からCSSを書いたのでレスポンシブ化など多少手間取りましたが、自分でクラスやIDを命名出来るのはいいですね。
なんていうか、管理がしやすくて。
ここからは少し技術的な話になりますが、今回このポートフォリオを一新するにあたり、どういう風に作るか悩んだのですが、私はindex.htmlにiframe埋め込んでそのsrcを変更することで表示を変えるという手を取りました。
その際のjQueryコードが以下のようになっています。
$('.side-list-item,.nav-title,.side-title').on('click',function(){
$('#main-frame').attr('src',$(this).data('target'));
})
あらかじめ<li>タグなどにdata-target属性を付加しておき、それをjQueryで扱います。
jQueryのいいとこはこのように任意の属性を簡単に扱えるところですね。
ちなみにすべてのコードはGitHubで公開しています。
もし気になるならこちらをご覧ください。