サイタWeb・デザインスクールHTML/CSS入門講座 東京 HTML・CSS・Wordpress講座 レッスンノート 課題サイトのスタイリング

課題サイトのスタイリング

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

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

本日は予てからの課題制作の続きを行いました。

前回完成したHTMLに対するスタイルシートの作成を開始しました。
・スタイルシートとHTMLの関連付けの仕方
・リセットスタイルの役割とブラウザのスタイルシート(ユーザーエージェントスタイル)
・スタイルシートの文字コード指定
・基本的なスタイルの書き方(ルールセットの作り方)
・共通スタイルの指定
・継承されるスタイルの特徴
・余白の設定

今回利用したリセットスタイル「メイヤーリセット」は一度ブラウザが持つスタイルの特徴をほとんど取り払ってしまう効果があります。
イメージ的には今着ている服をアレンジして装飾していくのではなく、一度裸の状態にして、新たに服を着せていくようなことに近いかと思います。

もう1つ、Normalize CSSというのも紹介しました。こちらはメイヤーリセットほどは極度なリセットは行わず、本来タグが持つ特徴はある程度残します。
このレッスンノートを書いたコーチ

業界経験20年!現役ウェブデザイナーが1から10まで丁寧に解説します

新着レッスンノート

体験レッスンの受講誠にありがとうございます。 ノートの記入大変遅くなり申し訳ございませんでした。 現在のスキルとレッスンの進め方のヒアリング、Webサイト制作の基本、HTML,CSS,JavaScriptの概要についてお話させていただきました。 Pythonを独学されているという...

前回から間が空いてしまったので、状況確認と課題サイト制作の続きを行いまいした。 ヘッダー部分のレイアウトを細かく実装していきました。 今回のポイントは要素の細かい特徴(インライン要素、ブロックレベル要素)を捉えていくことでした。 ・インライン要素=改行されない、text-alignで並び...

今回はヘッダーのレイアウト中心のレッスンとなりました。 またコンテナ(最大幅の設定コンテンツが入る領域)の考え方について解説させていただきました。 レイアウトではフレキシブルボックスを多用していくことになりますが、その際は親と子でどのような影響を受けているのかを具に見ていくことが重...

今回のレッスンもご自身で進められたコーディングの進捗確認と添削を中心に行いました。 【コンテナの考え方】 最大幅が必要な箇所は .containerなどのクラスを予め作り、max-widthなどで幅を決めておき、対応します。 <div class="container">...</d...

前回はレッスンお疲れさまでした。 新しい課題サイトに関する質問に答える形のレッスンでした。 【プロジェクト設定】 VS Codeにて新規プロジェクトを立ち上げる方法を再度解説させていただきました。 1. ファイル -> 新しいウィンドウ 2. プロジェクトフォルダを開く(ドラ...

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

HTML/CSS情報

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

twitter

HTML/CSSの先生

@DTPCyta