ミニ都市を造ること


目的


HTMLとCSSはウェブサイトの仕組みについて学ぶ重要な部分です.あらゆるウェブサイトは、テキストまたはイメージのようなものをサイトに表示するために、HTMLを使います.HTMLとCSSのいくつかの概念をつかむことができることは、コンピュータサイエンスでより複雑な科目を学ぶことになると多くを助けることができます.このため、いくつかの経験を得ることが重要です!
このチュートリアルでは、クールなミニシティを構築する方法を学んでいる間、どのように特定のHTML機能の仕事と、なぜ彼らは重要なのチュートリアルを与える!

セットアップ


任意のHTML/CSSエディタを開きます.Here is a good browser-based editor .
このチュートリアルと一緒に従ってください、あなたはあなたの最初のミニシティを構築するために一歩一歩です!

ウォークスルー


このチュートリアルでは、ミニシティのHTMLとCSSの部分に移動します.あなたは、プロジェクト全体の基盤としてHTMLを考えることができます!我々が強い基盤を構築するために働くならば、我々のミニシティーは素晴らしく見えます!
HTMLを使用するときの最初のステップは、“doctype html”機能を確立することです.これは単に以下のコードの全てがHTMLドキュメントとしてレンダリングされることを意味します.
したがって、最初の行は次のようになります.
<!DOCTYPE html>
得た?すごい!
次に、実際にHTMLタグを作成しなければなりません.タグは本質的に私たちが編集しているHTMLのタイプをエディタに伝えるコマンドです.これは、私たちがHTMLコードを書き始めていることを意味しますが、まず最初に、私たちは、私たちがコンピュータでHTMLで書くことを伝えなければなりません.これを行うには、単にあなたの2行目に< HTML >を入力します.あなたのコードはこれまでのところです.
<!DOCTYPE html>
<html>
今、我々はHTMLで書くという事実を確立しました、楽しいものに入る時間です.コードの3行目に< Head >を書き始める.これは、我々のヘッダーのための情報がここに格納されると我々のエディタに話します.
私たちの<ヘッド>タグを書いた後、我々はプロジェクトにタイトルを与えるべきだということを知っています.私のプロジェクト「私のミニシティー」としましょう.以下のようになります.
<!DOCTYPE html>
<html>
    <head>
        <title>My Mini City</title>
タイトルの名前の後にタグがあることに気づくかもしれません.これを終了タグと呼ぶ.閉じるタグは、どのタグが閉じているかを示す前に“/”を持ちます.これは、我々はもはやこのタグを編集していないエディタに指示します.
私たちの体のセクションを作成するには、単に次の行に体を入力します.
さあ、授業をしましょう!我々が我々の都市がどのように見えるかについて考えましょう.
我々は、我々が我々の都市で以下のオブジェクトが欲しいということを知っています:
地面
摩天楼
より小さい建物
道路




結局これらのオブジェクトを作成するために、それらのためにクラスを作らなければなりません.クラスは単にオブジェクトを作成するために使用する宣言です.その後、我々は実際にCSSでそれを作成!
< div >タグを使ってクラスを作成します.このように:
  <body>
      <div class = "ground">
ご覧の通り、“ground”というクラスを作りました.現在、我々のエディタは、我々がオブジェクトをつくることを計画しているということを知っています.
私たちは他のすべてのオブジェクトと同じことを行います.終わったら、次のようになります.
<body>
      <div class = "ground">
        <div class = "bottomSide"></div> 
        <div class = "bottomFront"></div> 
        <div class = "building1">
          <div class = "wall1"></div>
          <div class = "wall2"></div>
          <div class = "roof"></div>
          <div class = "railing1"></div>
          <div class = "railing2"></div>
        </div>
        <div class = "building2">
          <div class = "wall3"></div>
          <div class = "wall4"></div>
          <div class = "roof2"></div>
        </div>
        <div class = "road1"></div>
        <div class = "road2"></div>
      </div>

        <div class = "ocean"></div>
        <div class = "ramp1"></div>
      <div class = "ramp2"></div>

      <div class = "bridge"></div>

        <div class = "waterfall"></div>

        <div class = "ground2">
            <div class = "grassArea"> <!--GRASS AREA-->
                <div class = "treeTrunks"></div> 
          <div class = "triangleTops"></div>
          <div class = "circleTops"></div> 
            </div>
        <div class = "bottomFront"></div> 
        </div>

      <div class = "car">
        <div></div>
        <div></div>
      </div>

        <div class = "boat">
        <div></div>
        <div></div>
        <div></div>
      </div>

        <div class = "sun"></div>
  </body>

</html>
これは今、コードの巨大な塊のように見えますが、それを壊しましょう!
我々の都市のすべてのオブジェクトのために、我々はそれのためにDIVクラスをつくります.このようにして、CSSを使って編集することができます.CSSは私たちの塗料のようですが、HTMLは私たちのオブジェクトのすべてのキャンバスです!
時々、オブジェクトは「子供」を持ちます.たとえば、建物は地面に置かれているので、建物は地面の「子供」です.
“build 1”がコード内の“ground”タグ内に置かれているのを見ることができます.
私たちの“Building 1”も自分の子供を持っています.壁と屋根が建物の構成要素であるので、私たちは私たちの< buildingl >タグの中に置きます.コンポーネントが互いに属するときはいつでもこれを繰り返す.(また、草の木や木でこれを見ることもできます)
すべてのオブジェクトとその子を作成した後、私たちの体とHTMLタグを/body/htmlを使って閉じる時間です.
CSSでオブジェクトをデザインするときは、HTMLで作成した名前を使用しなければなりません.たとえば、私が私の都市の橋の色を変えたいならば、私は私のCSSでそれを「ブリッジ」と命名する必要があります.
次に、コードのCSS部分のエディタを用意しましょう.スタイルタグを設定することでこれを行います.CSSを使用するので、スタイルタグは次のようになります.
<!DOCTYPE html>
<html>
    <head>
        <title>Mini City Webinar</title>
        <style TYPE="text/css">
我々は、我々のコードの我々の頭の部分で、我々のCSSの全てを書きます.
我々のウェブページをスタイルするために、我々はCSS構文を学ぶ必要があります.CSSルール集合はセレクタと宣言ブロックからなる.

色とフォントサイズとは別に、これらはいくつかのあなたが始めるために必要なプロパティです.
  • の位置:静的、相対的、固定、絶対的または粘着性の要素のために使用される位置決め方法の種類を指定します.
  • スタティック:静的位置はページの通常の流れに従って常に配置されます.
  • 相対位置:相対位置は、CSS内の別のオブジェクトに対して相対的に配置されます.
  • 固定:固定位置を持つ要素は、常にどのような方法でスクロールされても同じ場所にとどまります.
  • アブソリュート:固定に似ていますが、ページよりむしろ別のオブジェクトに対して常に同じ場所に滞在します.
  • 粘着:ユーザーのスクロール位置に基づいて配置される要素.
  • Display :要素が表示されているかどうかを処理します.display : noneを選択した場合、要素は表示されません.
  • 背景色:要素の背景色を決定します.色は有効な色の名前で指定できます-黒のように、16進値-“ffffff”やRGB値のように-“RGB(255、0、0)”.
  • 高さと幅:これらは、要素の高さと幅を設定するために使用されるプロパティです.
  • 変換:このプロパティを使用して2次元変換を行います.最も一般的な変換は以下の通りです.
  • rotate () :与えられた度合いに従って時計回りまたは反時計回りに回転させる.例えば、
    変換:回転(20 deg);
  • skew () :与えられた角度でx軸とy軸に沿って要素を描画します.例えば、この例は、x軸に沿った要素30度、y軸に沿った50度を歪める.
    変形:スキュー(30 deg、50 deg);
  • Top :要素の垂直位置に影響します.上の例では、要素18 pxを最寄りの位置の祖先の最上部に設定します.
  • 左:それは要素の水平位置に影響します.上の例では、最寄りの位置の祖先の左端から要素90 pxを設定します.
  • Z - index :要素のスタック順序を指定します.あなたはサンドイッチの層のようなZ -インデックスについて考えることができます.Zインデックス値が1つの項目よりも高い場合は、最初に高い値が描画されます.
  • まず第一に、あなたの都市の基礎を築く必要があります.出発点として次のコードを使用できます.
    .ground{ /*foundation*/
            position: absolute;
            display: block;
            /*purple*/
            background-color: #D3D3D3;
            width: 200px;
            height: 148px;
            transform: skew(60deg, -15deg);
            top: 100px;
            left: -150px;
            z-index:-999;
          }
          .ground .bottomSide{
            position: absolute;
            display: block;
            width: 16px;
            height: 148px;
            background-color: #C0C0C0;
            transform: skew(0deg, -30deg);
            top: 4px;
            left: -16px;
            z-index:-1001;
          }
          .ground .bottomFront{
            position: absolute;
            display: block;
            width: 210px;
            height: 9.5px;
            background-color: #C0C0C0;
            transform: skew(-60deg, 0deg);
            top: 147px;
            left: -8px;
            z-index:-1001;
          }
    
    あなたがあなたの基盤を持っているので、あなたはビルを始めたいかもしれません.あなたが始めるのを助けるために、これは道を描くコードが以下のように見えることです:
    .ground .road1 {
            position: absolute;
            display: block;
            background-color: #C0C0C0;
            width: 20px;
            height: 200px;
            transform: rotateZ(90deg);
            top: 18px;
            left: 90px;
            z-index:-998;
    
    今、あなたは基盤を敷設し、道路を構築した場合は、より多くの道路、橋、建物、またはあなたのミニシティで欲しいかもしれない何かを構築を開始することができます!これは、このチュートリアルで説明されているすべてのコードを作成した後、私たちの街がどのように見えるかです