ウェブ学のすすめ

Study of Web Design & Programing

HTML

Chromeなら一行で音声認識を実装できる

Chromeで簡単に音声認識を実装できるようなので試してみました。

セクションやページのフッターを表す「footer要素」|HTML5課題24

課題 著作権表記を表示させなさい。引用元:address要素とfooter要素 - Webデザインの勉強|忘筌 解答 プレビュー ↓スマートフォンの方はこちらからプレビューできます。 セクションやページのフッターを表す「footer要素」 コード <html lang="ja"> <head> <meta charset="UTF-8"> <title>セクションやページの</title></meta></head></html>…

連絡先情報を表す「address要素」|HTML5課題23

課題 連絡先を表示させなさい。引用元:address要素とfooter要素 - Webデザインの勉強|忘筌 解答 プレビュー ↓スマートフォンの方はこちらからプレビューできます。 連絡先情報を表す「address要素」 コード <html lang="ja"> <head> <meta charset="UTF-8"> <title>連絡先情報を表す「address要素」</title> <link rel="stylesheet" href="#"> <script src="#"></script> </link></meta></head></html>

本文から参照される図表を表す「figure要素」|HTML5課題22

課題 写真と写真タイトルをまとめて表示させなさい。 カフェランチブログ 人気スイーツについて 疲れた時に美味しいスイーツを食べると、疲れも吹っ飛びますね。人気のバナナ豆乳シェイクのようなドリンクをはじめ、スイーツの定番である自家製ケーキも各種…

補足的なセクションを表す「aside要素」|HTML5課題21

課題 補足情報も含めて表示させなさい。 カフェランチブログ 7月1週目ランチ ランチ特製ロコモコ丼が人気です。ボリューム満点のハンバーグに特製ソースで味付け!ぜひ食べに来てくださいね。 ハンバーグ、目玉焼き、トマト、サニーレタスがのったロコモコ丼…

見出しをグループ化する「hgroup要素」|HTML5課題20

課題 見出しをまとめて表示させなさい。引用元:hgroup要素とaside要素 - Webデザインの勉強|忘筌 解答 プレビュー ↓スマートフォンの方はこちらからプレビューできます。 見出しをグループ化する「hgroup要素」 コード <html lang="ja"> <head> <meta charset="UTF-8"> <title>見出しをグループ化する「hgroup</title></meta></head></html>…

独立したコンテンツを表す「article要素」|HTML5課題19

課題 ブログのエントリー記事を表示させなさい。 カフェランチブログ 7月1週目ランチ ランチ特製ロコモコ丼が人気です。ボリューム満点のハンバーグに特製ソースで味付け!ぜひ食べに来てくださいね。 ハンバーグ、目玉焼き、トマト、サニーレタスがのったロ…

階層構造を作る「section要素」|HTML5課題18

課題 文章を内容でわけて表示させなさい。 クリスマスオーナメント クリスマスツリーに飾られるオーナメントをご紹介します。 ツリートップ クリスマスツリーの先端に飾られるオーナメントで、星型をしていることが多い。地域によっては天使が使用されること…

音声を再生できる「audio要素」|HTML5課題17

課題 音声を再生させなさい。引用元:テキストの論理構造(3) - Webデザインの勉強|忘筌 解答 プレビュー ↓スマートフォンの方はこちらからプレビューできます。 音声を再生できる「audio要素」 コード <html lang="ja"> <head> <meta charset="UTF-8"> <title>音声を再生できる「audio要素」</title> <link rel="stylesheet" href="#"> <script src="#"></script> </link></meta></head></html>

動画を再生できる「video要素」|HTML5課題16

課題 動画を表示させなさい。引用元:テキストの論理構造(3) - Webデザインの勉強|忘筌 解答 プレビュー ↓スマートフォンの方はこちらからプレビューできます。 動画を再生できる「video要素」 コード <html lang="ja"> <head> <meta charset="UTF-8"> <title>動画を再生できる「video要素」</title> <link rel="stylesheet" href="#"> <script src="#"></script> </link></meta></head></html>

外部リソースを埋め込む「object要素」|HTML5課題15

課題 地図のPDFを表示させなさい。引用元:テキストの論理構造(3) - Webデザインの勉強|忘筌 解答 プレビュー ↓スマートフォンの方はこちらからプレビューできます。 外部リソースを埋め込む「object要素」 コード <html lang="ja"> <head> <meta charset="UTF-8"> <title>外部リソースを埋め込む「object要</title></meta></head></html>…

注釈を表す「small要素」|HTML5課題14

課題 コピーライトを表示させなさい。引用元:テキストの論理構造(3) - Webデザインの勉強|忘筌 解答 プレビュー ↓スマートフォンの方はこちらからプレビューできます。 注釈を表す「small要素」 コード <html lang="ja"> <head> <meta charset="UTF-8"> <title>注釈を表す「small要素」</title> <link rel="stylesheet" href="#"> <script src="#"></script> </link></meta></head></html>

ハイライトされるテキストを表す「mark要素」|HTML5課題13

課題 本来の文章の意図から離れて強調したい部分を区別して表示させなさい。引用元:テキストの論理構造(3) - Webデザインの勉強|忘筌 解答 プレビュー ↓スマートフォンの方はこちらからプレビューできます。 ハイライトされるテキストを表す「mark要素」…

他とは区別される語句を表す「i要素」|HTML5課題12

課題 話している部分を区別して表示させなさい。引用元:テキストの論理構造(3) - Webデザインの勉強|忘筌 解答 プレビュー ↓スマートフォンの方はこちらからプレビューできます。 他とは区別される語句を表す「i要素」 コード <html lang="ja"> <head> <meta charset="UTF-8"> <title>他とは区別される語句</title></meta></head></html>…

日付や時刻を表す「time要素」|HTML5課題11

課題 日付を表示させなさい。引用元:テキストの論理構造(3) - Webデザインの勉強|忘筌 解答 プレビュー ↓スマートフォンの方はこちらからプレビューできます。 日付や時刻を表す「time要素」 コード <html lang="ja"> <head> <meta charset="UTF-8"> <title>日付や時刻を表す「time要素」</title> <link rel="stylesheet" href="#"> <script src="#"></script> </link></meta></head></html>

引用を表す「cite要素」「q要素」「blockquote要素」|HTML5課題10

課題 引用を表示させなさい。引用元:テキストの論理構造(2) - Webデザインの勉強|忘筌 解答 プレビュー ↓スマートフォンの方はこちらからプレビューできます。 引用を表す「cite要素」「q要素」「blockquote要素」 コード <html lang="ja"> <head> <meta charset="UTF-8"> <title>引用を表す「cite要素」「q</title></meta></head></html>…

上付き文字を表示する「sup要素」|HTML5課題09

課題 面積の単位を表示させなさい。引用元:テキストの論理構造(2) - Webデザインの勉強|忘筌 解答 プレビュー ↓スマートフォンの方はこちらからプレビューできます。 上付き文字を表示する「sup要素」 コード <html lang="ja"> <head> <meta charset="UTF-8"> <title>上付き文字を表示する「sup要素」</title> <link rel="stylesheet" href="#"> <script src="#"></script> </link></meta></head></html>

下付き文字を表示する「sub要素」|HTML5課題08

課題 二酸化炭素の化学式を表示させなさい。引用元:テキストの論理構造(2) - Webデザインの勉強|忘筌 解答 プレビュー ↓スマートフォンの方はこちらからプレビューできます。 下付き文字を表示する「sub要素」 コード <html lang="ja"> <head> <meta charset="UTF-8"> <title>下付き文字を表示する「sub要素</title></meta></head></html>…

ルビを振る「ruby要素」|HTML5課題07

課題 ルビをふって表示させなさい。引用元:テキストの論理構造(2) - Webデザインの勉強|忘筌 解答 プレビュー ↓スマートフォンの方はこちらからプレビューできます。 ルビを振る「ruby要素」 コード <html lang="ja"> <head> <meta charset="UTF-8"> <title>ルビを振る「ruby要素」</title> <link rel="stylesheet" href="#"> <script src="#"></script> </link></meta></head></html>

略語を表す「abbr要素」|HTML5課題06

課題 USAを略語として表示させなさい。引用元:テキストの論理構造(2) - Webデザインの勉強|忘筌 解答 プレビュー ↓スマートフォンの方はこちらからプレビューできます。 略語を表す「abbr要素」 コード <html lang="ja"> <head> <meta charset="UTF-8"> <title>略語を表す「abbr要素」</title> <link rel="stylesheet" href="#"> <script src="#"></script> </link></meta></head></html>

定義語を表す「dfn要素」|HTML5課題05

課題 TPOを定義語として表示させなさい。引用元:テキストの論理構造(2) - Webデザインの勉強|忘筌 解答 プレビュー ↓スマートフォンの方はこちらからプレビューできます。 定義語を表す「dfn要素」 コード <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="#"> <script src="#"></script> </link></meta></head></html>

前後の他のテキストと区別する「b 要素」|HTML5課題04

課題 「ロールケーキ」の部分を、他との違いを表して記述しなさい。最近コンビにで売っているケーキ類が美味しい。特にロールケーキが美味しい。引用元:テキストの論理構造(1) - Webデザインの勉強|忘筌 解答 プレビュー ↓スマートフォンの方はこちらか…

より強調したい内容を示す「strong要素」|HTML5課題03

課題 【HTML5課題03】「注意事項」の部分を、相対的に重要性な高いレベルとして記述しなさい。引用元:基本構造とテキストの論理構造 - Webデザインの勉強|忘筌 解答 プレビュー ↓スマートフォンの方はこちらからプレビューできます。 より強調したい内容を…

強調したい内容を示す「em要素」|HTML5課題02

課題 【HTML5課題02】「ソファーがあって」の部分を強調して記述しなさい。引用元:基本構造とテキストの論理構造 - Webデザインの勉強|忘筌 解答 プレビュー ↓スマートフォンの方はこちらからプレビューできます。 強調したい内容を示す「em要素」 コード <html lang="ja"></html>…

HTML5の基本構造|HTML5課題01

課題 【HTML5課題01】 ドキュメントタイプ宣言を記述し、エンコードタイプを「UTF-8」で記述しなさい。引用元:基本構造とテキストの論理構造 - Webデザインの勉強|忘筌 解答 プレビュー コード <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML5の基本構造</title> <link rel="stylesheet" href="#"> <script src="#"></script> </link></meta></head></html>

tableを使ったform

ポイント border-collapse: collapse; 隣接するセルのボーダーを重ねて表示する コード tableを使ったform - jsdo.it - share JavaScript, HTML5 and CSS <html lang="ja"> <head> <meta charset="UTF-8"> <title>tableを使ったform</title> <style type="text/css"> #myform { font-size: 0.875px; width: 500px; } #myform label { font-siz…</meta></head></html>

CSSによるform基本形(2)|float

ポイント label要素に対してfloat:leftを指定する コード CSSによるform基本形(2)|float - jsdo.it - share JavaScript, HTML5 and CSS <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSによるform基本形(2)|float</title> <style type="text/css"> #myform label { font-size: 0.875px; display: block; float: left; width: …</meta></head></html>

CSSによるform基本形(1)

ポイント display: block; を指定する コード CSSによるform基本形(1) - jsdo.it - share JavaScript, HTML5 and CSS <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSによるform基本形(1)</title> <style type="text/css"> #myform label { font-size: 0.875px; margin: 0 0 3px 0; display: block; } </style> </head>…</html>

formの基本まとめ

form要素はお問い合わせなど入力フォームを作成するときに使用します。 実際にデータの送受信をするためにはCGI等が必要です。 主な属性 属性名内容action送信先プログラムのURIを指定methodサーバーにデータを送る形式をgetまたはpostで指定enctypeエンコー…

【HTML04】文書構造の練習

課題 以下の内容をHTML文章にしてブログに載せなさい DTDは「XHTML 1.0 Strict」 DTDがわからない場合は、テキスト「上級レイアウト」を読むこと 【HTML04】文書構造の練習Layout WorkflowNavigationA1 NavigationA2 NavigationA3 NavigationA4 NavigationA5…

【HTML03】文書構造の練習

課題 以下の内容をHTML文章にしてブログに載せなさい サンプルなど見ないで入力すること(できるようになるまで繰り返す) DTDとmetaは不要 【HTML03】文書構造の練習インテリアショップ a Interiorインフォメーション インテリアショップ「a Interior」での…

【HTML02】 文書構造の練習

課題 以下の内容をHTML文章にしてブログに載せなさい サンプルなど見ないで入力すること(できるようになるまで繰り返す) DTDとmetaは不要 デザインの話物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形が…

【HTML01】文書構造の練習

課題 以下の内容をHTML文章にしてブログに載せなさい サンプルなど見ないで入力すること(できるようになるまで繰り返す) DTDとmetaは不要 【HTML01】文書構造の練習 結論:大見出し 要約 結論:検証 解説 検証の項目 検証の項目 検証の項目 解説 順序のあ…

テーブルタグ「table」とは

tableタグは、trやtdなどと一緒に用いて表を表示させるために使います。 読み方・正式名称 table(テーブル):table tr(ティーアール):table row td(ティーディー):table head th(ティーエイチ):table description 記述例 <table summary="iPhoneの種類"> <tr> <th>機種</th><th>発売開始日</th> </tr> <tr> <th>iPhone 4S</th><td></td></tr></table>…

定義型リスト「dl」「dt」「dd」とは

読み方と正式名称 dl(ディーエル):definition list dt(ディーティー):definition term dd(ディーディー):definition description 記述例 用語の定義 <dl> <dt>用語</dt> <dd>定義</dd> </dl> 更新情報 <dl> <dt>更新日付</dt> <dd>更新内容</dd> </dl> 表示例 URL Uniform Resource Locatorの略。 インター…

グループ化要素「div」と「span」とは

目的の範囲をグループ化することによってその部分に対してスタイルシートを適用させたりするのにdiv要素やspan要素を利用します。 div要素 div要素(division)は、段落のようなブロックレベル要素をグループ化する場合に用います。 <div> <p>サンプル</p> </div> span要素 spa…

address要素とは

意味 address要素は、文書制作者の氏名やメールアドレスといった連絡先(問い合わせ先)を示すのに使用します。 他にも文書の公開日や更新日、著作権の表示などにも使われます。 記述例 <address>お問い合わせ先:<br> ホームページ:<a href="http://d.hatena.ne.jp/vinton/" >http://d.hatena.ne.jp/vinton/</a><br> Eメール</address>…

リストを作る「ul」と「ol」の使い分け

リストの各項目を示すにはLi要素を用います。※LIはList Itemの略です。 ul要素 Unordered Listの略で、項目の順番が意味を持たず、並列的に列挙するときに使用します。 記述例 <ul> <li>牛肉</li> <li>にんじん</li> <li>ジャガイモ</li> <li>たまねぎ</li> <li>カレーのルー</li> </ul> 表示例 牛肉 にんじん ジャ…

「font size」の相対指定が【7】までと「見出し(hタグ)」が【6】までの違い

「font size」とは fontタグのsize属性は、文字の大きさを指定します。 1〜7までの数値、またはデフォルトの文字サイズ(size="3")に対して「+」「−」で指定することができます。fontタグは、HTML 4.01では非推奨とされています。フォントに関する指定には…

body要素とは

body要素には、実際にブラウザに表示される内容を記述します。 形式 <body> 本文 </body> 主な属性 属性内容background背景画像のURIbgcolor背景色text文字の色link未訪問リンクの文字色vlink訪問済リンクの文字色alink選択中のリンクの文字色 ※色などの指定にはスタイル…

title要素の決め方

title要素は、文書のタイトルを示します。指定したタイトルは ブラウザのタイトルバー 「お気に入り」や「ブックマーク」を登録したときのタイトル 検索結果に表示されるタイトル などに利用されます。 形式 head要素内に配置します。 <head> <title>〜</title> </head> ↓タイトルに日本…

link要素とその属性

link要素は、そのページと関連する別のページと、その関係を示します。 使用例 <head> <link rel="stylesheet" type="text/css" href="css/base.css" media="screen, print"> </head> 属性 charset="文字コード" 関連文書の文字コードを指定します。 Shift_JIS、EUC-JP、UTF-8など。 href="URI" 関連文書のURIを指定します。 hreflang="言語コード" 関連文書…

meta要素の「keywords」と「description」に記述するもの

keywords <meta name="keywords" content="キーワード1,キーワード2,・・・"> 複数のキーワードはカンマ「,」で区切って記述します。 ページタイトルに含まれているキーワードを記述する ページ内に存在するキーワードを記述する リンクを受けているキーワードを記述する 本文中の強調系タグに適用されているキーワードを記述</meta>…

HTML・XHTML・HTML5におけるMETAタグの書き分け

METAタグについてはこちらを参考に↓ HTML文書の情報を指定する「meta」タグとは - ウェブ学のすすめ HTML 4.01の場合 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> XHTMLの場合 XHTMLの場合、空要素は最後にスラッシュを付加するか、終了…</meta></meta></meta>

空タグとは

読み方 からタグ 英語 Empty-element Tag 別名 空要素、空要素タグ、空エレメントタグ 意味 XML文書中で、内容を持たないタグのこと 例 <hr /> 半角スペースに続けて「/(スラッシュ)」を入れます。 参考サイト 空タグ XML用語事典 [空要素タグ] HTMLタグ/HTMLの</hr>…

DTD別「DOCTYPE宣言」の記述方法

「DOCTYPE宣言」とは HTMLなどの文書において、バージョン及びDTDを文頭に宣言すること 構成要素 !DOCTYPE HTML:文書タイプが「HTML」であることを示す PUBLIC:公開されたものであることを示す "-//W3C//DTD HTML 4.01//EN":公開文書の所有者、種別、記述…

「DTD」とは

読み方 ディーティーディー 英語 Document Type Definition 別名 文書型定義 意味 マークアップ言語 SGMLおよびXMLにおいて、文書構造(文書型)を定義するためのスキーマ言語の一つ引用元:Document Type Definition - Wikipedia 参考サイト DTDとは【Docum…

リンク先のアドレスを指定する「href」とは

「href」とは何の略 Hypertext Referenceの略です。 HTMLなどにおいて、「a」タグや「link」タグとともに用いられ、関連付けられるリソースの所在を示す属性。引用元:hrefとは - はてなキーワード 形式 body要素内で <a href="...">〜</a> head要素内で <head> <link rel="..." href="..." type="..." /> </head> 記述例 外部スタイ…

リンクを指定する「a」タグとは

「a」とは何の略 Anchor(アンカー)の略です。 いかり(をおろす)、頼みの綱、最終走者、固定する、支える、などの意味を持つ英単語。引用元:アンカーとは【anchor】 - 意味/解説/説明/定義 : IT用語辞典 形式 <a href="...">〜</a> <a name="...">〜</a> 終了タグが必要です。 主な属性 属性意…

HTML文書の情報を指定する「meta」タグとは

「meta」とは何の略 Metainformation(メタ情報)の略です。metaは、 「超〜」「高次〜」「〜の間の」「〜の後ろの」「〜を含む」などの意味を持つ英語の接頭辞引用元:メタとは【meta】 - 意味/解説/説明/定義 : IT用語辞典 です。 形式 head要素内に配置…