HTML & CSS

サイト －Web開発コース(Node.js) | Progate リンク

HTML & CSS 学習レッスン初級編＞ CSSに触れてみよう！

◯ポイント

１．CSSを書くときも、インデント（字下げ）をし、プロパティの末尾にはコロン（:）、行末にはセミコロン（;）をつける必要がある

２．font-familyプロパティを用いると、フォントの種類を指定することができる

３．クラス名でCSSを指定する場合、先頭にドット「.」が必要

HTML & CSS 学習レッスン初級編＞レイアウトを作ろう

◯ポイント

１．<!DOCTYPE html>の部分はDOCTYPE宣言と呼ばれるもので、HTMLのバージョンを宣言するためのもの

２．<head>要素の中では、以下のように①文字コードの指定、②ページのタイトルの設定、③CSSの読み込みなどを行っている

３．<title>要素で指定されたタイトルは、ブラウザのタブ上に現れる

４．レイアウトは<div>要素によって構成される

HTML & CSS 学習レッスン初級編＞ ヘッダーを作ろう！

◯ポイントfloat: left;を指定すると要素が左から順に横に並びます。

１．ヘッダーイメージ

２．ヘッダーの「Progate」のロゴと、ヘッダーメニューのリストを<div>要素を用いてグループ化する

３．<li>要素にlist-styleプロパティを用いてnoneを指定すると、リストの先頭のマークを消すことができる

　　float: left;を指定すると要素が左から順に横に並びになる

４．要素に余白を作りたい場合は、paddingを用いる。「padding: 値;」で四方、「padding-top: 値;」等とすると、その方向のみに余白が追加される

HTML & CSS 学習レッスン初級編＞ フッダーを作ろう！

◯ポイント

１．フッターイメージ

２．「.header-list」の後にスペースを空けてliと続けると、「header-list」の中の<li>要素にのみCSSを適用することができる

３．リスト間隔に余白を入れるには、.footer-list とは分けて .footer-list li でpaddingの設定が必要

４．float: rightを用いると、指定した要素を右から順に横並びにすることができる。float: leftとfloat:rightを組み合わせることで、ロゴとリスト全体

　　を左右に配置することができる

HTML & CSS 学習レッスン初級編＞ コンテンツを作ろう！

◯ポイント

１．メイン部分のイメージ

２．文中の一部にCSSを適用させたい場合は、<span>要素で囲む

３．HTMLの要素には、改行される要素と改行されない要素がある。前後で改行が入り、親要素の幅一杯に広がる要素をブロック要素

　　改行されない要素をインライン要素という

４．<img src="html:// …">で画像を埋め込む

５．要素にボーダー（枠線）をつけるには、borderプロパティを用いる。枠線の太さ、種類、色を指定して使用する

６．paddingはborderの内側の余白を作る。borderの外側に余白を作りたい場合、marginを用いる

７．marginもpaddingと同様に、各方向の余白をそれぞれ指定したり、まとめて指定したりすることも可能

８．HTMLの全ての要素には、border（初期状態では表示されない）があり、その外側の余白はmargin, 内側の余白はpadding

９．入力フォームのイメージ

10．<input>要素は１行のテキスト入力を受け取るための要素。<input>要素は終了タグが不要

　　<input>要素のtype属性にsubmitを指定すると送信ボタンになる。ボタンに表示されるテキストをvalue属性で設定できる。デフォルトは「送信」

　　<textarea>要素は複数行のテキスト入力を受け取るための要素

11．複数のセレクタをコンマ（,）で区切ることで、それらに同じCSSを適用することができる

HTML & CSS 学習レッスン初級編＞総括

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Progate</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <div class="header">
      <div class="header-logo">Progate</div>
      <div class="header-list">
        <ul>
          <li>プログラミングとは</li>
          <li>学べるレッスン</li>
          <li>お問い合わせ</li>
        </ul>
      </div>
    </div>

    <div class="main">
      <div class="copy-container">
        <h1>HELLO WORLD<span>.</span></h1>
        <h2>プログラミングの世界へようこそ</h2>
      </div>
      
      <div class="contents">
        <h3 class="section-title">学べるレッスン</h3>
        <div class="contents-item">
          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
          <p>HTML & CSS</p>
        </div>
        <div class="contents-item">
          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
          <p>PHP</p>
        </div>
        <div class="contents-item">
          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
          <p>Ruby</p>
        </div>
        <div class="contents-item">
          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
          <p>Swift</p>
        </div>
      </div>
      
      <div class="contact-form">
        <h3 class="section-title">お問い合わせ</h3>
        <p>メールアドレス（必須）</p>
        <input>
        
        <p>お問い合わせ内容（必須）</p>
        <textarea></textarea>
        
        <p>※必須項目は必ずご入力ください</p>
        <input class="contact-submit" type=submit value="送信">
        
      </div>
    </div>

    <div class="footer">
      <div class="footer-logo">Progate</div>
      <div class="footer-list">
        <ul>
          <li>会社概要</li>
          <li>採用</li>
          <li>お問い合わせ</li>
        </ul>
      </div>
    </div>
  </body>
</html>

sytlesheet.css

body {
  font-family: "Avenir Next";
}

li {
  list-style: none;
}

.header {
  background-color: #26d0c9;
  color: #fff;
  height: 90px;
}

.header-logo {
  float: left;
  font-size: 36px;
  padding: 20px 40px;
}

.header-list li {
  float: left;
  padding: 33px 20px;
}

.main {
  padding: 100px 80px;
}

.copy-container h1 {
  font-size: 140px;
}

.copy-container h2 {
  font-size: 60px;
}

.copy-container span {
  color: #ff4a4a;
}

.contents {
  height: 500px;
  margin-top: 100px;
}

.section-title {
  border-bottom: 2px solid #dee7ec;
  font-size: 28px;
  padding-bottom: 15px;
  margin-bottom: 50px;
}

.contents-item {
  float: left;
  margin-right: 40px;
}

.contents-item p {
  font-size: 24px;
  margin-top: 30px;
}

.contact-form {
  padding-top: 100px;
}

input, textarea {
  width: 400px;
  margin-top: 10px;
  margin-bottom: 30px;
  padding: 20px;
  font-size: 18px;
  border: 1px solid #dee7ec;
}

.contact-submit {
  background-color: #dee7ec;
  color: #889eab;
}

.footer {
  background-color: #2f5167;
  color: #fff;
  height: 120px;
  padding: 40px;
}

.footer-logo {
  float: left;
  font-size: 32px;
}

.footer-list {
  float: right;
}

.footer-list li {
  padding-bottom: 20px;
}

HTML & CSS 学習レッスン中級編＞レイアウトを作ろう

◯ポイント

１．<div class="header">と<div class="footer">のような、ヘッダーとフッターのためのタグは非常によく使われるので、HTMLは<header>と

　　<footer>というタグが用意されている。<header>, <footer>を使う方が一般的

２．<body>のサンプル

HTML & CSS 学習レッスン中級編＞ トップ部分を作ろう

◯ポイント

１．CSSで背景画像を指定するにはbackground-imageプロパティを用いる。background-image: url(画像のURL);のように使う。
　　background-imageで指定された背景画像は表示範囲を埋め尽くすまで繰り返し表示される性質がある。background-size: cover;を指定すると、

　　1枚の画像で表示範囲を埋め尽くすように画像の大きさが拡大縮小する

２．中央に寄せるためにはmarginの左右にautoを指定する。marginにautoを指定するときは、必ずwidthを併せて指定する。なお、上下のmargin
　　にautoを指定することはできない

３．opacityプロパティを使えば要素を透明にできる。透明度は0.0(完全に透明) ~ 1.0(完全に不透明)の数値で指定

４．letter-spacingプロパティを用いることで文字の間隔を指定することができる

５．ボタンは<a>タグで指定する。<a>タグはインライン要素でありwidthやheightが指定できないのでインラインブロック要素に変更する

６．<a>タグのdisplayプロパティで変更可能。block（ブロック要素）, inline-block（インラインブロック要素）, inline（インライン要素）

７．ボタンのように、「共通の部分があるが、それぞれ小さい変化をつけたい」ときは半角スペースで区切って複数のクラスを指定する

８．カーソルが乗ったときの状態をhoverと言う。CSSで、セレクタ:hoverとすることで、カーソルが乗ったときのCSSを指定することができる

９．角を丸めるにはborder-radiusプロパティを用いる。数字が大きいほど角が丸くなる

10．text-alignプロパティを用いることで、テキスト、インライン要素、インラインブロック要素の配置を指定することができる。

　　leftで左寄せ、centerで中央揃え、rightで右寄せ

11．containerクラスのように、広い範囲を囲うようなブロック要素の場合はmarginを、テキストやボタンのようなインライン要素・インライン

　　ブロック要素の場合はtext-alignを使用する

12．https://fontawesome.com に詳しい使い方やアイコンの一覧が載っている

13．Font Awesomeの使用手順。①Font AwesomeのCSSファイルを読み込む、②<span>タグにfaクラスとfa-アイコン名クラスを指定する

HTML & CSS 学習レッスン中級編＞ ヘッダーを作ろう

◯ポイント

１．opacityには要素の中身全てを透明にするという性質がある。背景色のみを透明にするには、rgbaを使う必要がある

　　rgbaは4つの値をカンマ区切りで指定。１～３つ目の値はRGB(色)、4つ目の値が透明度で0～1の数値で指定（値が小さいほど透明になる）

２．transitionでアニメーションをつけられる。「変化の対象」,「変化にかかる時間」等を指定する。「変化の対象」にはcolor等のプロパティを

　　指定するが、allを指定すると全てのプロパティに適用される。transitionは多くの場合hoverと組み合わせて使う

３．line-heightプロパティを使うと、行の高さを指定することができる。値が大きいほど行間が大きくなる

４．line-heightプロパティは本来行間を調整するためのプロパティだが、要素の縦方向の中央寄せにも使える。要素の高さとline-heightプロパティ

　　を同じ値にすると、文字がちょうど中央に配置される

５．<a>タグはインライン要素なので<a>タグをクリックできる範囲はテキストの部分だけになってしまう。<a>タグをブロック要素にすると、

　　大きさが親要素いっぱいに広がるので、全体をクリックできるようになる

HTML & CSS 学習レッスン中級編＞ レッスン一覧部分を作ろう

◯ポイント

１．レッスン一覧部分の構成図

２．レッスンの紹介部分の構成図

３．font-weightプロパティで文字の太さを変更できる。<h1>~<h6>の要素は初期状態でfont-weight: bold;となっている。normalで文字が細くなる

４．ボックスのwidthやheightをpxではなく%で指定すると、親要素に対してどのくらいの幅や高さを持つか指定することができる

５．通常、HTMLの要素同士は重なって表示されることはないが、position: absolute;を使うと、要素同士を重ねて表示することが出来る

　　サイト全体の左上部分を基準とし、そこからの位置をtopとleftを用いて指定する。また、rightやbottomを併用することも可能

６．基準としたい親要素にposition: relative;と指定することで、その要素の左上部分を新たな基準位置にすることが出来る

HTML & CSS 学習レッスン中級編＞ メッセージ部分を作ろう

◯ポイント

１．メッセージ部分の構成図

２．ボックスに影を付けるためにはbox-shadowプロパティを用いる。「影の位置」と「影の色」を指定する

３．ボタンを押したときに「ボタンの位置を影の分だけ下げる」「影を消す」ことで、へこんで見えるようになり。以下の３ポイントで実現出来る

　　・セレクタにactiveを用いることで、要素がクリックされている間だけCSSを適用する（カーソルを乗せるだけでは適用されない）

　　・position: relative;をtopやleftと併用すると、その要素を本来の位置からずらせる

　　・box-shadow: none;とすると、影を消すことが出来る

HTML & CSS 学習レッスン中級編＞ フッターを作ろう

◯ポイント

１．フッター部分の構成図

２．

HTML & CSS 学習レッスン中級編＞ ヘッダーを固定しよう

◯ポイント

１．position: fixed;で常に要素を画面上の指定した位置に固定させておくことができる。位置は、top、left、right、bottomを使って指定

２．z-indexプロパティで要素の重なり順を指定する。整数値で指定し値が大きいほど上に表示される。positionプロパティと併用する必要がある

HTML & CSS 学習レッスン中級編 ＞総括

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Progate</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <header>
      <div class="container">
        <div class="header-left">
          <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
        </div>
        <div class="header-right">
          <a href="#" class="login">ログイン</a>
        </div>
      </div>
    </header>

    <div class="top-wrapper">
      <div class="container">
        <h1>LEARN TO CODE.</h1>
        <h1>LEARN TO BE CREATIVE.</h1>
        <p>Progateはオンラインプログラミング学習サービスです。</p>
        <p>初心者にもやさしいスライドとレッスンで、Webサービスを作りながらプログラミングを学んでいきましょう。</p>
        <div class="btn-wrapper">
          <a href="#" class="btn signup">新規登録はこちら</a>
          <p>or sign up with</p>
          <a href="#" class="btn facebook">
            <span class="fa fa-facebook"></span>
            Facebookで登録
          </a>
          <a href="#" class="btn twitter">
            <span class="fa fa-twitter"></span>
            Twitterで登録
          </a>
        </div>
      </div>
    </div>
    <div class="lesson-wrapper">
      <div class="container">
        <div class="heading">
          <h2>Learn Where to Get Started!</h2>
        </div>
        <div class="lessons">
          <div class="lesson">
            <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/html.png">
              <p>HTML & CSS</p>
            </div>
            <p class="txt-contents">Webページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
          </div>
          <div class="lesson">
            <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/jQuery.png">
              <p>jQuery</p>
            </div>
            <p class="txt-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
          </div>
          <div class="lesson">
            <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/ruby.png">
              <p>Ruby</p>
            </div>
            <p class="txt-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
          </div>
          <div class="lesson">
            <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/php.png">
              <p>PHP</p>
            </div>
            <p class="txt-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
          </div>
        </div>
      </div>
    </div>
    <div class="message-wrapper">
      <div class="container">
        <div class="heading">
          <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2>
          <h3>Let's learn to code, learn to be creative!</h3>
        </div>
        <a href="#" class="btn message">さっそく開発する</a>
      </div>
    </div>
    <footer>
      <div class="container">
        <img src="https://prog-8.com/images/html/advanced/footer_logo.png">
        <p>Learn to code, learn to be creative.</p>
      </div>
    </footer>
  </body>
</html>

sytlesheet.css

body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN";
}

a {
  text-decoration: none;
}

.container {
  width: 1170px;
  padding: 0 15px;
  margin: 0 auto;
}

.top-wrapper {  
  padding: 180px 0 100px 0;
  background-image: url(https://prog-8.com/images/html/advanced/top.png);
  background-size: cover;
  color: white;
  text-align: center;
}

.top-wrapper h1 {
  opacity: 0.7;
  font-size: 45px;
  letter-spacing: 5px;
}

.top-wrapper p {
  opacity: 0.7;
}

.btn-wrapper {
  margin: 20px 0;
}

.btn-wrapper p {
  margin: 10px 0;
}

.signup {
  background-color: #239b76;
}

.facebook {
  background-color: #3b5998;
  margin-right: 10px;
}

.twitter {
  background-color: #55acee;
}

.btn {
  padding: 8px 24px;
  color: white;
  display: inline-block;
  opacity: 0.8;
  border-radius: 4px;
}

.btn:hover {
  opacity: 1;
}

.fa {
  margin-right: 5px;
}

header {
  height: 65px;
  width: 100%;
  background-color: rgba(34, 49, 52, 0.9);
  position: fixed;
  top: 0;
  z-index: 10;
}

.logo {
  width: 124px;
  margin-top: 20px;
}

.header-left {
  float: left;
}

.header-right {
  float: right;
  background-color: rgba(255, 255, 255, 0.3);
  transition: all 0.5s;
}

.header-right:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.header-right a {
  line-height: 65px;
  padding: 0 25px;
  color: white;
  display: block;
}

.lesson-wrapper {
  height: 500px;
  padding-bottom: 80px;
  background-color: #f7f7f7;
  text-align: center;
}

.heading {
  padding-top: 60px;
  padding-bottom: 30px;
  color: #5f5d60;
}

.heading h2 {
  font-weight: normal;
}

.lesson {
  float: left;
  width: 25%;
}

.lesson-icon {
  position: relative;
}

.lesson-icon p {
  position: absolute;
  top: 90px;
  width: 100%;
  color: white;
}

.txt-contents {
  width: 80%;
  display: inline-block;
  margin-top: 20px;
  font-size: 12px;
  color: #b3aeb5;
}

.heading h3 {
  font-weight: normal;
}

.message-wrapper {
  border-bottom: 1px solid #eee;
  padding-bottom: 80px;
  text-align: center;
}

.message {
  padding: 15px 40px;
  background-color: #5dca88;
  box-shadow: 0 7px #1a7940;
}

.message:active {
  position: relative;
  top: 7px;
  box-shadow: none;
}

footer img {
  width: 125px;
}

footer p {
  color: #b3aeb5;
  font-size: 12px;
}

footer {
  padding-top: 30px;
}

❏ パターン別

Powr.io content is not displayed due to your current cookie settings. Click on the cookie policy (functional and marketing) to agree to the Powr.io cookie policy and view the content. You can find out more about this in the Powr.io privacy policy.