More than 5 years have passed since last update.

Progate 初級編通し模写

Posted at 2020-10-23

何も見ないで、模写した結果、ダメダメだった。

色は、macの基本ソフト digital color Meterを利用した。
このソフトを使えば、rgbが抽出できるので、それで、色をつけた。

HTMLは結構書き出せる様になった。
送信のrgbをつけないといけない
CSSの細かい部分,padding marginが全然書けない。

一応、全体的な模写.完璧を目指さずに大体できていればOK

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Progate</title>
    <link rel="stylesheet" href="./styles2.css">
    <header>
        <div class="header-wrapper">
        <div class="header-logo">Progate</div>
        <div class="header-nav">
        <ul>
            <li>プログラミングとは</li>
            <li>学べるレッスン</li>
            <li>お問い合わせ</li>
        </ul>
        </div>
        </div>
    </header>
    <main>
        <div class="contents-wrapper">
            <div class="hellow-h1">
                <h1>HELLO WORLD<span>.</span></h1>
            </div>
            <div class="welcome-h2">
                <h2>プログラミングの世界へようこそ</h2>
            </div>
            <div class="learn-h3">
                <h3>学べるレッスン</h3>
            </div>
        <div class="contents">
            <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>

        <div class="contact">
            <div class="contact-h3">
                <h3>お問い合わせ</h3>
            </div>
            <div class="contact-contents">
            <p>メールアドレス(必須)</p>
            <input>
            <p>お問い合わせ内容(必須)</p>
            <textarea></textarea>
            <p>※必須項目は必ずご入力ください</p>
            <input class="submit" type="submit" value="送信">
            </div>
        </div>

    </main>
    </footer>
        <div class="footer-wrapper">
        <div class="footer-logo">
            Progate
        </div>
        <div class="footer-nav">
            <ul>
                <li>会社概要</li>
                <li>採用</li>
                <li>Progate</li>
            </ul>
        </div>
        </div>
    </footer>

</head>
<body>
</body>
</html>

style.css



.header-wrapper{
    padding:30px;
    height:80px;
    background-color:rgb(99,205,200);
    color:white;
}

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

}

.header-nav li{
    float:left;
    list-style:none;
    padding:30px;
    margin-bottom:40px;
}

.contents-wrapper{
    padding:40px;
}

.hellow-h1{
 font-size:40px;
}

.hellow-h1 span{
    color:red;
}

.welcome-h2{
    font-size:20px;
    padding-bottom:40px;
}

.learn-h3{
    font-size:16px;
    border-bottom:2px solid gray;
    margin-bottom:20px;
}

.contents{
    height:500px;
}

.contents-item{
    float:left;
    /*ここのheight*/
    margin-right:30px;
}

.contact{
    padding:30px;
    padding-bottom:30px;
}

.contact h3{
    border-bottom:1px solid rgb(224,231,235);
}

input,textarea{
    width:400px;
    /*答え見た margin*/
    margin-top:10px;
    margin-bottom:30px;

    padding:30px;
    /*答え見た周りがマイルドになる*/
    border:1px solid rgb(224,231,235);

}
.submit{
    background-color:rgb(224,231,235);
    /*答え見た文字が薄くなる*/
    color:rgb(144,161,173);
}



.footer-wrapper{
padding:20px;
height:200px;
background-color:rgb(55,81,101);
color:white;
}

.footer-logo{
    float:left;
    padding:40px 20px;
}

.footer-nav{
    float:right;
    padding:40px;
}

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

Progate 初級編 通し模写

Progate 初級編通し模写