Uncategorized

8月25,26日(勉強27,28日目)

 

📖勉強24,25日目

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

　今日はSkillとWorksのコンテンツ部分をコーディングしました😊
本日のソースコードを載せておきますので、時間がある方はご覧ください！

次回は、Worksの中の作品をクリックときに、作品がポップアップ表示されるコードを書いていきます！！
8月中にポートフォリオサイト絶対完成させるぞ～！！！

<>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 rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300&family=Zen+Maru+Gothic:wght@300;400&display=swap" rel="stylesheet">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&family=Zen+Maru+Gothic:wght@300;400&display=swap" rel="stylesheet">

    <link rel="icon" type="image/png" href="image/favicon.png">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="home_img" class="home_back">
        <!-- 鳥のロゴとヘッダーメニュー -->
        <header class="container">
            <div class="site_logo">
                <a href="#top">
                    <img src="image/site_logo.png" alt="サイトロゴ">
                </a>
            </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 class="home">
            <h2 class="home_title">SAAOU KAAAE</h2>
            <br>
            <p class="sub_title sub_emphasis sub_img">全ての想いを届けます</p>
            <div>
                <p class="home_scroll scroll_emphasis scroll_img">Scroll</p>
            </div>
        </div>
    </div>

 <!-- Skill -->
    <section id="main_header">
        <section id="skill_sct" class="ex">
            <h2 class="tit1">Skill</h2>
            <div class="block1">
                <div class="box1">
                    <h3 class="tit2">マーケティング</h3>
                    <p class="icon">
                        <img src="image/marketing.png" alt="マーケティング">
                    </p>
                    <p class="text1">
                        YouTubeを複数運用していた経験から
                        お客様視点を大事にして、目的達成に
                        導きます。特に設計を重視し、ターゲ
                        ットの行動を細かく意識したペルソナ
                        設定を心掛けています。
                    </p>
                </div>
            
                <div class="box1">
                    <h3 class="tit2">Webサイトデザイン</h3>
                    <p class="icon">
                        <img src="image/design.png" alt="Webサイトデザイン">
                    </p>
                    <p class="text1">
                        デザインの本来の意味を理解して、作
                        成します。お客様の要望・目的達成は
                        もちろんのこと、使う人・見る人全て
                        を意識したデザインにします。
                    </p>
                </div>
            
                <div class="box1">
                    <h3 class="tit2">コーディング</h3>
                    <p class="icon">
                        <img src="image/coating.png" alt="コーディング">
                    </p>
                    <p class="text1">
                        パソコン、スマートフォンの両方に対
                        応したコーディングをします。HTML
                        /CSSを使用したコーディングに加え、
                        JavaScriptで動きのあるサイトのコー
                        ディングも行います。
                    </p>
                </div>
            </div>
        </section>

        <!-- Works -->   
        <section id="work_sct">
            <h2 class="tit1 tit_top">Works</h2>
            <section id="works_section">
                <div class="sct1">
                    <div class="works_img1 img1_r">
                        <img src="image/works1.PNG" alt="Webサイト">
                    </div>
                    <div class="works_img1">
                        <img src="image/works2.png" alt="バナー">
                    </div>
                </div>
                <div class="sct2">
                    <div class="works_img2 img2_b">
                        <img src="image/works3.png" alt="バナー">
                    </div>
                    <div class="works_img2">
                        <img src="image/works4.png" alt="ヘッダー">
                    </div>
                </div>
            </section>
        </section>

        <!-- About -->
        <section>
            <h2 class="tit1">About</h2>
            <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>
        </section>
            
        <!-- Contact -->   
        <section id="footer_contact">
            <h2 class="tit1">Contact</h2>
            <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>
    </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 screen and (min-width:768px){
    .block1{
      flex-direction: row;
    }
  
    .box1{
      padding: 0;
    }
}


/*
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;
}

p{
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}


/*CSSコーディング*/
/*ヘッダーナビ*/
.container{
    display: flex;
    justify-content: space-between;
    background-color: #ffffff;
    width: 100%;
    padding: 0 46px;
    align-items: center;
    top: 0;
    left: 0;
    box-sizing: border-box;
}


.nav_header{
    display: flex;
    font-family: 'Roboto', sans-serif;
    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_img{
    background-image: url(image/background.png);
    min-height: 100vh;
    width: 100%;
}

.home_back{
    background-size: cover;
    background-position: center;
}

.home{
    text-align: center;
    margin-top: 300px;
}

.home_title{
    font-family: 'Roboto', sans-serif;
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 81px;
    color: #000;
    text-transform: uppercase;
    font-weight: 500;
    margin: 0;
    padding: 0;
    letter-spacing: normal;
}

.sub_title{
    font-size: 43.5px;
    color: #000;
    margin-top: 0;
    padding-top: 25px;
    padding-bottom: 20px;
    padding-right: 95px;
    font-family: 'Roboto', sans-serif;
    font-family: 'Zen Maru Gothic', sans-serif;
    font-weight: 500;
}

.sub_emphasis{
    background-repeat: no-repeat;
    display: inline-block;
}

.sub_img{
    background-image: url(image/bird_footprints3.png);
    background-position: 430px -5px;
}

.home_scroll{
    font-size: 11px;
    position: absolute;
    bottom: 5px;
    padding-bottom: 38px;
    font-family: 'Roboto', sans-serif;
}

.scroll_emphasis{
    display: inline-block;
    background-repeat: no-repeat;
}

.scroll_img{
    background-image: url(image/bird_footprints_scroll.png);
    background-position: 10px 15px;
}



/*Skill*/
#main_header h2.tit1{
    margin-top: 150px;
    margin-bottom: 90px;
    text-align: center;
    font-size: 68px;
    line-height: 1;
    font-weight: 300;
    font-family: 'Roboto', sans-serif;
    font-family: 'Zen Maru Gothic', sans-serif;
}

#main_header h3.tit2{
    font-size: 20px;
    text-align: center;
    letter-spacing: 0.3rem;
    margin-bottom: 50px;
    font-family: 'Roboto', sans-serif;
    font-family: 'Zen Maru Gothic', sans-serif;
}

.icon{
    margin-right: 10px;
    width: 290px;
    height: 290px;
    object-fit: cover;
}

.ex{
    max-width: 850px;
    margin: auto;
}
  
.block1{
    display: flex;
    justify-content: space-around;
    gap: 0 7.8rem;
    flex-direction: row;
    flex-wrap: nowrap;
}
  
.box1{
    text-align: left;
    padding: 0 0 3rem;
    display: flex;
    flex-direction: column;
}

.text1{
    line-height: 20px;
    letter-spacing: 2px;
    font-family: 'Roboto', sans-serif;
    font-family: 'Zen Maru Gothic', sans-serif;
}



/* works */
#main_header h2.tit_top{
    margin-top: 50px;
}

.works_img1{
    width: 200px;
}

.works_img1 img{
    width: 100%;
}

.works_img2{
    width: 465px;
}

.works_img2 img{
    width: 100%;
}

.sct1{
    display: flex;
    margin: 0 100.0552px;
}

.sct2{
    margin-right: 100.0552px;
}

.img1_r{
    padding-right: 100.0552px;
}

#works_section{
    display: flex;
    justify-content: center;
}

.img2_b{
    padding-bottom: 100.0552px;
}

/* about */
#tit2{
    margin: auto;
}
RELATED POST