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

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

HTML+CSS

グリッドレイアウト

HTML5でのカラムレイアウト 素材 素材をチェック コーディングしやすいファイル名に変更する リストを基準にした場合 「li」を基準にするため、class名も「li」に付与する img要素の親要素「li」の両側に「10pxの余白」を設定します <html lang="ja"> <head> <meta charset="UTF-8"> <title>楽しいおかず</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> </meta></meta></head></html>

positionを使ったレイアウト- 実践

positionを使ったレイアウト 以下のサイトを作成しなさい ナビゲーションボタン「幅:160px、高さ:50px、色帯:4px」 bg.jpg(幅800px、高さ250px) logo.png(透過PNG 幅200px) navがheaderと区別されたレイアウト ナビゲーションボタンがテキストの場合 …

マルチカラム - 素敵な商品のショップ

マルチカラム - 素敵な商品のショップ 素敵な商品のショップ HOME TEAPOT TEACUP GLASS PRODUCTS あなたにぴったりの素敵な商品を取りそろえております。 TEAPOT TEACUP GLASS (c)素敵な商品のショップ 素材

企業系サイト:トップページ

2カラムページ設計 bodyの背景画像を設定する場合 headerの背景画像を設定する場合 定義 全体は、.conatiner幅「980px」 ヘッダー情報とフッター情報の見栄えは、ブラウザ幅全体を利用する 横幅「140px」ピクセルのナビゲーションボタンを7個作成 高さは「50…

positionによるレイアウト

positionとは テキストP.130〜136 positionプロパティは、ボックスの配置方法(基準位置)が、相対位置か絶対位置かを指定する positionプロパティで指定するのは、配置方法(基準位置)のみ static 特に配置方法を指定しません。この値のときには、top、bot…

2カラム演習 - モンサンミシェル

2カラム - モンサンミシェル マークアップ例 @charset "utf-8"; /* reset --------------------------------------*/ html,body,h1,h2,h3,p,dl,dt,dd { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-…

Webページを作るワークフロー

プロジェクトを作成 管理するフォルダーを作成(名前は適宜) 新規HTMLドキュメントを作成(index.html) 新規CSSファイルを作成(style.css) 文書構造を記述 index.html <html lang="ja"> <head> <meta charset="utf-8"> <title>ページタイトル</title> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html> コンテンツを記述 body内はコンテンツによってマークアップ…

マークアップ - 実践

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

floatを使った回り込み

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

2カラムレイアウト基本

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

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

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

CSS演習 - 1カラム 石垣島観光ガイド

1カラムレイアウト 素材 石垣島観光ガイド 石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置します。気候は亜熱帯気候で、1年を通じて平均気温は27度もあります。 観光スポット…

リキッドレイアウト

リキッドレイアウト どんぐりスウィーツ Concept Brownie Tart Cookie Access 上質な木の実をつかって、ひとつひとつ丁寧に焼き上げました。 Concept どんぐりスウィーツは、森の恵みがたっぷり入った焼き菓子専門店。森の奥深くでひっそりと営業しています…

ブラウザの中央に表示

positionを使ったレイアウト 例1 ブラウザの天地左右の中央に表示されるよう記述しなさい 薬玉文様(くすだまもんよう) 薬玉とは、薬・香料を玉にして錦の袋に入れ、造花や蓬・菖蒲などを飾り、五色の糸を長く垂らしたもの。古代中国で端午の節句に薬玉を…

positionを使ったレイアウト- 実践

positionを使ったレイアウト 以下のサイトを作成しなさい ボタン「幅:160px、高さ:50px、色帯:5px」 #content「幅:500px、高さ:200px」 #sidebar「幅:280px、高さ:200px」 billboard.jpg(幅800px、高さ300px) logo.png(透過PNG ほぼ200px程度) #n…

CSSレイアウト基礎 - 確認テスト

必須 #container:幅 840px・上の空き無し・左右は自動空き #header:高さ100px #nav:幅160px・高さ50pxのナビゲーションボタンが5個(nav1~nav5)区切り線は適宜 #content:幅500px・高さ300px #footer:下余白50px 背景色は、見本を参考に適宜 擬似クラ…

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レイアウト - 実習

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

1か月授業内容まとめ - 書体指定とリセットCSS

適切なフォントファミリー 日本語の書体指定で表現したい 日本語の場合、フォントメーカーの制約から自由な選択は出来ません font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; もし、Windowsで英数字は「Verdana」、Macで英数字は「Lucida Gr…

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

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

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ページを表示するためのマークアップ言語のひとつ マークアップとは、コンテンツの始めと終わ…

1か月授業内容まとめ - HTMLとCSSを理解する

HTMLの重要性 Webを勉強するときの基本要素 この中で最も重要なものは、「HTML」です HTMLがないとブラウザにWebページを表示できません HTML developer.mozilla.org HTML (HyperText Markup Language) は web ページのもっとも基本的な構成成分であり、Web …

Webページ作成 - 実践

先割レイアウト 画像のダミースペースを入れる PLACEHOLD.IT <img src="http://placehold.it/800x200"> ナビゲーションは CSS Sprites ロゴは、Webフォント Google Fonts fonts.google.com マークアップ例 <html lang="ja"> <head> <meta charset="utf-8"> <title>CaféStyle</title> <link rel="stylesheet" href="style.css"> </head> <body> </body></html>

2カラムレイアウト基本

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

CSS演習 - 1カラム 石垣島観光ガイド

1カラムレイアウト 石垣島観光ガイド 石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置します。気候は亜熱帯気候で、1年を通じて平均気温は27度もあります。亜熱帯気候のため、…

ページ構築の手順

CSSによるページ構築の手順 この「グループ化」をするときに、「id名」「class名」を使い分けて、グループの意味を作っていきます。 文書構造のグループ化 グループ化とは、div要素によるコンテンツのブロック化 「コンテンツのブロック化」であるので、1行…

レイアウトの種類

レイアウト テキストP.108〜115 Webサイトのレイアウトは「カラム数」と「可変か固定」の組み合わせです 情報量や閲覧環境に応じて適切に選択する必要があります サンプルサイト サンプルサイト:Layout Gala 固定レイアウト(Fixed Layouts) コンテンツを…