HTML

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

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

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

positionを使ったレイアウト 以下のサイトを作成しなさい ナビゲーションボタン「幅:160px、高さ:50px、色帯:4px」 bg.jpg(幅800px、高さ250px) logo.png(透過PNG 幅200px) CSSシグネチャー(signature) bodyなどにidやclassを設定し、 CSSでページ…

2カラムレイアウト基本演習

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

思い通りに表示できない

トラブルシューティング 画像が表示されない スタイルシートが反映されない margin、padding が思い通りにならない 綴りミス 初心者のミスのほとんどが、この「綴りミス」です 「綴りミス」を発見するには Markup Validation Service(HTML文法チェック) CS…

Adobe Brackets の使い方

Adobe Brakets brackets.io インストール後の画面(文字サイズは、Ctrl+「+」で大きく変更可能) プロジェクトのルート化 「Getting Started」をクリック 管理したいフォルダーを選択(例:「myName」自分の名前をつけたフォルダー) クイックエディット ク…

ページ構築の手順

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

マークアップ - 実習

実習 テキストP.020〜033 以下のテキストを利用し、正しいツリー構造になるようマークアップの練習を行います 最初からテキストを真似るのではなく、自分なりの考え方マークアップをし、検証(バリデート)しながら修正をしていきます ★うちのにゃんこ★ 我が…

マークアップ例

マークアップ例 <html lang="ja"> <head> <meta charset="UTF-8"> <title>うちのにゃんこ</title> </head> <body> <h1>★うちのにゃんこ★</h1> <p>我が家のアイドル、にゃんこ達を紹介します!</p> <ul> <li>我が家のにゃんこ紹介</li> <li>飼い主紹介</li> <li>猫写真募集</li> </ul> <h2>我が家のにゃんこ紹介</h2> <h3>●すばる(白キジトラ・オス)</h3> <p>目と耳が大きくてすばらしくイケメン。鳴き声もなか</p></body></html>…

要素の入れ子(ネスト)と子孫関係

要素の入れ子(ネスト)と子孫関係 テキストP.035 HTML文書全体が、html要素を最上位(ルート)の先祖要素とする入れ子によるツリー構造になっています このとき注意が必要なのは「div要素」は、レイアウト指定のためのグループに利用するだけでツリー構造に…

リスト、表、画像挿入、リンク

リスト 箇条書き <ul> <ol> <dl> 1行で簡潔に伝える文章 Webの仕組みでは、リンクとして詳細の内容に遷移するために利用することが多い ul(unordered list) 順序が置き換わっても意味が伝わる並列な内容に使う。 行頭マークは「黒丸」が初期値 <ul> <li>私が好きな真っ赤なり</li></ul></dl></ol></ul>…

HTMLの基本構造のマークアップ

HTML基本構造のマークアップ 全てのHTMLドキュメントに必須 HTML5のDOCTYPE宣言 lang属性:ページの主要言語を指定する HTML5の文字コードセットは原則「UTF-8」 ページタイトル:30字から40字で重要な後から始める <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTMLの基本構造</title> </head> <body> </body> </html> CSSファイルの読…

HTMLの入力

入力練習の準備 管理フォルダーを作成(このとき、日本語使用不可) Cドライブ直下に「myName(自分の名前を英字で)」フォルダーを作り管理しなさい その中に「日付フォルダー」を作り、データを管理します(最初の段階では日付、後にプロジェクト名で管理…

求職者支援訓練 フェリカテクニカルアカデミー