ウェブ学のすすめ

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…