【Web Design】 未経験からWEBデザイナーになるためにやったこと

webDesigner01.jpg

この度、めでたく就職活動の末、WEBデザイナーになれました!

仕事を始めてまだ1ヶ月ぐらいですが、これからWEBデザイナーになろうかなと考えている人のアドバイスになればなと思い、私がやってきたことや、就職前にやっておきたいことをまとめてみました。

本コラムは、どちらかというとWEBデザイナーになることよりも、WEB業界を目指すために必要な事柄を書いていきたいと思います。


【JavaScript】 はてなブログのような Syntax Highlight を導入する

highlightjs.png

はてなブログのように、ソースコードを表示させるために、highlight.js を利用してみます。

CMSのプラグイン依存でなく、JavaScriptのプラグインを使用することで、どんな環境でも使用することができます。また、軽量な上に数多くの言語に対応しています。

【jQuery】 Colorbox と framework.js を組み合わせて、モーダルウィンドウ内のリンク移動をカテゴリ内にする方法

framework.png

Colorboxframework.js を組み合わせて、モーダルウィンドウ内のリンクをカテゴリ内移動のみにします。

ポートフォリオサイト制作の時に、Colorbox などで作った作品をモーダルウィンドウで紹介することがよくありますが、frameworks.js と組み合わせることで、モーダルウィンドウ内のナビゲーションリンクを、特定のカテゴリのみの移動に切り替えることが出来ます。

やり方が分かれば、Fancyboxでも応用可能です。


2015/01/09 HTML構文エラーを修正しました。(rel属性を使うとエラーになるため)

【jQuery】 Colorboxを使ったときに出る青い枠を消す方法

Colorboxの修正

Colorboxで表示させたモーダルウィンドウを閉じた後に出る、青い枠を消す方法を紹介します。

実はこの青い枠は a要素に付いた border じゃなくて、 a:focus の outline なんです。なので解決方法は以下のように値を割り当てます。

a:focus{
  outline: none;
}

これで青枠がでなくなります。

FireFoxではこの a:focus のアウトラインが表示されないので、今まで設定してこなかった人たちも要チェックです。