aboutsummaryrefslogtreecommitdiff
path: root/files/ja/learn/html/howto/index.html
blob: a7e7f5447845676d86cb0f4f125f6c8c8b816df9 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
---
title: 一般的な問題解決に HTML を使う
slug: Learn/HTML/Howto
tags:
  - CodingScripting
  - HTML
translation_of: Learn/HTML/Howto
---
<div>{{LearnSidebar}}</div>

<p class="summary">下記のリンクは、日常の解決すべき問題を HTML を使って解決する解決法を指しています。</p>

<div class="column-container">
<div class="column-half">
<h3 id="Basic_structure" name="Basic_structure">基本構造</h3>

<p>HTML の最も基本的な適用は文書の構造化です。HTML に慣れていないならここから始めるべきです。</p>

<ul>
 <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">基本的な HTML 文書を作成する方法</a></li>
 <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Web ページを論理的なセクションに分割する方法</a></li>
 <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#The_basics_headings_and_paragraphs">見出しと段落の適切な構成を設定する方法</a></li>
</ul>

<h3 id="Basic_text-level_semantics" name="Basic_text-level_semantics">基本的なテキストレベルのセマンティクス</h3>

<p>HTML は文書の意味的な情報を提供することに特化しているので、HTML 文書内でメッセージをうまく伝える方法についてあなたが抱えるかもしれない多くの質問に答えます。</p>

<ul>
 <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">HTML を使ってリスト項目を作成する方法</a></li>
 <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">コンテンツを強調する方法</a></li>
 <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">テキストが重要だと示す方法</a></li>
 <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/高度なテキスト成型#Representing_computer_code">HTML でコンピュータコードを表示する方法</a></li>
 <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Annotating_images_with_figures_and_figure_captions">画像やグラフィックに注釈を付ける方法</a></li>
 <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/高度なテキスト成型#Abbreviations">略語をマークして理解しやすくする方法</a></li>
 <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/高度なテキスト成型#Quotations">Web ページに引用を追加する方法</a></li>
 <li><a href="/ja/docs/Learn/HTML/Howto/Define_terms_with_HTML">HTML で用語を定義する方法</a></li>
</ul>
</div>

<div class="column-half">
<h3 id="Hyperlinks" name="Hyperlinks">ハイパーリンク</h3>

<p>HTML のための主な理由は {{Glossary("hyperlink", "ハイパーリンク")}}, を使ってナビゲーションを簡単にすることで、それは色々な方法で使われます:</p>

<ul>
 <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクを作成する方法</a></li>
 <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu">HTML を使って目次を作成する方法</a></li>
</ul>

<h3 id="Images_multimedia" name="Images_multimedia">画像とマルチメディア</h3>

<ul>
 <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage">Web ページに画像を追加する方法</a></li>
 <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Web ページにビデオコンテンツを追加する方法</a></li>
</ul>

<h3 id="Scripting_styling" name="Scripting_styling">スクリプトとスタイリング</h3>

<p>HTML は文書の構造だけを解決します。表現の問題は {{glossary("CSS")}} を使うか、ページをインタラクティブにしたいならスクリプトを使います。</p>

<ul>
 <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">Web ページで CSS を使用する方法</a></li>
 <li><a href="/ja/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">Web ページで JavaScript を使用する方法</a></li>
</ul>

<h3 id="Embedded_content" name="Embedded_content">埋め込みコンテンツ</h3>

<ul>
 <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Web ページに他の Web ページを埋め込む方法</a></li>
 <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_&lt;embed>_and_&lt;object>_elements">Web ページに Flash コンテンツを追加する方法</a></li>
</ul>
</div>
</div>

<h2 id="Uncommon_or_advanced_problems" name="Uncommon_or_advanced_problems">あまりない、または上級の問題</h2>

<p>基本を超えると、HTML はとてもリッチで複雑な問題を解決する高度な機能を提供します。この記事は直面するかもしれないあまりないユースケースに取り組むのに役立ちます。</p>

<div class="column-container">
<div class="column-half">
<h3 id="Forms" name="Forms">フォーム</h3>

<p>フォームは、Web ページから Web サーバにデータを送信するために作成された複雑な HTML 構造です。<a href="/ja/docs/Learn/HTML/Forms">完全な専用ガイド</a>に目を通すことをお勧めします。ここから始めましょう。</p>

<ul>
 <li><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">簡単な Web フォームを作成する方法</a></li>
 <li><a href="/ja/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form">Web フォームを構築化する方法</a></li>
</ul>

<h3 id="Tabular_information" name="Tabular_information">表の情報</h3>

<p>表形式データという情報は、行と列のある表で整理する必要があります。これは最も複雑な HTML 構造の1つで、習得するのは簡単ではありません。</p>

<ul>
 <li><a href="/ja/docs/Learn/HTML/Tables/Basics">データテーブルの作り方</a></li>
 <li><a href="/ja/docs/Learn/HTML/Tables/Advanced">HTML テーブルをアクセシブルにする方法</a></li>
</ul>

<h3 id="Data_representation" name="Data_representation">データ表現</h3>

<ul>
 <li>数値とコード値をHTMLで表現する方法 - <a href="/ja/docs/Learn/HTML/Introduction_to_HTML/高度なテキスト成型#Superscript_and_subscript">上付き文字と下付き文字</a>、および<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/高度なテキスト成型#Representing_computer_code">コンピュータコードの表現</a>を参照してください</li>
 <li><a href="/ja/docs/Learn/HTML/Howto/Use_data_attributes">データ属性の使い方</a></li>
</ul>
</div>

<div class="column-half">
<h3 id="Advanced_text_semantics" name="Advanced_text_semantics">上級テキストセマンティクス</h3>

<ul>
 <li><a href="/ja/docs/Web/HTML/Element/br">HTMLの改行をコントロールする方法</a></li>
 <li>変更をマークする方法 (追加および削除されたテキスト) - {{htmlelement("ins")}}{{htmlelement("del")}} 要素を参照してください</li>
</ul>

<h3 id="Advanced_images_multimedia" name="Advanced_images_multimedia">上級の画像やマルチメディア</h3>

<ul>
 <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像を Web ページに追加する方法</a></li>
 <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Web ページにベクター画像を追加する方法</a></li>
 <li><a href="/ja/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">画像の上にヒットマップを追加する方法</a></li>
</ul>

<h3 id="Internationalization" name="Internationalization">国際化</h3>

<p>HTML は単一言語ではありません。一般的な国際化の問題を処理するためのツールを提供します。</p>

<ul>
 <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Setting_the_primary_language_of_the_document">単一の Web ページに複数の言語を追加する方法</a></li>
 <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/高度なテキスト成型#Marking_up_times_and_dates">HTML で日時を表示する方法</a></li>
</ul>

<h3 id="パフォーマンス">パフォーマンス</h3>

<ul>
 <li><a href="/ja/docs/Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages">高速ロードの HTML ページを作成する方法</a></li>
</ul>
</div>
</div>

<p><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span></p>