Uncategorized

8月18,19日(勉強20,21日目)

 

📖勉強20日目

✓活動内容
・仕事のため活動なし

📖勉強21日目

✓活動内容
・コーディング

コーディング

　今回は、8月17日の続きのコーディングを行いました😊
前回に続き順調にCSSを仕上げるつもりでしたが、imgの配置が上手くいかず躓いてしまいました💦
　CSSのコーディングは明日に持ち越して、ベンチマーク先のサイトを参考に必ず完成させるぞ！🔥
　コーディングの途中経過とコードを貼り付けておきます↴

📖HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Webデザイナーに転職するための勉強日記">
    <meta name="keywords" content="未経験Webデザイナー転職">
    <title>PortfolioSite</title>
    <link rel="stylesheet" href="https//unpkg.com/ress/dist/ress.min.css">
    <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet">
    <link rel="icon" type="image/png" href="image/favicon.png">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 鳥のロゴとヘッダーメニュー -->
    <header class="container wrapper">
        <div class="site_logo">
             <img src="image/site_logo.png" alt="サイトロゴ">
        </div>
        <nav>
            <ul class="nav_header">
                <li><a href="#">Skill</a></li>
                <li><a href="#">Works</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
         </nav>
    </header>

    <!-- 背景：緑部のヘッダー画像 -->
    <div id="home" class="home_back">
        <p class="home_header">
            <span class="home_title">SAAOU KAAAE</span>
            <br>
            <span class="sub_title sub_img">全ての想いを届けます</span>
        </p>
        <div class="home_header_scroll>">
            <span class="scroll_img">Scroll</span>
        </div>
    </div>

 <!-- Skill -->
    <section>
        <div class="skill">
            <h1>Skill</h1>
        </div>
        <section>
            <div class="skill_article">
                <div class="skill-list">
                    <ul>
                        <li>マーケティング</li>
                        <li>Webデザイン</li>
                        <li>コーディング</li>
                    </ul>
                </div>
                <div class="skill_explanation">
                    <div class="mk_explanation">
                        <div class="mk">
                            <img src="image/mk_logo.png" alt="マーケティング" width="229" height="215">
                        </div>
                        <p>YouTubeを複数運用していた経験から
                            お客様視点を大事にして、目的達成に
                            導きます。特に設計を重視し、ターゲ
                            ットの行動を細かく意識したペルソナ
                            設定を心掛けています。</p>
                    </div>
                    <div class="web_explanation">
                        <div class="web">
                            <img src="image/mouse_logo.png" alt="Webサイトデザイン" width="100" height="130">
                        </div>
                        <p>デザインの本来の意味を理解して、作
                            成します。お客様の要望・目的達成は
                            もちろんのこと、使う人･見る人全て
                            を意識したデザインにします。</p>
                    </div>
                    <div class="cd_explanation">
                        <div class="cd">
                            <img src="image/cd_logo.png" alt="コーディング" width="150" height="130">
                        </div>
                        <p>パソコン、スマートフォンの両方に対
                            応したコーディングをします。HTML
                            /CSSを使用したコーディングに加え、
                            JavaScriptで動きのあるサイトのコー
                            ディングも行います。</p>
                    </div>
                </div>
            </div>
        </section>
    </section>

<!-- Works -->   
    <section>
        <div class="works">
            <h1>Works</h1>
        </div>

        <div class="works_1">
            <img src="image/works1.PNG" alt="Webサイト">
        </div>
        <div class="works_2">
            <img src="image/works2.png" alt="バナー">
        </div>
        <div class="works_3">
            <img src="image/works3.png" alt="バナー">
        </div>
        <div class="works_4">
            <img src="image/works4.png" alt="ヘッダー">
        </div>
        <div class="works_5">
            <img src="image/works5.png" alt="ヘッダー">
        </div>
        <div class="works_6">
            <img src="image/works6.png" alt="サムネイル">
        </div>
        <div class="works_7">
            <img src="image/works7.png" alt="サムネイル">
        </div>
    </section>

<!-- About -->   
    <section>
        <div class="about">
            <div class="about_title">
                <h1>About</h1>
            </div>
            <div class="about_img">
                <img src="image/aboutimg.png" alt="自画像">
            </div>
            <div class="about_menu">
                <h2>3つの心</h2>
                <ul>
                    <li class="about_1">想い</li>
                    <li class="about_2">目的</li>
                    <li class="about_3">喜び</li>
                </ul>
            </div>
            <p>3つの心をデザインに蘇らせ
                お互いが幸せになれるWebデザイナーになりたいです。</p>
            <div class="about_link">
                <a href="#">詳しく見る</a>
            </div>
        </div>
    </section>

<!-- Contact -->   
    <section id="footer_contact">
        <h1>Contact</h1>
        <p>当ポートフォリオサイトにご訪問いただき、誠にありがとうございます。
            相談・ご不明な点等ございましたら、下記フォームをご入力の上、お気軽にお問い合わせください。
            3営業日以内にご連絡させていただきます。</p>
        <div class="contact_article">
            <form action="contact.php" method="post" name="contact_form">
                <label>貴社名</label>
                <input type="text">
                <label>お名前<span>必須</span></label>
                <input type="text">
                <label>メールアドレス<span>必須</span></label>
                <input type="text">
                <label>お問い合わせ<span>必須</span></label>
                <textarea name="message" placeholder="メッセージを入力"></textarea>
            </form>
            <div class="contact_submit">
            <input type="submit" value="内容を送信する">
            </div>
        </div>
    </section>

    <footer>
        <div class="footer_content">
            <nav class="nav_header">
                <ul>
                    <li><a href="#">Skill</a></li>
                    <li><a href="#">Works</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
            <p class="copy_right">@ SAAOU KAAAE</p>
        </div>
    </footer>
</body>
</html>

📖CSS

@charset 'utf-8';

/*モバイル版レスポンス記入場所
@media (max-width: 414px) {

}
*/


/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

img{
    max-width: 100%;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;  
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}



/*CSSコーディング*/
/*ヘッダーナビ*/
.container{
    display: flex;
    justify-content: space-between;
}

.wrapper{
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 4%;
}

.nav_header{
    margin-top: 35.6661px;
    display: flex;
    font-family: "Agenda", "Light";
    font-size: 20.82px;
}

.nav_header li{
    margin-left: 40px;
}

.nav_header a{
    color: #000;
    text-decoration: none;
}

.nav_header a:hover{
    color: #818181;
}

.site_logo{
    margin-top: 9.76px;
    margin-bottom: 9.76px;
    width: 90px;
    height: 75px;
}

/*背景：緑部のヘッダー画像*/
#home{
    background-color: #E1FFF0;
    min-height: 534px;
}

#home .home_header{
    text-transform: none;
}

.home_header{
    text-align: center;
}

.home_title{
    font-size: 72.5px;
    color: #000;
}

.sub_title{
    font-size: 43.5px;
    color: #000;
}

.sub_img{
    background-image: url(image/bird_footprints.png);
    background-position: 40% 50%;
    width: 90px;
    height: 75px;
}

.scroll_img{
    background-image: url(image/bird_footprints_scroll.png);
}

/*Contact_form*/
span{
    color: red;
}
RELATED POST