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

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

HTML5

フォーム関連機能(2)

フォーム関連機能まとめ required属性 入力必須を指定します placeholder属性 入力欄に初期値として表示されます autofocus属性 自動フォーカスを指定する IE6・7対応する場合は「autofocus="autofocus"」と記述します autocomplete属性 入力候補を提示して…

フォーム関連機能(1)

フォーム関連の新機能 input要素の新しいtype属性 email メールアドレス search 検索テキスト url URL tel 電話番号 number 数値 date 日付 datetime UTC datetime-local ローカル日時 month 月 week 週 time 時間 range 範囲 color 色 フォーム関連の新しい…

フォームの新属性

HTML5フォームの新属性 HTML5で追加されたフォーム関連の機能 フォームコントロール これまでのHTMLにあったテキストボックスやラジオボタンなどの入力フォーム要素に、電話番号やメールアドレスなどに特化した属性が追加されました その他、数値や日付など…

HTML5マークアップ - 実習

HTML5新要素を使用した場合 <html lang="ja"> <head> <meta charset="UTF-8"> <title>うちのにゃんこ</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <header> <h1><span>★</span>うちのにゃんこ<span>★</span></h1> <p class="lead">我が家のアイドル、にゃんこ達を紹介します!</p> <nav> <ul> <li></li></ul></nav></header></div></body></html>

aside要素

補足的なコンテンツに使う メインコンテンツに比べて重要度が低い補足的なコンテンツを扱う 一般的にサイドバーに配置されるコンテンツを入れますが、ページのサイドにレイアウトしなければいけないわけではありません 《aside要素を使ったマークアップ》 <section> <h1></h1></section>…

article要素

ブログなどの記事に使う 独立した記事として成立する内容に使う 自己完結した内容を示す 具体的には独立して配布や再利用できるものにマークアップします 雑誌や新聞の記事、ブログのエントリー、インタラクティブなウィジェットやガジェット、ユーザーが送…

section要素

section要素でアウトラインを表す コンテンツやテーマによってグループ分けをしたセクション区切り section要素は、要素の内容が明示的に文書のアウトラインに載る場合にのみ使用することが適切です 通常見出しを持っています section要素は、一般的なコンテ…

グローバル属性

HTML5で使う属性 《HTML5のグローバル属性一覧》 id属性 ID名を定義 class属性 クラス名を定義 style属性 直接CSSを適用 title属性 タイトルなどの補足情報を定義 accesskey属性 ショートカットキーを割り当て tabindex属性 タブキーでフォーカスするかとそ…

コンテンツモデル

カテゴリー 7つのカテゴリーの関係は以下の図のようになります フローコンテンツの中には、一部のめたデータコンテンツ以外のほとんどの要素が含まれています カテゴリーは大きく分けて、heading-content、sectioning-content、それ以外のまとまりの3つ 要…

追加された要素と属性・廃止される要素と属性

新しい要素・属性 要素(element)・属性(attribute) 文書構造を明確にするための要素 section要素 header要素 nav要素 など テキストの意味を明確にするための要素・属性 time要素 mark要素 など 動画と音楽のための要素・属性 video要素 audio要素 など …

HTML5の基本的な文法

HTML5の基本的な文法 HTML5の文法は、基本的にHTML4.01と同じです DTD(Document Type Definition):文書型定義 DTDはスキーマ言語の一種です HTML5ではDTDの指定が不要 今後はHTMLのバージョンがなくなり1つになるため 2013年10月時点では、以下のいずれか…

HTML5の特徴と代表的な機能

HTML5の特徴と代表的な機能 HTML4.01で定義されているHTMLの仕様を継承 誰でも簡単に情報が配信できる仕組み ブラウザのみで色々な処理が行えるWebシステムを開発できる仕組み マークアップに関する機能 構造化要素 HTML5では、これまでのHTML以上に文書構造…

HTML5とは

HTML5 テキストP.159〜169 HTML5 は、WHATWG および W3C が HTML4 に代わる次世代の HTML として策定を進めている HTML 仕様 広義のHTML5 いままでより高度な機能をもつWebページ 特定のOSやブラウザに依存しない CSS3やECMAScript5を含む 狭義のHTML5 HTML4…

フォーム関連機能(2)

フォーム関連機能まとめ required属性 入力必須を指定します placeholder属性 入力欄に初期値として表示されます autofocus属性 自動フォーカスを指定する IE6・7対応する場合は「autofocus="autofocus"」と記述します autocomplete属性 入力候補を提示して…

フォーム関連機能(1)

フォーム関連の新機能 input要素の新しいtype属性 email メールアドレス search 検索テキスト url URL tel 電話番号 number 数値 date 日付 datetime UTC datetime-local ローカル日時 month 月 week 週 time 時間 range 範囲 color 色 フォーム関連の新しい…

フォームの新属性

HTML5フォームの新属性 HTML5で追加されたフォーム関連の機能 フォームコントロール これまでのHTMLにあったテキストボックスやラジオボタンなどの入力フォーム要素に、電話番号やメールアドレスなどに特化した属性が追加されました その他、数値や日付など…

header要素とfooter要素

主要なナビゲーションに使う ヘッダー・フッターに使用する section要素やarticle要素に入れることもできる アウトラインに影響を与えない 《header要素とfooter要素を使ったマークアップ》 <header> <section> <h1>セクションの見出し</h1> <p>テーマのキーワードを含むリード文</p> </section> <nav> <ul> <li><a href="#">メニ</a></li></ul></nav></header>…

nav要素

主要なナビゲーションに使う 主要なナビゲーションやサイドバーのグローバルメニューのみを扱う セクショニングコンテンツなので、アウトラインを明確に表示するためには見出しを入れることもあります テキスト中にある細かなリンクはnav要素である必要はな…

aside要素

補足的なコンテンツに使う メインコンテンツに比べて重要度が低い補足的なコンテンツを扱う 一般的にサイドバーに配置されるコンテンツを入れますが、ページのサイドにレイアウトしなければいけないわけではありません 《aside要素を使ったマークアップ》 <section> <h1></h1></section>…

article要素

ブログなどの記事に使う 独立した記事として成立する内容に使う 自己完結した内容を示す 具体的には独立して配布や再利用できるものにマークアップします 雑誌や新聞の記事、ブログのエントリー、インタラクティブなウィジェットやガジェット、ユーザーが送…

section要素

section要素でアウトラインを表す コンテンツやテーマによってグループ分けをしたセクション区切り section要素は、要素の内容が明示的に文書のアウトラインに載る場合にのみ使用することが適切です 通常見出しを持っています section要素は、一般的なコンテ…

グローバル属性

HTML5で使う属性 《HTML5のグローバル属性一覧》 id属性 ID名を定義 class属性 クラス名を定義 style属性 直接CSSを適用 title属性 タイトルなどの補足情報を定義 accesskey属性 ショートカットキーを割り当て tabindex属性 タブキーでフォーカスするかとそ…

コンテンツモデル

カテゴリー 7つのカテゴリーの関係は以下の図のようになります フローコンテンツの中には、一部のめたデータコンテンツ以外のほとんどの要素が含まれています カテゴリーは大きく分けて、heading-content、sectioning-content、それ以外のまとまりの3つ 要…

追加された要素と属性・廃止される要素と属性

新しい要素・属性 要素(element)・属性(attribute) 文書構造を明確にするための要素 section要素 header要素 nav要素 など テキストの意味を明確にするための要素・属性 time要素 mark要素 など 動画と音楽のための要素・属性 video要素 audio要素 など …

HTML5の基本的な文法

HTML5の基本的な文法 HTML5の文法は、基本的にHTML4.01と同じです DTD(Document Type Definition):文書型定義 DTDはスキーマ言語の一種です HTML5ではDTDの指定が不要 今後はHTMLのバージョンがなくなり1つになるため 2013年10月時点では、以下のいずれか…

HTML5の特徴と代表的な機能

HTML5の特徴と代表的な機能 HTML4.01で定義されているHTMLの仕様を継承 誰でも簡単に情報が配信できる仕組み ブラウザのみで色々な処理が行えるWebシステムを開発できる仕組み マークアップに関する機能 構造化要素 HTML5では、これまでのHTML以上に文書構造…

HTML5とは

HTML5 HTML5 は、WHATWG および W3C が HTML4 に代わる次世代の HTML として策定を進めている HTML 仕様 広義のHTML5 いままでより高度な機能をもつWebページ 特定のOSやブラウザに依存しない CSS3やECMAScript5を含む 狭義のHTML5 HTML4.0に続く5番目のHTML…

マークアップ - 実習

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

CSSで文字サイズを変更する

外部CSSファイルの読み込み index.htmlと同一階層に「css」フォルダーを作成し、style.cssを作成し保存します <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style.css"> </link></meta></head></html>

アウトライン

文書構造の基本設計 見出し(ページの構造が複雑にならないように、h3〜h4まで使用するに止める) 本文 箇条書き <body> <h1>Cafe Debut</h1> <p>baser CMS カフェサイト用テーマ<br> baser CMS テーマコンテスト2012 飲食店系テーマ賞受賞(受賞結果はこちら)</p> <h2>いますぐ、はじめら</h2></body>…

基本構造

DOCTYPE宣言 必須 ルート要素 html要素 lang属性も含める <html lang="ja"> 基本情報の記述場所 head要素 <head>〜</head> エンコードの種類の指定 meta要素 charset Unicode(UTF-8) <meta charset="UTF-8"> ページのタイトル title要素 検索対象にするキーワードから書き始める <title></title> スタイルシートの設定 style</meta></html>…

フォームの新属性

HTML5フォームの新属性 HTML5で追加されたフォーム関連の機能 フォームコントロール これまでのHTMLにあったテキストボックスやラジオボタンなどの入力フォーム要素に、電話番号やメールアドレスなどに特化した属性が追加されました その他、数値や日付など…

header要素とfooter要素

主要なナビゲーションに使う ヘッダー・フッターに使用する section要素やarticle要素に入れることもできる アウトラインに影響を与えない 《header要素とfooter要素を使ったマークアップ》 <header> <section> <h1>セクションの見出し</h1> <p>テーマのキーワードを含むリード文</p> </section> <nav> <ul> <li><a href="#">メニ</a></li></ul></nav></header>…

nav要素

主要なナビゲーションに使う 主要なナビゲーションやサイドバーのグローバルメニューのみを扱う セクショニングコンテンツなので、アウトラインを明確に表示するためには見出しを入れることもあります テキスト中にある細かなリンクはnav要素である必要はな…

aside要素

補足的なコンテンツに使う メインコンテンツに比べて重要度が低い補足的なコンテンツを扱う 一般的にサイドバーに配置されるコンテンツを入れますが、ページのサイドにレイアウトしなければいけないわけではありません 《aside要素を使ったマークアップ》 <section> <h1></h1></section>…

article要素

ブログなどの記事に使う 独立した記事として成立する内容に使う 自己完結した内容を示す 具体的には独立して配布や再利用できるものにマークアップします 雑誌や新聞の記事、ブログのエントリー、インタラクティブなウィジェットやガジェット、ユーザーが送…

グローバル属性

HTML5で使う属性 《HTML5のグローバル属性一覧》 id属性 ID名を定義 class属性 クラス名を定義 style属性 直接CSSを適用 title属性 タイトルなどの補足情報を定義 accesskey属性 ショートカットキーを割り当て tabindex属性 タブキーでフォーカスするかとそ…

コンテンツモデル

カテゴリー 7つのカテゴリーの関係は以下の図のようになります フローコンテンツの中には、一部のめたデータコンテンツ以外のほとんどの要素が含まれています カテゴリーは大きく分けて、heading-content、sectioning-content、それ以外のまとまりの3つ 要…

追加された要素と属性・廃止される要素と属性

新しい要素・属性 要素(element)・属性(attribute) 文書構造を明確にするための要素 section要素 header要素 nav要素 hgroup要素(2014年12月勧告時点で削除されているため使用不可) など テキストの意味を明確にするための要素・属性 time要素 mark要…

HTML5の基本的な文法

HTML5の基本的な文法 HTML5の文法は、基本的にHTML4.01と同じです DTD(Document Type Definition):文書型定義 DTDはスキーマ言語の一種です HTML5ではDTDの指定が不要 今後はHTMLのバージョンがなくなり1つになるため 2014年12月時点では、以下のいずれか…

Webアプリケーション

Webアプリケーションとは 単に情報を表示するだけではなく、ユーザーの操作に応じて結果を返すWebページ 初期のWebアプリケーションの仕組み HTMLのフォームを利用してユーザーが入力したデータをWebサーバーに送り、Webサーバー内のプログラムがデーターを…

HTML5の特徴と代表的な機能

HTML5の特徴と代表的な機能 HTML4.01で定義されているHTMLの仕様を継承 誰でも簡単に情報が配信できる仕組み ブラウザのみで色々な処理が行えるWebシステムを開発できる仕組み マークアップに関する機能 構造化要素 HTML5では、これまでのHTML以上に文書構造…

フォーム関連機能(3)

演習課題(1)解答例 type属性は、InternetExploereが未対応ななため積極的に使う段階ではありません <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML5でお問い合わせフォーム</title> <style> th { text-align: left; } span.red { color: #F00; } span.small { font-size: small; } </style> </head> <body> <header> <h1>お問い合わせフォーム</h1> <…</header></body></html>

フォーム関連機能(2)

フォーム関連機能まとめ required属性 入力必須を指定します placeholder属性 入力欄に初期値として表示されます autofocus属性 自動フォーカスを指定する IE6・7対応する場合は「autofocus="autofocus"」と記述します autocomplete属性 入力候補を提示して…

フォーム関連機能(1)

フォーム関連の新機能 input要素の新しいtype属性 email メールアドレス search 検索テキスト url URL tel 電話番号 number 数値 date 日付 datetime UTC datetime-local ローカル日時 month 月 week 週 time 時間 range 範囲 color 色 フォーム関連の新しい…

フォームの新属性

HTML5フォームの新属性 HTML5で追加されたフォーム関連の機能 フォームコントロール これまでのHTMLにあったテキストボックスやラジオボタンなどの入力フォーム要素に、電話番号やメールアドレスなどに特化した属性が追加されました その他、数値や日付など…

aside要素

補足的なコンテンツに使う メインコンテンツに比べて重要度が低い補足的なコンテンツを扱う 一般的にサイドバーに配置されるコンテンツを入れますが、ページのサイドにレイアウトしなければいけないわけではありません 《aside要素を使ったマークアップ》 <section> <h1></h1></section>…

article要素

ブログなどの記事に使う 独立した記事として成立する内容に使う 自己完結した内容を示す 具体的には独立して配布や再利用できるものにマークアップします 雑誌や新聞の記事、ブログのエントリー、インタラクティブなウィジェットやガジェット、ユーザーが送…

section要素

section要素でアウトラインを表す コンテンツやテーマによってグループ分けをしたセクション区切り section要素は、要素の内容が明示的に文書のアウトラインに載る場合にのみ使用することが適切です 通常見出しを持っています section要素は、一般的なコンテ…

グローバル属性

HTML5で使う属性 《HTML5のグローバル属性一覧》 id属性 ID名を定義 class属性 クラス名を定義 style属性 直接CSSを適用 title属性 タイトルなどの補足情報を定義 accesskey属性 ショートカットキーを割り当て tabindex属性 タブキーでフォーカスするかとそ…