Web・デザインスクールホームページ作成講座レッスンノート マークアップ(コーディング)するための基礎知識など

マークアップ(コーディング)するための基礎知識など

ホームページ作成講座のレッスンノート

レッスンノートって?レッスンノートって?

体験レッスンお疲れさまでした!

本日はマークアップ(コーディング)するうえで
必ず考えておきたいことや、
コツについてお伝えしました。

また、
最近流行りのレスポンシブWEBデザインについて
まずはデザインで考慮すべきことについて
お伝えいたしました。

実際にマークアップ(コーディング)するために
必要なツールをみてきました。



【マークアップ(コーディング)するにあたって】

まずはマークアップ(コーディング)する際には、
ある程度でいいのですが
四角い枠をどう作るのかを
想像して構築します。

最初はデザインをできるだけ大きめの紙に
印刷していただいて、
・どういう四角を作ればいいのか
・空白はどれぐらいのピクセルがあるのか
を書き込むとよいでしょう。

その構築が終わりましたら、
一旦HTMLをダーッと書き終えてから
CSSを作り始めます。

もしどうしても表現できない場合は、
HTMLの構造をより深くして
CSSを追加してみてください。


最初のうちはどうしても
いっぱい無駄なことを書いてしまうのですが、
あまり気にしないで書いてきましょう。

そして、
少しずつ慣れてきましたら
どんどんスリム化していき、
できるだけHTML/CSSを書かない
方法を目指していけばOKです。


また、
レイアウトも使う要素も
大体のパターンは決まっています。

このパターンを早く習得していくと、
どんどん応用も効くようになり
すぐに組んでいくことができます。

これは頭で覚えるよりも、
実際にたくさん組んでいって
どんどん作り続けていくと
自然と体で覚えるようになります。



【レスポンシブWEBデザインをつくるにあたって】

今流行りのレスポンシブWEBデザインは、
技術的には基本的に
CSSをベースとして使っています。

また、
PCのデザインありきの
パーフェクトピクセルデザインから、
スマホからのUIデザインに
少しずつ変化している最中でもあります。

制作の現場では、
まだまだPCデザインありきの
パーフェクトピクセルデザインが
蔓延っていますので、
・960~1080ピクセルのPCデザイン
・640ピクセルのスマホデザイン
の2つを作られると
今のところは問題ありません。

スマホデザインする際には、
「常に倍であること」
を覚えておいてください。

フォントサイズが14pxであれば、
デザイン上では必ず倍の28pxで
作るようにしてください。



【テキストエディタについて】

お持ちのmacのOSにより、
うまい具合にsublime textが
使うことができなくて、
お手間をおかけいたしました。

代わりにmiというソフトも
見てきましたが、
これにも手こずりましたね。

なんとか
使える状況になったので
一安心しました。


調べてみますと、
そのほかにも
・Brackets
も使えるようです。

Mac OSX 10.6.8 or newer
となっておりました。

こちらも最初から使いやすい
感じに仕上がっておりますので、
参考にしてみてください。


できるだけ使用するソフトは
ZEN Codingと言われる
入力が簡単でたくさん書かなくてもよい
ものを使われると、
書くのが楽しくなっていきます。

そのほかのテキストエディターでも
emmetと呼ばれるプラグインを入れれば、
ZEN Codingができますので
是非探してみてくださいね。
このレッスンノートを書いたコーチ

現場で培ったノウハウでHPクリエイターを育成!初心者や社会人の方も歓迎

ホームページクリエイター育成講座
藤田佳 (ホームページ作成)

梅田/大阪・甲子園口・西宮(JR)・摂津本山・三ノ宮・元町・神戸・垂水・西宮北口・甲...

レッスンノート ページ先頭へ

ホームページ作成情報

サイタのホームページ作成講師がブログを通して、ホームページ作成情報を発信。更新情報のチェックはこちらから!

twitter

ホームページ作成の先生

@HomepageCyta