プログラミングが気になる人向けのまずは触ってみ講座(html css編その１) #CSS

　あらすじ

html css を超ざっくり説明する。因みに友人に教えながら書いているぞ！情報は9割強カットするつもりなので足りないなと思えば各自検索をよろしく！

　htmlとは

まずはここを見よう
大雑把に言えばサイトの見た目の構造を決める言語。

　cssとは

まずはここを見よう
大雑把に言えばhtmlで決めた構造に対し幅、色、枠線、位置などを定義することができる。

　htmlのベース

まずはこのベースを覚えよう。よく使うのでコピペok

sample.html

<!--これはコメント、ビューには基本影響しないぞ。メモ感覚で使おう-->
<html>
  <head>
<!--head要素　約束事を記入するためのスペース。タブの名前や使用するcss等を設定できる。-->
    <title>ウェブページのタイトル</title>
<!--cssは同じディレクトリ(フォルダ)にいれば下の書き方でOK、違うならアドレスの指定が必要-->
    <link rel="stylesheet" type="text/css" href="sample.css">
  </head>
  <body>
<!--body要素 見た目に必要な要素はここに記述する -->
  </body>
</html>

　cssのベース

sample.css


/*これもコメントメモ感覚で使おう*/

/*　○○{}でスタイルの指定ができます。classで指定するときは.○○{} idで指定するときは#○○{}と書きます　*/
body{
/*　height(高さ) & width(幅): 高さ,幅を指定できる。値は固定値ならpx,割合なら%を使う。　*/
  height:100%;
  width: 100%;
/*　color(フォント色) & background-color(背景色): 色を指定できる。
カラーコードで指定するか、名称で指定する。 　*/
　color: #6fe7bd;
  background-color: green;
}

　黒板(授業中書いたもの)

index.html

<html>
  <head>
    <title>ウェブページのタイトル</title>
    <link rel="stylesheet" type="text/css" href="index.css">
  </head>
  <body>
    <div class="apple"></div>
    <div class="banana"></div>
    <div class="apple"></div>
    <div class="cheese"></div>
    <h1>ウェブページの見出し</h1>
    <p>ウェブページを作成しました！</p>
  </body>
</html>

index.css

html{
  height:100%;
  width: 100%;
  background-color: green;
}
h1,p{
  color: white;

}
.apple{
  height: 200px;
  width: 200px;
  background-color: red;
}

.banana{
  height: 300px;
  width: 150px;
  background-color: yellow;
}
.cheese{
  height: 30px;
  width: 30px;
  background-color: white;
}

　宿題とテンプレ

homework1.html

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="homework1.css">
</head>
<body>
</body>
</html>

homework1.css

body{
  height:100%;
  width: 100%;
}

黒板でやったことを思い出しながら以下の問題を答えること。
1.幅高さともに50%の背景緑でできたclass名content1を作る。
2.幅高さともに200pxの背景黄色でできたclass名content2を作る。
3.(発展)幅高さともに200pxの背景赤色でできたclass名content3をcontent1の中に作る。
4.(発展)content3に白色で書かれた「hello world」の文字を記入する。