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

ハロトレWebデザインの勉強03月14日開講クラス授業補足ブログ

floatで作るカラムコンテンツ

floatで作るカラムコンテンツ http://placehold.it/ 《index.html》 <html lang="ja"> <head> <meta charset="utf-8"> <title>The Café</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <header> <h1>HTML5新要素を使ったページ作成</h1> <p>ダミー画像は、http://placehold.it/ を利用する</p> </header></div></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にあったテキストボックスやラジオボタンなどの入力フォーム要素に、電話番号やメールアドレスなどに特化した属性が追加されました その他、数値や日付など…

フォームの基本構造

フォームとは ブラウザの操作画面で、利用者からの入力を受け付ける要素(の集合)のこと 目的は、利用者からの情報収集のため action action="#"は、CGIまたはPHPが入りますが、現時点では「NULLリンク」にしておきます。 お問い合せフォーム <html lang="ja"> <head> <meta charset="UTF-8"> <title>お問い合わせ</title></meta></head></html>…

header要素とfooter要素

ページ内の必須項目 ヘッダー・フッターに使用する section要素やarticle要素に入れることもできる 《header要素とfooter要素を使ったマークアップ》 <html> <head> <meta charset="UTF-8"> <title>無題ドキュメント</title> </head> <body> <header> <h1>セクションの見出し</h1> <p>テーマのキーワードを含むリード文</p> <nav> <ul> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li></ul></nav></header></body></html>

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つになるため 2016年9月時点では、以下のいずれか…

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…