読者です 読者をやめる 読者になる 読者になる

中央線に乗って考える

好きなモノとか、欲しいモノとか、日々のこととか

Webデザインは簡単だ!初心者でもできる非プログラマーのCSS簡単変更方法。

非プログラマーで、業務でWebはやったことはないです。
Web屋さんにTopページだけのデザイン(イラレデータ)を渡すことは、結構ありますけどね。

 

ただWebがまったく出来ないのではこの先怪しいので、独学で色々勉強はしてきました。レンタルサーバーを借り、WordPressを設置。既存のテーマのCSSを真っさらにして、1から構成しなおしたりしました。

 

当時は、HTMLを細かい文字でA3用紙にプリントアウトして、divを探しては線で囲み、どういう順番か、入れ子になっていないかを調べて、やっとデザインにとりかかる。

 

真似したいパーツデザインのページがあったら、HTMLのコードを表示してclassやidなど探す。CSSも表示してclass名やid名で検索する。そうやってデザインを真似たりしてました。

 

そんなことをして覚えていったCSSですが、今ならもっと簡単なデザイン方法があります。

 

簡単Webデザイン方法

はじめに(おことわり)

パーツ単位のデザイン変更が主な趣旨です。構造に関わる全体デザインに関しては、HTMLとSCCの基礎的な本を一度読まない難しいかと思います。ただ、パーツ単位のデザイン変更の繰り返しの先に、全体構造のデザインがあると思うのです。

 

1. 道具は、ブラウザだけ。

最近のブラウザには、Web開発ツールというものがついています。例えばこのブログの「大見出し」はこんなデザインですが、

f:id:savoia1976:20141026153959j:plain

FirefoxのWeb開発ツールを使った場合、「大見出し」を選択すると、こんな風に表示されます。

f:id:savoia1976:20141026154954j:plain

例えばオレンジの部分がマージン(余白の意味)を示しています。

 

2. 表示されたCSSをコピーするだけ。

先ほどの「大見出し」を選択後、Web開発ツールに戻ると、CSSが表示されています。

f:id:savoia1976:20141026155925j:plain

この右側部分、赤で囲んだ部分以外も全てが「大見出し」に関わるCSSなのですが、特に1番上に出てきている赤で囲んだ部分が、大抵はデザインの部分です。

 

ここをコピーすると、CSSがコピーできます。

f:id:savoia1976:20141026163047j:plain

f:id:savoia1976:20141026163121j:plain

これを、はてなブログでしたら、「デザインCSS」に追加するだけ。

f:id:savoia1976:20141026163438j:plain

 

3. Web開発ツールでCSSの変更も可能。

試しに、チェックボタンを外してみてください。

f:id:savoia1976:20141026162401j:plain

 

そうすると、リアルタイムでブラウザ内のデザインが変わります。

f:id:savoia1976:20141026162758j:plain

(大見出しの左側にあったボーダーが消えました。)

 

また、数字の変更も出来ます。

f:id:savoia1976:20141026164107j:plain

40pxに変更すると、左のボーダーが太くなります。

 

Web開発ツールでデザインの見た目をリアルタイムで確認しながら変更し、最後にそれをコピーしてCSSに追加するだけで、誰でもデザインが変更できます。

 

いきなり、まとめ。

実際は、コピペだけではうまくいかないこともあるし、変えたくないところまで変わってしまったりと苦労することはあると思います。

 

でも、こういったちょっとしたデザインの変更が楽しくなることによって、どんどん勉強したくなると思うのです。HTMLやCSSの本は十冊以上買いましたが、結局真似をするのが一番覚えます。

 

でも本は何冊か買った方がいいですよ。何冊か読むと基礎がわかります。独学の大変なところは、何が基礎なのかがわからない状態だと思うのです。

 

「Web開発ツール」に関して

どのブラウザにもWeb開発ツールはあるのですが、それぞれに特徴があります。私はFirefoxを使っていますが、Chromeも良さそうです。

f:id:savoia1976:20141026171730j:plain

ChromeのCSSは、一番下に図が出ます。パディングやマージンが、ビジュアルで表示され数値も出ます。

 

各ブラウザのWeb開発ツールに関する情報は、このページがおすすめ。



プロのWebデザイナーはどうやってデザインするのか?

Web屋さんの知り合いがいないので、わからないです。このソフトが必須ってのがあるのかな?

 

私の思うプロのWebデザイナーって、HTMLやCSSはもちろん、サーバーの管理、CMSの管理、JavaScriptの制作、Flashの制作が全て一通りできる人だと思っているのですがどうなんだろう。