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

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

ページ構築のワークフロー

素材の準備 ビルボード(キービジュアル) 見出し画像の加工 テーマカラーの変更により色彩を変更する場合は「色相・彩度」を利用します h1 h3 h3 h4 h4 h3の幅を変更する 「カンバスサイズ」で幅を変更します を左の模様を右にコピーして重ねていきます。 …

企業系サイトトップページ構築

定義 色彩計画・キービジュアル画像は適宜 全体は、#conatiner幅「980px」 フッター情報の見栄えは、ブラウザ幅全体を利用する 横幅「140px」ピクセルのナビゲーションボタンを7個作成 高さは「50px」 「トップページ TOPPAGE」「ソリューション SOLUTION」…

CSSレイアウト - 解答例

文書構造の構築 レイアウトのための、id名・class名を付与する 画像挿入 例 テキストの記述とは別の場合 《index.html》 <html lang="ja"> <head> <meta charset="utf-8"> <title>うちのにゃんこ</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div id="header"> <h1><span>★</span>うちのにゃんこ<span>★</span></h1> <p>我が家…</p></div></div></body></html>

CSSレイアウト - 実習

実習(テキスト) 素材 ★うちのにゃんこ★ 我が家のアイドル、にゃんこ達を紹介します! 我が家のにゃんこ紹介 飼い主紹介 猫写真募集 我が家のにゃんこ紹介 ●すばる(白キジトラ・オス) 目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。幼…

情報のグループ化

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

文書をHTMLでマークアップ

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

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

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

floatを使った回り込み

floatを使った回り込み 「回り込み」という言葉は、インラインレベル要素のfloatに適用されます 例えば、p要素内の先頭の文字と同じ扱いの画像に「float」を設定すると、それに続く p要素内の文字が float している画像の後ろに続いて並ぼうとします。それを…

2カラムレイアウト基本

2カラムレイアウト基本 画像は適宜選択する 素材例 Homepage Title サブタイトルサブタイトルサブタイトル コンテンツのタイトル コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述しま…

floatを使ったレイアウト基礎

CSSレイアウト テキストP.092〜095 基本は、floatを使ったレイアウト floatプロパティを使ったレイアウト 通常ならHTMLの順序通り縦に並んでしまうコンテンツを横に並べることが可能になります floatは浮き上がっている状態 floatを使ったレイアウトは、HTML…

画像スペースの仮配置

画像スペースの仮配置 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>

横に並べる

横に並べるレイアウト 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か月授業内容まとめ - 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>