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

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

リキッドレイアウト

リキッドレイアウト どんぐりスウィーツ 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…

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

定義 授業内5時間で画像制作からコーディングまで 全体は、#conatiner幅「980px」 ヘッダー情報とフッター情報の見栄えは、ブラウザ幅全体を利用する 横幅「140px」ピクセルのナビゲーションボタンを7個作成 高さは「50px」 「トップページ TOPPAGE」「ソリ…

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

2カラム - モンサンミシェル Mont-Saint-Michel | Voyage en FRANCE フランスの旅 フランス国旗 モンサンミシェル フランスで最も人気のある観光地の一つで、「フランスの驚異」と呼ばれる絶景です。堤防からラヴァンセ門をくぐると、おみやげ店やレストラ…

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>

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内はコンテンツによってマークアップ…

2カラムレイアウト基本

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

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

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

ページ構築の手順

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