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

ハロートレーニングWebデザインの勉強 Webデザイン フェリカテクニカルアカデミーWebサイト制作科

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

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

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

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

Dreamweaverの設定

Dreameaverとは マクロメディアによって開発された高機能なWebオーサリングツール 現在は、Adobe製品 何をするためのツールなのか 初心者にとっては、HTMLの入力を助けてくれるツール(ただし、勝手に何かをしてくれるわけではありません) 仕事の種類によっ…

レイアウトの種類

レイアウト テキストP.122〜129 Webサイトのレイアウトは「カラム数」と「可変か固定」の組み合わせです 情報量や閲覧環境に応じて適切に選択する必要があります 固定レイアウト(Fixed Layouts) コンテンツを特定の横幅で固定したレイアウト 横幅は pxベー…

floatを使ったレイアウト

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

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 以下のテキストを利用…

マークアップ - 実践

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

ナビゲーションとfloatレイアウト

ナビゲーションとfloatレイアウト <html lang="ja"> <head> <meta charset="utf-8"> <title>2カラムレイアウト基本</title> <style> html, body, p, ul, li { margin: 0; padding: 0; line-height: 1.0; } ul { list-style: none; } a { text-decoration: none; } body { background-color: #DDD; } #container { width: 760px;</meta></head></html>…

ページ構築の手順

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

CSSでレイアウト - 実践

1カラムレイアウト ボタンは、画像を横に並べること 手順 HTML基本構造の入力 body内にテキストをペーストしマークアップする 基本は、見出しと本文の関係 必然性があれば、div要素でグループ化する head内にstyle要素を記述する 使用したセレクタを列挙し…

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

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