HTML&CSS 初級編
・HTMLの仕組み
テキストをタグで囲むことで、見出しやリンクと意味を持たせることができます。
<h3>Progateとは</h3> <!-- 見出し3 --> <p>オンラインプログラミング学習サービスです</p> <!-- 段落 --> <a href="https://prog-8.com">Progate</a> <!-- リンクの作成 --> <img src="https://prog-8.com/images/html/beginner/school.jpg"> <!-- 画像の表示 --> <ul> <!-- リストの作成 --> <li>HTML</li> <li>CSS</li> <li>Ruby</li> </ul>
以下のように表示されます。
Progateとは
オンラインプログラミング学習サービスです
- HTML
- CSS
- Ruby
・CSSとは?
CSSとは、HTMLの要素に対して色、大きさ、配置などを指定し、ページをデザインするための言語です。
h1 { /* セレクタ(変更対象) */ width: 500px; /* プロパティ(変更項目) */ height: 80px; /* 高さ */ background-color: #dddddd /* 背景 */ color: red; /* 文字の色 */ }
・HTMLの全体構造
<!-- index.html --> <!DOCTYPE html> <!-- HTML5を指定 --> <head> <!-- WEBページの設定を記載 --> <meta charset="utf-8"> <!-- 文字コードを指定 --> <title>Progate</title> <!-- ページタイトル --> <link rel="stylesheet" href="stylesheet.css"> <!-- CSSの読み込み --> </head> <body> <!-- 実際に表示したい内容を記載 --> <div class="header"> <!-- ページ上部のメニュー --> </div> <div class="main"> <!-- ページの主なコンテンツ --> </div> <div class="footer"> <!-- ページ上部のメニュー --> </div> </body> </html>
・完成版
<!-- 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> <!-- <input>要素 --> <p>お問い合わせ内容(必須)</p> <textarea></textarea> <!-- <textarea>要素 --> <p>※必須項目は必ずご入力ください</p> <input class="contact-submit" type="submit" value="送信"> <!-- type属性にsubmitを指定して送信ボタンを配置 --> </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>
/* stylesheet.css */ li { list-style: none; /* リストのマークをなくす */ } .header { background-color: #26d0c9; color: #fff; height: 90px; } .header-logo { float: left; font-size: 36px; padding: 20px 40px; /* 上下左右に余白を追加 */ } .header-list { float: left; } .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 { /* ,(カンマで区切って複数のセレクタにCSSを指定) */ 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; }
WebProgramming入門
- 01a. 開発環境構築(Windows8.1+VMware Player+CentOS)
- 01b. 開発環境構築(Windows 10+Ubuntu)
- 01c. 開発環境構築(Ubuntu18.04(WSL)+Ansible+Serverspec+WP-CLI)
- 01d. 開発環境構築(WSL2+Ubuntu18.04+Docker)(作成中)
- 02a. AWS環境構築(CentOS6)
- 02b. AWS環境構築(CentOS6+LAMP環境+WordPress)
- 02c. AWS環境構築(CentOS7+Django)
- 02d. AWS環境構築(CentOS7+Ansible+Serverspec+WP-CLI+Munin)(作成中)
- 02z. さくらのクラウド環境構築(CentOS7+Ansible+Serverspec+WP-CLI)
- 03a. WordPress制作入門
- 03b. WordPress制作入門
- 04. トラブルシューティング
- 11. HTML/CSS入門
- 11a. ProgateでHTML&CSS初級
- 11b. ProgateでHTML&CSS中級(ランディングページ)
- 11c. ProgateでHTML&CSS上級(レスポンシブデザイン)
- 11d. ProgateでHTML&CSS(Flexbox編)
- 11e. ProgateでSass(CSSをより便利に効果的に操作する言語)
- 11y. ドットインストールでBootstrap4入門
- 11z. PaizaラーニングでBootstrap4入門
- 12. MySQL入門
- 12a. ProgateでSQL Ⅰ~Ⅲ
- 12b. ドットインストールでmongoDB入門
- 13. PHP入門
- 14. ProgateでRubyⅠ~Ⅴ
- 15a. ProgateでRuby on RailsⅠ~Ⅴ
- 15b. ProgateでRuby on RailsⅥ~Ⅷ
- 15c. ProgateでRuby on RailsⅨ~Ⅺ
- 16. ProgateでPythonⅠ~Ⅴ
- 17. paizaラーニングでFlask入門
- 18a. Django入門1(Djangoの基本の理解)
- 18b. Django入門2(Djangoの動作の理解)
- 18c. Django入門3(Djangoのテンプレートとフォームを理解)
- 18d. Django入門4(お勧め店を投稿できるランチマップアプリの作成)
- 18e. Django入門5(Djangoでユーザー管理)
- 19a. ProgateでjQuery初級編
- 19b. ProgateでjQuery中級編
- 19c. ProgateでjQuery上級編
- 20a. ProgateでJavascript(ES6)Ⅰ~Ⅲ
- 20b. ProgateでJavaScript Ⅳ~Ⅴ
- 20c. ProgateでJavaScript Ⅵ~Ⅶ
- 20d. JavaScriptでCRUDアプリを作る(ELOOP)