1pxの差がデザインを決める

さて、ウェブサイトを制作したことがある人、これから始める人も、1pxのズレを気にしたことがありますか?

Photoshopillustratorを使ったことのある人なら、1pxという細かいことも気にしている方の方が多いと思います。

つまり、デザインかはら入った人は1pxを気にするという感覚があるのです。

私のように、htmlやcssといったコーディングから入った人は、はじめのうちは1pxを気にするという感覚がないのです。

ですから、初めて自作のページを作ってみてもなんだかキレイなページにならない。そんなことを経験した人は少なくないはずです。

なぜキレイに見えないのか?それは、数ピクセルのズレが原因かもしれません。

改善策としては、
左右上下の余白を揃える。
横幅、高さを同じにする。
文字サイズを統一する。
色はあまり使いすぎない。

以上のことに注意を払うだけで、だいぶ印象が変わりキレイなページに近づくはずです。

自分がキレイだと思うサイトを良く見て見ましょう!そして、なぜそのページがキレイに見えるのか考えてみましょう。

それは、きっと
左右上下の余白を揃える。
横幅、高さを同じにする。
などの積み重ねによるものでしょう。

はじめのうちは、高機能なサイトを作るのは難しいです。

しかし、余白を揃えることや幅や高さを揃えることは、今すぐに意識するだけで実践できることなので是非意識してみてください。あなたのwebサイトもキレイに整って見えるはずです。




CSS, なるべく固定値は使わない!

最近、コーディングも早くなりバリバリコードを書いて調子に乗ってました。そう、自分はできる!と思いこんでいました。

しかし、先輩にコードを見てもらったところ全然ダメとのこと。

CSSに関しては、とりあえず固定値でなんとかpxとか指定しない方がいいとアドバイス頂きました。ですので、最近では、%で可能な限り記述しています。%の方がレスポンシブにするときに便利だし、効率的だと実感しました。

初心者でpx指定をしている方は、なるべく%で記述するようにしましょう。

この前までは、とりあえず見た目が良ければいいや程度にしか考えてなかったのですが、「修正しやすい」サイトを作ることが大切だと思うようになりました。

例えば、ここの余白をもう少し広くしたい。おそらく誰もが経験したとこがあるかと思いますが、例えば、margin:10px; と書いてるのにマージンが反映されない。何故だ?と困ったことがあると思います。これってかなりストレスなんですよね。やはり、そんなときすぐに修正を反映することができるコーディングをすることが大切です。そのように修正しやすいコーディングをしておけば、修正をストレスに感じることなく楽しくサイト制作に打ち込めると思います。また結果的に効率的でもあります。

Web制作は「修正」との戦いですから、この「修正」に負けないようにどのような工夫をするかが大切です。いかに効率良くコードを書けるか。どれだけ再利用可能なコードを書けるか。そんなことも意識しながらweb制作に取り組むと良いかもしれません。

私は、jadeとcassを取り入れ、さらにcssとhtmlの復習をすることにしました。

web制作を学び始めて、もうすぐで1年経ちます。実務期間は半年程になります。

日々勉強の毎日ですが、1年前の自分や半年前の自分とは明らかに違うということが実感できるので楽しいです。

 本当に成長したと思います。最近なんかでは、jQueryさんの使い方がわかってきたところです!

それでは、今回はここまで!

htmlを生成してくれるjadeがすごい件

Webサイトのコーディングをするとなると、まずhtmlを書いてcssでデザインをするというのが一般的なフローかと思います。しかし、jadeを知ってしまったので、htmlは基本的に触らなくなりました。

jadeとは?
簡単に言うと、htmlを出力してくれるhtmlみたいなもの。プログラミング言語に近いイメージですかね?ですので、プログラミングに慣れ親しんでいる方は、jadeを取り入れると良いかもしれません。例えば、変数を定義したり、ループができてしまったりと、htmlだけではできないことができます!

Jadeさんの良いところ
1.先述の通り、プログラミング言語に近い。
個人的に、私がプログラミングに慣れているということもあり、配列やループなどの命令を書くことができるので、管理がしやすくなります。
例えば、配列にリンク先のURL、テキスト、画像URLなんかを格納しておけば、そこからデータを引っ張ってこればいいわけです。

2.記述量が減る
<div class="box"></div>
空のdivを書こうとするとhtmlではこうなりますが、
jadeだと
.box
はい、これだけ!
また、ループが使えるので、似たような繰り返しのコードを書く必要がありません。これにより、全体のコードが短くなり、ファイルの見通しが拡大によくなります。例えば、1000行のコードが100行程度に収まるなんてことも可能です。

悪いところ
プログラミングに近いのでコンパイルしなければなりません。つまり、エラーが出るとそのエラーを見つけ修正する必要があります。これがなかなか難しい。jadeの重要な要素としてインデントがあり、インデントによって要素を入れ込んだりします。このインデントをミスるとエラーが出ることが多々あります。これが少し厄介ではあります。

まとめ
jadeを使うとプログラミングのようにコーディングできる。それ故、必然的に保守性や管理性または再利用性に優れたコードを書くことができるので、生産性があがる。つまり、「めっちゃ効率的」だと思います!!!

Photoshopをはじめる。

Web製作をしていていつも困るのが画像などのデザイン。

私は、htmlやcssのコーィングは独学で勉強し、半年ほどで簡単なwebサイトなら作れるようになりました。

 

しかし、クラウドワークスなどをみてみると、コーディングだけのお仕事がなかなかありませんでした。私の目標はwebデザインで稼ぐこと。web designのお仕事をみてみるとwebサイトのデザインだけの案件が多いことを知りました。ですので、Photoshopを使いこなす必要があるのです!

 

これからwebデザインでお仕事をしたいと思っている方は、コーディングの知識よりもPhotoshopを使いこなせるようになることを優先されるのが良いかと思います。

 

Photoshopを使いこなすには、ショートカットキーを覚えるのがポイントだと思います。

⌘N で新規作成。

⌘O でファイルを開く。

ものすごい基本的なショートカットキーですが、すごい便利です!!

はてなブログを始める。

はてなブログを今日から始めることにしました。

 

なぜやるか

Webデザイナーになるため日々勉強しています。学んだことをノートにまとめ感覚で「ブログ」にまとめようと思ったからです。jQuerycssのコードなどを自分のブログにまとめておけば使い回しなどが簡単にできて便利だと思いました。また、同じようにwebデザインに興味がある人の役に立てればと思います。(ここだけの話ですが、少しばから広告収入を期待してます。)ちなみに私の専門はプログラミングです。専門といってもただの大学生なので、大したことはありませんが。

どのようにやるか

Webのことを学んだらそれをブログにまとめていきます。

1週間に3−4記事は更新したいです。3日坊主になっても続けたいですね。10回3日坊主を繰り返せば30回ですからね!ポジティブにいきましょう。

現在勉強していること

  • Photoshopの操作方法。
  • jade, scssによる効率的なweb制作。
  • jsonを使った自動更新。
  • jQueryによる動的ページの作成。
  • java, jspによるデータの出入力。
  • wordpressの運用