<!DOCTYPE html> <meta charset="utf-8"/> <title>文書のタイトル</title> サンプルテキスト
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"/> <title>文書のタイトル</title> </head> <body> head タグや body タグを入れたサンプル </body> </html>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title>文書のタイトル</title> </head> <body> viewport 設定でスマホやタブレットにも対応させる。 </body> </html>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title>文書のタイトル</title> </head> <body> <h1>こんにちは Hello World</h1> <p> サンプル文章。リチャード・トレビシックが1804年に鉄製レール上を 走る蒸気機関車の走行に成功した。しかし、この頃は馬車鉄道用の もろい鋳鉄レールを使用していたため本格的な実用化までには至らな かった。 その後、ナポレオン戦争による軍馬の需要の増加で馬の価格が高騰し、 運搬の代替手段としてレールと蒸気機関車を用いた鉄道の研究が一段と 進んだ。 </p> あいうえおかきくけ10さしすてそたちつて20なにぬねのはひふへ30まみむめもやいゆえ40らりるれろわいうえ50<br/> 記号文字:■□●◎○△▲▽▼<br/> </body> </html>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title>文書のタイトル</title> <style> /* ここに文書のスタイルを入れる */ </style> </head> <body> <h1>こんにちは Hello World</h1> <p> サンプル文章。リチャード・トレビシックが1804年に鉄製レール上を 走る蒸気機関車の走行に成功した。しかし、この頃は馬車鉄道用の もろい鋳鉄レールを使用していたため本格的な実用化までには至らな かった。 その後、ナポレオン戦争による軍馬の需要の増加で馬の価格が高騰し、 運搬の代替手段としてレールと蒸気機関車を用いた鉄道の研究が一段と 進んだ。 </p> あいうえおかきくけ10さしすてそたちつて20なにぬねのはひふへ30まみむめもやいゆえ40らりるれろわいうえ50<br/> 記号文字:■□●◎○△▲▽▼<br/> </body> </html>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title>文書のタイトル</title> <style> body { margin: 2em; /* 上下左右の余白 */ /* border: 1px solid #ccf; 太さ1ピクセル、実線、色が #ccccff の枠線を付ける */ } </style> </head> <body> <h1>こんにちは Hello World</h1> <p> サンプル文章。リチャード・トレビシックが1804年に鉄製レール上を 走る蒸気機関車の走行に成功した。しかし、この頃は馬車鉄道用の もろい鋳鉄レールを使用していたため本格的な実用化までには至らな かった。 その後、ナポレオン戦争による軍馬の需要の増加で馬の価格が高騰し、 運搬の代替手段としてレールと蒸気機関車を用いた鉄道の研究が一段と 進んだ。 </p> あいうえおかきくけ10さしすてそたちつて20なにぬねのはひふへ30まみむめもやいゆえ40らりるれろわいうえ50<br/> 記号文字:■□●◎○△▲▽▼<br/> </body> </html>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title>文書のタイトル</title> <style> body { margin: 2em; /* 上下左右の余白 */ /* border: 1px solid #ccf; 太さ1ピクセル、実線、色が #ccccff の枠線を付ける */ } p { line-height: 1.8; /* 行の高さをフォントに対して 1.8倍 (行間を80%) */ } </style> </head> <body> <h1>こんにちは Hello World</h1> <p> サンプル文章。リチャード・トレビシックが1804年に鉄製レール上を 走る蒸気機関車の走行に成功した。しかし、この頃は馬車鉄道用の もろい鋳鉄レールを使用していたため本格的な実用化までには至らな かった。 その後、ナポレオン戦争による軍馬の需要の増加で馬の価格が高騰し、 運搬の代替手段としてレールと蒸気機関車を用いた鉄道の研究が一段と 進んだ。 </p> あいうえおかきくけ10さしすてそたちつて20なにぬねのはひふへ30まみむめもやいゆえ40らりるれろわいうえ50<br/> 記号文字:■□●◎○△▲▽▼<br/> </body> </html>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title>文書のタイトル</title> <style> body { margin: 2em; /* 上下左右の余白 */ font-family: Meiryo; /* フォント */ /* border: 1px solid #ccf; 太さ1ピクセル、実線、色が #ccccff の枠線を付ける */ } p { line-height: 1.8; /* 行の高さをフォントに対して 1.8倍 (行間を80%) */ } </style> </head> <body> <h1>こんにちは Hello World</h1> <p> サンプル文章。リチャード・トレビシックが1804年に鉄製レール上を 走る蒸気機関車の走行に成功した。しかし、この頃は馬車鉄道用の もろい鋳鉄レールを使用していたため本格的な実用化までには至らな かった。 その後、ナポレオン戦争による軍馬の需要の増加で馬の価格が高騰し、 運搬の代替手段としてレールと蒸気機関車を用いた鉄道の研究が一段と 進んだ。 </p> あいうえおかきくけ10さしすてそたちつて20なにぬねのはひふへ30まみむめもやいゆえ40らりるれろわいうえ50<br/> 記号文字:■□●◎○△▲▽▼<br/> </body> </html>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title>文書のタイトル</title> <style> body { margin: 2em; /* 上下左右の余白 */ font-family: Meiryo; /* フォント */ } p { line-height: 1.8; /* 行の高さをフォントに対して 1.8倍 (行間を80%) */ } h1 { font-size: 18pt; /* 文字の大きさ */ color: #336; /* 文字の色 */ background: #eef; /* 背景色 */ border-style: solid; /* 枠線の種類 */ border-color: #669; /* 枠線の色 */ border-width: 1px 0px; /* 枠線の太さ:上下、左右の順 */ padding: 0.35em; /* 内側の余白の大きさ */ margin-bottom: 1em; /* 下側の余白の大きさ */ } </style> </head> <body> <h1>こんにちは Hello World</h1> <p> サンプル文章。リチャード・トレビシックが1804年に鉄製レール上を 走る蒸気機関車の走行に成功した。しかし、この頃は馬車鉄道用の もろい鋳鉄レールを使用していたため本格的な実用化までには至らな かった。 その後、ナポレオン戦争による軍馬の需要の増加で馬の価格が高騰し、 運搬の代替手段としてレールと蒸気機関車を用いた鉄道の研究が一段と 進んだ。 </p> あいうえおかきくけ10さしすてそたちつて20なにぬねのはひふへ30まみむめもやいゆえ40らりるれろわいうえ50<br/> 記号文字:■□●◎○△▲▽▼<br/> </body> </html>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title>文書のタイトル</title> <style> body { margin: 2em; /* 上下左右の余白 */ font-family: Meiryo; /* フォント */ font-size:12pt; /* 文字の大きさ */ } p { line-height: 1.8; /* 行の高さをフォントに対して 1.8倍 (行間を80%) */ text-indent: 1em; /* 段落の先頭を1文字インデント */ text-align: justify; /* 均等割り付け、文章の行末を揃える */ } h1 { font-size: 1.5em; /* 文字の大きさ。親の要素(このサンプルではbody)のフォントに対して1.5倍 */ color: #336; /* 文字の色 */ background: #eef; /* 背景色 */ border-style: solid; /* 枠線の種類 */ border-color: #669; /* 枠線の色 */ border-width: 1px 0; /* 枠線の太さ:上下、左右 */ padding: 0.35em 0 0.1em 0.4em; /* 内側の余白の大きさ:上、右、下、左 */ margin: 0 -0.3em 1em -0.3em; /* 外側の余白の大きさ:上、右、下、左 */ } </style> </head> <body> <h1>こんにちは Hello World</h1> <p> サンプル文章。リチャード・トレビシックが1804年に鉄製レール上を 走る蒸気機関車の走行に成功した。しかし、この頃は馬車鉄道用の もろい鋳鉄レールを使用していたため本格的な実用化までには至らな かった。 その後、ナポレオン戦争による軍馬の需要の増加で馬の価格が高騰し、 運搬の代替手段としてレールと蒸気機関車を用いた鉄道の研究が一段と 進んだ。 </p> あいうえおかきくけ10さしすてそたちつて20なにぬねのはひふへ30まみむめもやいゆえ40らりるれろわいうえ50<br/> 記号文字:■□●◎○△▲▽▼<br/> </body> </html>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title>文書のタイトル</title> <style> body { margin: 0; /* 0 の場合は単位を省略できる */ padding: 0; background: #dde; /* 背景色 */ font-family: Meiryo, MS PGothic; /* フォント */ font-size: 12pt; /* 文字の大きさ */ } main { /* main 内に対してスタイルを適用 */ display:block; /* IE11で必要。これがないと IE11でどう見えるか? */ margin: 0 auto; /* 外側の余白:上下,左右、左右 auto でセンタリング */ padding: 2em 4%; /* 内側の余白:上下,右左。% はウインドの幅に対する割合で、 ウインド幅が変わると左右の padding の大きさも変わる。 */ background: #fff; min-width: 300px; /* 最小幅 */ max-width: 600px; /* 最大幅 */ min-height: 500px; /* 最小高さ */ } main p { /* main内の p に対して適用される (main の外の p には適用されない) */ line-height: 1.8; /* 行の高さを 180%(行間を80%) */ text-indent: 1em; /* 段落の先頭を1文字インデント */ text-align: justify; /* 均等割り付け */ } main h1 { /* main内の h1 に対して適用される (main の外の h1 には適用されない) */ font-size: 1.5rem; /* 文字の大きさ。bodyのフォントに対して1.5倍 */ color: #336; /* 文字の色 */ background: #eef; /* 背景色 */ border-style: solid; /* 枠線の種類 */ border-color: #669; /* 枠線の色 */ border-width: 1px 0; /* 枠線の太さ:上、右、下、左の順 */ padding: 0.35em 0em 0.1em 0.4em; /* 内側の余白の大きさ:上、右、下、左の順 */ margin: 0em -0.3em 1em -0.3em; /* 外側の余白の大きさ:上、右、下、左の順 */ } </style> </head> <body> <main> <h1>こんにちは Hello World</h1> <p> サンプル文章。リチャード・トレビシックが1804年に鉄製レール上を 走る蒸気機関車の走行に成功した。しかし、この頃は馬車鉄道用の もろい鋳鉄レールを使用していたため本格的な実用化までには至らな かった。 その後、ナポレオン戦争による軍馬の需要の増加で馬の価格が高騰し、 運搬の代替手段としてレールと蒸気機関車を用いた鉄道の研究が一段と 進んだ。 </p> あいうえおかきくけ10さしすてそたちつて20なにぬねのはひふへ30まみむめもやいゆえ40らりるれろわいうえ50<br/> 記号文字:■□●◎○△▲▽▼<br/> </main> </body> </html>