プログラミング

【プログラミング独学】HTML&CSS 19日目、コンテンツの構造

プログラミング学習(HTML&CSS)をProgateで学習した内容を記録したものです

 

Progateでの学習と自分でリサーチしてわかったことをメモしています

 

今回はProgate演習19をやりました

 

 

コンテンツを作ろう

今回はいきなり演習問題でした笑

 

演習はクリアできましたが練習もかねて、コードを自分で打ってみます

画像のURLやリンクはケースにより違うのでURLと記載します

 

index.html

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″>

<title>Progate</title>

<link rell=”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>学べるレッスン</h3>

<div class=”contents-item”>

<img src=”url”>

<p>HTML&CSS</p>

</div>

<div class=”contents-item”>

<img src=”url2″>

<p>PHP</p>

</div>

<div class=”contents-item”>

<img src=”url3″>

<p>Ruby</p>

</div>

<div class=”contents-item”>

<img src=”url”>

<p>Swift</p>

</div>

</div>

<div class=”contact-form”>

</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

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;

}

.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;

}

お、終わった・・・

 

ブラインドタッチできない人にはつらい笑

インデントが反映されていないのはワードプレスの仕様?

 

見にくいですが実際にはインデントして見やすく入力してるつもりなのでご容赦くださいm(_ _)m

 

 

学習終わり

ブログランキングに参加中です。

応援よろしくお願いします。

ブログランキング・にほんブログ村へにほんブログ村

人気ブログランキング

書いた人
 
33歳2児のパパ
長野の会社員です

趣味はテニス、ゲーム、漫画
アニメ、カラオケ、ネットなど

ブログ内容は育児、趣味、雑学、雑記

ブログネタなどを発信中


詳しいプロフィールはこちら


話が合いそうと思ったら
気軽にフォローお願いします



COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA