読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強03月14日開講クラス授業補足ブログ

画像スペースの仮配置

画像スペースの仮配置 placehold PLACEHOLD.IT 楕円形で仮配置したい場合 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ロゴマークの仮配置</title> <style> h1>img { border-radius: 50%; } </style> </head> <body> <h1 class="logo"><img src="http://placehold.it/226x66" alt=""></h1> </body> </html>

CSS Spriteでナビゲーション設定

ナビゲーションの役割 ユーザーが目指すページに進めるよう適切に案内すること HTML5では、主要なナビゲーションには nav要素を使用する ナビゲーションの基本形 li要素の横並びは、floatプロパティで配置する インライン要素は、displayプロパティでブロッ…

横に並べる

横に並べるレイアウト floatを使ったレイアウト 優先順位の高いコンテンツ内容から並べる リセットなし コンテンツは、左揃え 2つのコンテンツの間の空きが20pxになるよう幅を指定 wrapperの使い方 ラッピングして浮動状態を安定させる <html lang="ja"> <head> <meta charset="UTF-8"> <title>ラッピングして</title></meta></head></html>…

1か月授業内容まとめ - 初心者のためのCSS記述ルール

CSSとは Cascading Style Sheets HTMLの要素をどのように修飾(表示)するかを指示する つまり、どう表示したいかというイメージに向かって値を記述していきます。 CSSのコーディング規約(Google) 「Google HTML/CSS Style Guide」を適当に和訳してみた Go…

1か月授業内容まとめ - CSSの基本構造

CSSの役割 CSS Cascading Style Sheets Webページの見た目を制御する CSSは、HTMLとセットで使われる(拡張子は、.css) CSSの3つの働き 設定内容 名称 役割 どこに セレクタ スタイルを設定する場所を指定するところ どんなスタイルを プロパティ どのよう…

1か月授業内容まとめ - 文法チェック

文法チェック テキスト、P.058-059 Markup Validation Service validator.w3.org URLでチェック ファイルをアップロード 直接データを入力 文法チェックをする理由 CSSを記述する前には正しい文法で記述されているかのチェックが必要です 文法ミスがあった場…

1か月授業内容まとめ - マークアップのルール

覚えておきたいマークアップのルール テキスト、P.035 要素の入れ子(ネスト)と親子関係 POINT テキスト、P.037 アークアップの肝は、コンテンツの内容を理解して「文書構造」を見つけること HTMLの文書構造の基本は「見出し」「段落」「箇条書き」 要素の…

1か月授業内容まとめ - 情報のグループ化

情報のグループ化 テキスト、P.032 情報のまとまりごとにソースをグループ化し、そこに名前をつけてソースの可読性を高める レイアウトやデザインの再現のために必要な枠を用意する ソースコード例 レイアウトブロックのid名は、汎用型(どのサイトであって…

1か月授業内容まとめ - 文書をHTMLでマークアップ

文書をHTMLでマークアップする テキスト、P.020 すでにあるテキストに意味づけをしていきます テキストに書いてあるように、実際に手を動かしならマークアップの練習をしていきます 文書構造をマークアップする テキスト、-P.020〜033 以下のテキストを利用…

1か月授業内容まとめ - HTMLで文書を作成する

HTMLで文書を作成する HTMLの概要 テキスト、P.014 基本構造の入力をします(詳細は、テキストで確認します) HTMLの役割 HTML(Hyper Text Markup Language) Webページを表示するためのマークアップ言語のひとつ マークアップとは、コンテンツの始めと終わ…

自宅学習のススメ - CODEPREP

CODEPREP codeprep.jp 初心者用の内容なので、この2つは完璧に理解するようにしましょう CSSで色指定 16進数の色指定 RGBでの色指定 少しの工夫で次のステップ

自宅学習のススメ - Progate

Progate prog-8.com 初級編 step 1《index.html》 <html lang="ja"> <head> <meta charset="utf-8"> <title>Progate</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="header"></div> </body></html>