サイタWeb・デザインスクールHTML/CSS入門講座 兵庫 初心者でもできるHTML・CSS入門講座 レッスンノート 課題の要点と、DL要素の使い方

課題の要点と、DL要素の使い方

HTML/CSS入門講座のレッスンノート

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

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

本日はお出しした3回目の課題の要点と、
DL要素を使ったレイアウトの仕方などを
お教えいたしました。

今日お教えしたDL要素の使い方も
ぜひ今後のマークアップの時の
参考にしておいてください。


1つはDTを float させて、
DDは高さを文字でとるように
padding-left で左の余白を取りました。

もう1つは一切 float を使わずに、
左の画像は position を使って、
文字自体は padding-left で余白を取っています。

いずれもその他にも
すべて float を使ったりもできますので、
1つずつ知っていきましょう!



【レッスンその3の課題について】

この課題を通じて、
WEBサイトのトップページを作ることが
可能になります。

要点について紙でお渡ししたように、
3つのことが出来れば
このレッスンはクリアです。


1.デザイン通りに文章定義ができているか。
 また、CSSを定義できているか。

2.グローバルメニュー、ツアーガイドや、
 お知らせ、トピックスの配置。

3.リンクが分かりやすいか。


〈文章定義について〉
どんなに複雑なレイアウトだったり、
階層が多いHTML構造だったりしても、
常に本を参考にマークアップすることを
まずは心がけてください。

本の外側にタイトルがあります。
これが head 要素内の title にあたります。

本の表紙をめくると、
また本のタイトルが書いてあるはずです。
ここから body の中で、 h1 にあたります。

次に目次などのメニュー項目があり、
これがグローバルメニューなどになっています。


そして目次の次は本文になるのですが、
その前に第1章とかの大きな見出しがあります。
これが h2 にあたります。

そして中見出しが h3、
小見出しが h4 …
という感じになっていきます。

Googleなどの検索エンジンでは、
このようにマークアップしたものを
体系的に階層でまとめて、
コンテンツが実際に何が書かれているのかを
判断していきます。


〈リンクについて〉
こちらは若干UI/UXのジャンルになりますが、
ユーザーさんがパッと見て
すぐに「ここはリンクだろうな」
と分かることが必要です。

また、
クリックして飛んだあとのことが想像できる
リンク文章を書くことも必要です。

なぜなら、私たちの想像以上に
ユーザーさんはこちらの誘導を無視して、
あちこち飛んでしまう傾向なのです。

ですので、
しっかりとリンクであることのアピールと、
どこに飛ぶのかを分かるようにしましょう。

特にスマホの場合はしっかりと
クリックは範囲を考えておく必要があるので、
今から意識して作ってくださいね。
このレッスンノートを書いたコーチ

制作会社で自力で得た実践的ノウハウ伝授。WEBデザイナーも夢じゃない!

新着レッスンノート

体験レッスンお疲れさまでした。 本日はWordPressで作るサイトについて システムにおいてできることなどを お話しさせていただきました。 その他にも、 Webコピーライティングについてですとか、 Webの仕事を営業などについてお話いたしました。 最近の本屋を見てみ...

レッスンお疲れさまでした! 本日は前回作成しました レスポンシブウェブデザインのデザインから、 マークアップした分を チェックさせていただきました。 基本的には ほぼほぼ完成してましたね! あとは デザインに照らし合わせて 細かいところを微修正していきましょう。 ...

レッスンお疲れさまでした! 本日は、 前回にお出ししたデザイン課題について、 特にスマートフォンに関しまして 修正を行いました。 また、 デザインから書き出しをおこなって マークアップする準備をしました。 まずはスマートフォンから作りこみ、 出来上がりましたらデス...

レッスンお疲れさまでした! 本日は、 前回にお出しした課題について 改善したいポイントを中心に お教えいたしました。 レスポンシブウェブデザイン化する際に、 下記の2つの方法があります。 ・デスクトップから先に作る ・スマートフォンから先に作る 実は難易度として高...

レッスンお疲れさまでした! 本日は、 ローカルでWordPressを使って作成したWebサイトを 本番サーバに上げる方法や、 お客様とのディレクションについて お話しさせていただきました。 【Webサイトを本番サーバに上げる方法】 基本的に、 データを上げる...

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

HTML/CSS情報

サイタのHTML/CSS講師がブログを通して、HTML/CSS情報を発信。更新情報のチェックはこちらから!

twitter

HTML/CSSの先生

@DTPCyta