ポートフォリオのデザインを一新した話。

  • 2019.05.25
  • Web
ポートフォリオのデザインを一新した話。

お久しぶりです。DAFUです。

今回は、私の自己紹介・ポートフォリオとして使っている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で公開しています。

もし気になるならこちらをご覧ください。