ホーム

スタッフブログ

2016年1月14日

未経験の方は必見の効率的なCSSスキルアップ方法

先日よりインターンでお世話になっているSです。

シナジーデザイン S

シナジーデザインS

イラストレータやフォトショップを軽く経験したことがある程度の未経験です。

本日、会社代表から教わったCSSに関する内容がとてもタメになるので、このブログで共有したいと思います。

「メモ帳」だけで大丈夫

CSSを学ぶことは決して敷居の高いことではないんです!

CSSの学びたいが、どのように勉強をすれば良いのかわからない!何から手をつければ良いのかわからない!と感じて、結局何も手を付けられずにいる方もたくさんいらっしゃるのではないででしょうか?

以前の私もそれに近いものがありました。。。

そんな方にご朗報です。実は、CSS記述の練習はPCのメモ帳機能1つで可能なんです。

メモ帳機能を使用することで、簡単かつ手軽に始めることが出来ると思いませんか?

更に、メモ帳機能を使用してCSSを記述練習する場合、専用ソフトを使用するのとは違い、全て直打ち記述となります。

そのため、何度も反復練習をすることで着実にCSS記述が身についていくというメリットもあります!

いかがでしょうか?少しでも最初の一歩を踏み出せそうですか??

HTMLの要素は全部『四角』

頭の中でイメージして見てください!

HTMLで記述した各要素というのは、全て四角で構成されています。

頭の中に?が浮かんだ方もいらっしゃるのではないでしょうか?

ここでいう要素というのは、#wrapper、#main_content、#footerなどのことを指しています。

上記の要素を記述しただけの状態ですと、上から下に四角の領域が積み重なっている状態ですよね?

この四角をイメージすることが、実はとても重要なんです!

CSSとは、テトリスのブロックのように、上手く綺麗に四角のブロック(HTML要素)を積み重ねていくために記述するものです。

1ピクセルもずらさずに積み上げる

四角の要素を上手く綺麗に積み上げていくことで、見やすいレイアウトが出来上がります!

まずは、練習する際におススメする方法としまして、弊社代表ブログのデザインに関する内容の中に記載されている『完コピ』です。

中途半端に真似るのではなく、1pxのずれもなく徹底的に何度も真似るということです。

プロが考え抜いて記述したCSSを体で覚えていくには、完コピがおススメです!

フロートが鬼門のポイント

四角の要素を綺麗に積み上げていく際に必要不可欠なこと!それが『フロート』です。

何度かCSSを記述したことがある方はピンときているのではないでしょうか?

フロートというのは、要素を左右に回り込ませる命令です。

#main_contentの中に#leftと#rightが並列にある場合、floatという記述でレイアウトしていきます。

では、何故このフロートが鬼門かと言いますと、フロートいうのは解除命令を記述しない限り、エンドレスに要素を回り込ませてしまうのです。

『フロート解除』はHTML側とCSS側に命令文を記述することで、解除できます。

初めの頃は、この解除命令を忘れがちなんです。。

“絶対に忘れてはいけない『フロート解除』”

最後は体で覚えるべし

誰でも、最初は初心者です!

出来ないことは恥ずかしいことなんかじゃありません。

何度も繰り返し練習して、出来るようになればいいだけです!(私は自分にそう言い聞かせています…)

上手くいかないときのポイントですが、複数の課題に取り組むのではなく、同じ課題に何度も繰り返しトライしてください。

そうすることが、効率良いスキルアップに繋がると私は教わりました!

出来るようになる為の近道!それは先輩のアドバイスをしっかり聞き、出来る限り練習することです。

出来る人も昔は出来なかったわけですから、出来るようになるまでの間にたくさんのノウハウを蓄積しています!

そんな貴重なノウハウを活かさない手はありませんよね。

今日、私が教わった貴重なノウハウを、つたない文章力の私のブログを読んで下さった皆さまとも共有したいと思います!

是非、参考にしてみてください。

デキテルは車業界専門のホームページ作成ツールです。

デキテルバナー 「デキテル」では画像の変更も簡単に行っていただけます。
デジカメでも携帯でも撮影した画像をクリック操作で利用できます。
デキテルHPへ

このページの上部へ戻る