サイタWeb・デザインスクールホームページ作成講座 東京 東京Webカレッジ 三谷クラス レッスンノート ホームページの制作

ホームページの制作

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

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

レッスンおつかれさまでした。

今回は、ヘッダー部分を完成させました。

HTMLで文章構造を正しくマークアップしたら、CSSでレイアウトとデザインを作り上げていきます。

マークアップは必ずバリデートしてくださいね。
マークアップは正しい文法で記述されていることが、とてもとても大事です。

w3cのバリデートサービスがあるので、これを利用してください。
https://validator.w3.org/

すべて英語なので、最初は理解するのに手間がかかりますが、使い込んでいくうちに理解できるようになります。
必ずエラーゼロを目指してください。

HTMLタグやCSSのプロパティについては、以下のリファレンスサイトが便利です。
辞書代わりに活用してください。
http://www.htmq.com/

次の作業として、CSSを外部ファイル化しました。
外部ファイルの読み込みは、<head>部分に記述しました。

CSSの記述方法は、今回レッスンを復習して身に付けておいてください。

以下のプロパティは、今回の大事なポイントです。
デザインを実現するためには、よく使うものです。

floatプロパティ
positionプロパティ

さて、何度もご説明していますが、HTMLタグには「ブロック」で描画されるものと「インライン」で描画されるものがあります。
この違いを、常に意識してください。
ここがしっかりと理解できていないと、CSSでデザインを実現していくときに必ず行き詰ります。

例えば...
ブロックを中央配置にしたいときには、マージンの左右をautoに設定します。
インラインを中央配置するときには、テキスト配置をセンターに設定します。

このように、ブロックとインラインでは似たような表現でも使うプロパティが異なることがよくあります。
このレッスンノートを書いたコーチ

国内最大のポータルサイト運営会社にて実績多数!リラックスして学べます

目的・種類別にホームページ作成・作り方講座を探す

新着レッスンノート

レッスンおつかれさまでした。 今回のレッスンでは、floatを使って、横並びのコンテンツをレイアウトしてみました。 前回までのレッスンで、floatとは本来「回り込み」をさせるためのプロパティであることを説明してきました。 しかしながら、web制作の現場では、floatは主に...

前回のレッスンでclearとclearfixについて、ご説明しましたが、今回はもう少し理解を深めていきました。 clearfixは、floatさせた要素の高さを認識させる目的で、floatさせた要素の親に付与します。 clearは、回り込みを解除させるために、floatさせた要素の兄弟...

レッスンお疲れ様でした。 今回のレッスンでは、float を使った場合の処理として、clear と clearfix の説明をさせていただきました。 clear は兄弟要素。 clearfix は親要素に使います。

レッスンおつかれさまでした。 今回のレッスンでは、floatについてレッスンをしました。 floatを使うと、文字を回り込ませることができます。 ここで、注意することはfloatを使うと、親要素がコンテンツの高さに応じてくれないことです。

レッスンおつかれさまでした。 今回は要素の中で、コンテンツの高さがどのように反映するかを確認しました。 コンテンツの高さに応じて、要素の高さは変化します。 逆に、コンテンツがなければ要素の高さはなくなります。 これを踏まえたうえで、今一度余白の理解を進めていきました。 mar...

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

ホームページ作成情報

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

twitter

ホームページ作成の先生

@HomepageCyta