このページは，HTML & CSS のコードを入力して，その表示を確かめながら， HTML & CSS を勉強するためのページです．
このエリアは皆さんが入力を行うと，その入力の表示に 置き換わります．
入力を行うには，右上の 「HTML/CSS 遊び場」という ボタンを押してください． 入力ダイヤログを閉じるときも同じボタンを押してください では，楽しみながら，HTML & CSS を学習しましょう．
「HTML/CSS 遊び場」で開いたダイアログの右上の「適用」を押せば この画面は消えます（皆さんの入力に置き換わります）．
また，「HTML/CSS 遊び場」に「ReadMe」というボタンがあります． 多少は，実習をガイドしてくれると思います．
なお， 当サイトは利用状況の分析，サイトの改善のために Google Analyticsを使用しています．プライバシーポリシーについては，プライバシーポリシーをご参照ください．
といっても，いま，はじめてこのページを開いた方は，適当な教科書の 当てがまだないかもしれません．
そういう方のために，最初に，いくつかの入力をして遊んでみるための サンプルを書きます．まず，それで遊んでみて，このページの使い方になれて， その間に何か教科書を探したら良いでしょう．
題材は用意するのですが，あくまでつなぎのためなので，早めに教科書を 用意してください．
この ReadMe では，その後に，
なお，このダイアログの右上には「閉じる」ボタンが常に同じ位置に表示されています．このダイアログを閉じて，再度，「ReadMe」ボタンで開いたときは， 閉じた位置に戻るようになっていますので，ここの説明と HTML & CSS Plan Land は 頻繁に行き来するのがよいでしょう．
<h1>HTML & CSS の学習と実践</h1> <h2>HTML & CSS の学習と実践</h2> <h3>HTML & CSS の学習と実践</h3> <h4>HTML & CSS の学習と実践</h4> <h5>HTML & CSS の学習と実践</h5> <h6>HTML & CSS の学習と実践</h6>
タイトルをセンタリングすることもできます．例えば，h3 を センタリングしてみましょう．
<h3 align=center>HTML & CSS の学習と実践</h3>
<p>最初の段落の文字を打って行って．．．</p> <p>次の段落の文字を打って行って．．．</p>
<p> と似たようなタグに，行を途中で切って，改行する <br> というタグもあります．このタグの名前は break から 来ています．例えば，次のように入力して「適用」してみてください．
開始終了で囲まれているということを<br>頭の隅にでも<br>置いておくことを お勧めします．
たぶん，皆さんのブラウザは横広になっていると思いますので，沢山の テキストを入力したとき，読みにくいくらいに一行が長くなっていると 思います．例えば次の文章を入れてみてください．
たぶん，皆さんのブラウザは横広になっていると思いますので，沢山の テキストを入力したとき，かなり読みにくいくらいに行が長くなっていると 思います．例えば次の文章を入れてみてください．
<style> body { width: 640px; } </style> たぶん，皆さんのブラウザは横広になっていると思いますので，沢山の テキストを入力したとき，かなり読みにくいくらいに行が長くなっていると 思います．例えば次の文章を入れてみてください．
こういう基本的な定義は HTML ファイルの head の中でするのが良いでしょう．
画像を入れるには img という要素があります．img は
<img src=画像のURL>
このページがおかれているフォルダーの下に pictures というフォルダーがあり，そこに p01-13.jpg という画像がありますから，
<img src=pictures/p01-13.jpg>
これは原寸大で表示されました．幅の width 属性や高さ height 属性で 大きさを調整することもできます．
<img width=160px src=pictures/p01-13.jpg> <img height=80px src=pictures/p01-13.jpg>
<img width=160px height=80px src=pictures/p01-13.jpg>
ここでは，記述している HTML ファイルと同じサイトにある画像， いわば内部の画像を表示しました．外側からの参照の例を書いておきましょう． ここには https://www.cs-study.com/koga/computer/pictures/svg-girl07.jpg で 外部から参照できる画像もあります．それを表示してみましょう．
<img width=160px src=https://www.cs-study.com/koga/computer/pictures/svg-girl07.jpg>
まずは，ul の例です．実際に表示してみてください．
<ul> <li>ドキュメントタイトル，章節項のタイトルの書き方<br> HTML には，このためのタグとして，大きい文字から小さい方に， h1 から h6 までのタグが用意されています， <p> <li>文章の書き方，段落の分け方 <li>文字の装飾の仕方 <li>画像の入れ方 <li>箇条書きの仕方 <li>リンクの張り方 <li>ドキュメントのまとめ方(div) </ul>
<ol> <li>ドキュメントタイトル，章節項のタイトルの書き方<br> HTML には，このためのタグとして，大きい文字から小さい方に， h1 から h6 までのタグが用意されています， <p> <li>文章の書き方，段落の分け方 <li>文字の装飾の仕方 <li>画像の入れ方 <li>箇条書きの仕方 <li>リンクの張り方 <li>ドキュメントのまとめ方(div) </ol>
<ol reversed> <li>ドキュメントタイトル，章節項のタイトルの書き方 <li>文章の書き方，段落の分け方 <li>文字の装飾の仕方 <li>画像の入れ方 <li>箇条書きの仕方 <li>リンクの張り方 <li>ドキュメントのまとめ方(div) </ol>
この間， <a href=https:www.cs-study.com/koga/others/games/hangman_german1.html target=_blank> ドイツ語の語・句・文章のハングマンゲーム </a> を作りました．
HTML で文書を書いていて，いくつかの記述をひとまとめにしたいことがよく あります．例えば，次のいくつかの文章をセンタリングして，またその後， 普通の左詰めに戻りたいときなどです．
そのようなときは，div 要素を使います．<div> と </div> に 挟まれた部分は１つのグループになって，センタリングなどの指示を まとめて出来ます．それらをまとめた div にセンタリングの指示をすれば 良いわけです．
簡単な例ですが，次のコードを表示してみてください．
<div align=center style="border: 2px solid #000; background: #cff; margin:24px;"> HTML で文書を書いていて，<br> いくつかの記述をひとまとめにしたいことが<br> よくあります．<br> 例えば，次のいくつかの文章をセンタリングして，<br> またその後，<br> 普通の左詰めに戻りたいときなどです． </div>
div はこのように色々なことができて，とても重要なのですが， この ReadMe もチュートリアル的な性格から，そろそろ終わりに したいと思います．
今まで述べたトピックスはこれから HTML & CSS を学習するにあたり， 頭の中に良いとっかかりを作ると思います．
では，みなさん，楽しく HTML & CSS を勉強してください．
<html> <head> 文字コード，タイトル，メタ情報，CSS や Javascript の定義など </head> <body> ここにいろいろなコンテンツが入る </body> </html> </pre>
ただ，厳密にいうと，このページでの表示は，皆さんが書いたものを 直接 body の中に持って行って表示している訳ではなく， body の中に１つ div をおいて，そこに皆さんの書いたものを 入れて表示しています．この二つにそれほど差はないと思いますが， body の中の div の中に書いた表示であることは覚えておいてください．
あと，基本的に body の中と言いましたが，CSS は，必要に応じて，head の 方に持って行った方が良いと思います．また，さらに，拡張子が「.css」という ファイルにまとめて，HTML の本体から分離することが一般には推奨されています．
