プログラミングの勉強 独学でも十分可能!codepenで勉強になるソースコードを見て学ぶ!

Programming

プログラミングの勉強 独学でも十分可能!コードペンで勉強になるソースコードを見て学ぶ!

最近はウェブサーフィンをしている時にお洒落なサイトを見つけると、ソースコードをコピーさせてもらって勉強するようにしています。

使っているエディターはchromeのアドオンで使えるwebmakerとcodepenの両方です。

codepenからもシンプルな造りのサイトを見つけると早速ソースコードをよく見て勉強します。

コピーさせていただいて改造してゆくようにします。

使う画像の入れ替えなどをしたり

テキストの変更やPタグ内の説明などを変更したり

hrefのurlを変更して外部サイト内部サイトのリンクを入れ替えたりすることによって

簡単に作り変えて行く事が出来ます。

cssを触ってサイトの構成も少し変更させたりしてオリジナリティを加える事によって自分好みのサイトに仕上げて行く事が出来るので楽しいですね。

参考サイトを少しいじって作ってみました。

img画像のURLを変更して使いたい画像に入れ替えました。

トップに出てくるメニューテキストの部分もカーソルを乗せたら少し色が薄くなるように

hover機能を付けてオパシティを0.5くらいにしてクリックがわかりやすいように変えました。

画像の変更をするだけで随分感じが変わってきます。

サイトに機能をつけてゆくのに時間がかかるので、すでに出来ているサイトの機能をそのまま使えるなら時間をどれだけ短縮できるか分かりません。

あとはコンテンツを充実させてゆくだけです。

小さなカフェサイトなら短時間で仕上げることも可能かと思います。

今回のサイトはペラサイトなので1ページのサイトから成り立っています。

応用すればいろんなペラサイトを増産してゆくことができます。

お試しでいじったのでまだ完全には出来上がっていませんが

完成したらインデックスして正式なウェブサイトにしてゆきたいと思っています。それではまた( ´∀`)つ

下記のソースコードで作ったサンプルサイト

サンプルサイト
サンプルカフェのサイト
<DOCKTYPE html>
    <html lang="ja">
    <head>
        <meta charset="utf-8">
  <title>cafesite test1</title>
  <link rel="stylesheet" href="css/style.css">

    </head>
    <body>
<nav class="standard">
    <a href="#home">Home</a>
    <a href="#services">Services</a>
    <span class="brand"><sup>THE Fashionable</sup> <span class="brand-big">CAFE</span></span>
    <a href="#coffee">Menu</a>
    <a href="#contact">Contact</a>
</nav>

<nav class="mobile">
    <div id="myNav" class="overlay">
        <button class="close-burger">
            <div class="bar1"></div>
            <div class="bar2"></div>
        </button>
        <div class="overlay-content">
            <a href="#home">Home</a>
            <a href="#services">Services</a>
            <a href="#coffee">Menu</a>
            <a href="#contact">Contact</a>
        </div>
    </div>
    <button class="open-burger">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
    </button><span class="brand"><sup>THE Fashionable</sup> <span class="brand-big">CAFE</span></span>
</nav>

<section id="home">
    <div class="hero">
        <img src="https://lh3.googleusercontent.com/1eXeHluGFi2XJgf9bMRATwisBn0tKhiujB8Sts4q4vP5HhvgFuPJqj-M_iJU9tmnO__gCF1WrIUs5hMUSGpYeHXedOm1UfQGThZTqGhups_3LYMfkIXY6VnzxHxGvLyRePa2I9aqCp-Vk6nM5UH2OIK0WHEsChqTo2iLjpSP7fkuP3585zbhaZ8p8rGUQnTRxZM5a5Bn36osidE2O4W2hTT-_OqMv4RGUFjn4EoKqtOmnqWpNiPgCNpenJo8--v0mYG51JOUZaBCam94K3eD5Hn58l7S5k_FS9eAdlxswVTwvcgqOnQoVBDp5oTzaJ4yiGqOBNP2Eee35jEZYzXd4mJiCl0vQNRNPEQtPevdSCSMxisniNEldf83mL2wyZ_pjZPrLCwH0EcydEu72TlFHHWdpPNGglGCsCEhDDL_9W6J6dQPlZ2-nP6NEQ8-hmuhsKXpnwo_DmrTHQXMIY1sFNUB3OVgNeWJ6WLDbxpGNoOCcHFfbziowpg-MKHFLmWWKXbVDrugA7frZDuEBefm2WuHoPgrAL52VO6XhEUdG4eh2VQ4aeYYebXzHJRjerwE5aPD_fW8Lh_3UxtoZrOSaNiAqWl1u4E9pwHJSruhvCLyMcnLAaJbAZCqPySIgZIlaSyLFTaZrimQOMmlQ2APLPhtvuD3EyY=w330-h220-no" alt="Food Truck">
        <!-- <img src="https://images.unsplash.com/reserve/DHHQbqc0RrWVf0uDNe5E_The%20Litte%20Cafe.jpg?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d4591eff1426062d1de177fdef2bfb35&auto=format&fit=crop&w=2378&q=80" alt="Food Truck"> -->

    </div>
    <section class="socials-bar">
        <div class="myrow-halves">
            <div class="mycol">
                <p><a href="http://toshilog.site">http://toshilog.site</a><p>
            </div>
            <div class="mycol">
                <p>
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-snapchat"></i></a>
                </p>
            </div>
        </div>
    </section>
</section>

<main>
    <div class="services-wrapper">
        <section id="services">
            <div class="myrow">
                <div class="mycol">
                    <header>
                        <h1>What we offer</h1>
                    </header>
                </div>
            </div>
            <div class="myrow-thirds">
                <div class="mycol">
                    <i class="fas fa-utensils"></i>
                    <header>
                        <h2>Delicious coffee</h2>
                    </header>
                    <p>The arabica coffee beans have a good time with taste and aroma.</p>
                </div>
                <div class="mycol">
                    <i class="fas fa-truck"></i>
                    <header>
                        <h2>Cozy space</h2>
                    </header>
                    <p>We will create a cozy space. It's a relaxing space that you will always want.</p>
                </div>
                <div class="mycol">
                    <i class="far fa-calendar-alt"></i>
                    <header>
                        <h2>Quiet music</h2>
                    </header>
                    <p>The music that flows quietly helps you concentrate on your ears and think about things.</p>
                </div>
            </div>
            <div class="myrow cta">
                <div class="mycol">
                    <button type="button">Get a consult</button>
                </div>
            </div>
        </section>
    </div>

    <div class="coffee-wrapper">
        <section id="coffee">
            <div class="myrow">
                <div class="mycol menu">
                    <h1 class="title">Our Coffee</h1>
                </div>
            </div>

            <div class="myrow-halves">
                <div class="mycol menu menu-left">
                    <i class="fas fa-fire"></i>
                    <h2>Hot</h2>
                    <h3>Latte</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <h6>3.5</h6>
                    <h3>Caramel Macchiato</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <h6>4.5</h6>
                    <h3>Cappucino</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <h6>2.5</h6>
                </div>

                <div class="mycol menu menu-right">
                    <i class="far fa-snowflake"></i>
                    <h2>Iced</h2>
                    <h3>Iced Coffee with Milk</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <h6>1.5</h6>
                    <h3>Iced Espresso Classic</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <h6>1.5</h6>
                    <h3>Iced Coffee</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <h6>.75</h6>
                </div>
            </div>
        </section>
    </div>

    <section id="contact">
        <div class="container">
            <form action="action_page.php">

                <input type="text" id="fname" name="firstname" placeholder="First name">

                <input type="text" id="lname" name="lastname" placeholder="Last name">

                <textarea id="subject" name="subject" placeholder="Message" style="height:200px"></textarea>

                <input type="submit" value="Submit">

            </form>
        </div>
    </section>

</main>

<footer>
    <div class="myrow-halves">
        <div class="mycol">
            <a href="#">About</a>
            <a href="#">Services</a>
            <a href="#">Clients</a>
            <a href="#">Contact</a>
        </div>
        <div class="mycol">
            <a href="#"><i class="fab fa-facebook-f"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
            <a href="#"><i class="fab fa-snapchat"></i></a>
        </div>
    </div>
    <div class="myrow">
        <div class="mycol">
            <p>Copy <i class="far fa-copyright"></i> 2018 | made by me <i class="far fa-smile"></i></p>
        </div>
    </div>
</footer>
</body>
</html>



Resources
/*
==================================================
Base Styles
font-family: 'Source Serif Pro', serif;
font-family: 'Source Sans Pro', sans-serif;
==================================================
*/

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

*:focus {
    outline: none;
}

ul {
    list-style: none;
}

li {
    display: inline;
}

a {
    text-decoration: none;
    color: #222;
}

.svg-inline--fa.fa-circle {
    font-size: 1.2em;
    color: ;
}

body {
    letter-spacing: 1px;
    line-height: 1.6em;
    padding-top: 88px;
    font-family: "Source Sans Pro", sans-serif;
}

p:hover {
   opacity: 0.5;
}
.cta button {
    border: none;
    border-radius: 4px;
    padding: 18px 25px;
    transition: all 0.35s;
    cursor: pointer;
    background: #424b59;
    text-transform: uppercase;
    font-weight: bold;
    color: #fdfaf5;
}

.cta button:hover,
#about button:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Source Serif Pro", serif;
}

/*
==================================================
Navigation menus
==================================================
*/

/* **********
MOBILE MENU
********** */

/* Burger Buttons */

.mobile {
    position: relative;
    width: 100%;
    top: 0;
    z-index: 1;
    display: none;
}

.open-burger,
.close-burger {
    background: transparent;
    outline: none;
    border: none;
    padding: 25px;
}

.open-burger:hover {
    cursor: pointer;
}

.overlay .close-burger {
    position: absolute;
    top: 20px;
    right: 45px;
    cursor: pointer;
}

.open-burger .bar1,
.open-burger .bar2,
.open-burger .bar3,
.close-burger .bar1,
.close-burger .bar2 {
    width: 35px;
    height: 4px;
    background-color: #222;
    border-radius: 2px;
    margin: 4px 0;
    transition: 0.4s;
}

.close-burger .bar1 {
    -webkit-transform: rotate(-45deg) translate(-3px, 2.5px);
    transform: rotate(-45deg) translate(-3px, 2.5px);
    background: #e00049;
}

.close-burger .bar2 {
    -webkit-transform: rotate(45deg) translate(-3px, -3px);
    transform: rotate(45deg) translate(-3px, -3px);
    background: #e00049;
}

/* Overlay and menu */

.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover,
.overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

/* **********
STANDARD MENU
********** */
.standard a:hover {
   opacity: 0.5;
}
.brand-big:hover {
   opacity: 0.5;
}
.brand:hover {
   opacity: 0.5;
}

.standard {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 30px 10px;
    display: flex;
    justify-content: space-around;
    background: #3d4553;
    z-index: 1;

}

.standard a {
    color: #aaa;
    text-transform: uppercase;
    font-size: 0.875em;
    font-weight: bold;
}

.brand-big {
    font-size: 1.5em;
}

.brand {
    font-family: "Source Serif Pro", serif;
    color: #fdfaf5;
    font-weight: 600;
}

sup {
    text-decoration: underline;
}

#services,
#coffee {
    margin: 0 auto;
    padding: 100px 0;
    max-width: 1024px;
}

/*
==================================================
Main
==================================================
*/

main {
    padding: 0px 0px;
    margin: 0 auto;
}

/*
==================================================
Hero
==================================================
*/

/* .hero {
    position: relative;
} */

.hero img {
    width: 100%;
    height: auto;
}

.hero-title {
    position: absolute;
    width: 100%;
    top: 25%;
    text-align: center;
}

.socials-bar {
    text-align: center;
    background: #4c5461;
    padding: 10px 0;
    margin-top: -7px;
    color: #fdfaf5;
    letter-spacing: 1px;
}

.socials-bar a {
    padding: 0 20px;
    color: #fdfaf5;
}

/*
==================================================
Services
==================================================
*/

.services-wrapper {
    background: #fdfaf5;
}

#services {
    text-align: center;
    color: #6c6662;
    margin: 0 auto;
}

#services .svg-inline--fa {
    font-size: 4em;
    margin-bottom: 30px;
    color: #d3dcd8;
}

#services header h1 {
    margin-bottom: 50px;
    color: #424b59;
    font-size: 3.5em;
}

#services h2 {
    text-transform: uppercase;
    color: #b75922;
}

.cta {
    text-align: center;
}

/*
==================================================
Coffee
==================================================
*/

.mycol.menu {
    padding-top: 40px;
    text-align: center;
    font-family: "Source Serif Pro", serif;
}

.menu-left {
    background: #3d4553;
    padding-top: 40px;
}

.menu-right {
    background: #4c5461;
    padding-top: 40px;
}

.coffee-wrapper {
    background: #424b59;
    color: #444;
}

.coffee-wrapper img {
    width: 100%;
    height: auto;
}

#coffee .svg-inline--fa {
    color: #f4e4cb;
    font-size: 3.5em;
}

#coffee h1 {
    text-align: center;
    font-size: 3.5em;
    color: #fff;
    paddin-bottom: 10px;
}

#coffee h2 {
    color: #f4e4cb;
    font-size: 2.5em;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.4em;
    border-bottom: 1px dotted #afb1b5;
    padding-bottom: 10px;
}

#coffee h3 {
    color: #fff;
    text-transform: uppercase;
}

#coffee h6 {
    color: #ae725d;
    font-size: 1em;
}

#coffee p {
    font-style: italic;
    color: #afb1b5;
}

/*
==================================================
Contact
==================================================
*/

form {
    max-width: 65%;
    margin: 0 auto;
}

input[type="text"],
select,
textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(55, 60, 76, 0.2);
    border-radius: 4px;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
    background: rgba(55, 60, 76, 0.5);
    color: #fdfaf5;
}

input::placeholder,
textarea::placeholder {
    color: #fdfaf5;
    font-weight: 600;
}

input[type="submit"] {
    background-color: #424b59;
    color: #fdfaf5;
    text-transform: uppercase;
    font-weight: bold;
    padding: 12px 30px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: #8d8476;
    color: #e6d8c2;
}

.container {
    background-color: #fdfaf5;
    background: url("https://images.unsplash.com/photo-1459755486867-b55449bb39ff?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a8783669407d5e482c4d41adbb3f5fbd&auto=format&fit=crop&w=2098&q=80")no-repeat
        center;
    background-size: cover;
    padding: 50px;
}

/*
==================================================
Footer
==================================================
*/

footer {
    text-align: center;
    background-color: #fdfaf5;
    padding: 20px;
}

footer a {
    padding-right: 10px;
}

footer p {
    font-size: 0.75em;
}

footer .svg-inline--fa {
    font-size: 1em;
}

footer .myrow {
    margin: 0;
}

/*
==================================================
Grid Layout
==================================================
*/

.myrow {
    display: flex;
    margin: 0 0 20px 0;
}

.mycol {
    padding: 20px;
}

.myrow .mycol {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.myrow-halves,
.myrow-thirds,
.myrow-fourths {
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.myrow-halves .mycol {
    width: 49%;
}

.myrow-thirds .mycol {
    width: 32%;
}

.myrow-fourths .mycol {
    width: 24%;
}

/*
==================================================
Media Queries
==================================================
*/

@media (max-width: 800px) {
    .standard {
        display: none;
    }

    form {
        max-width: 100%;
    }

    .container {
        padding: 100px 50px;
    }

    .socials-bar .mycol {
        margin: 0;
        padding: 0;
    }

    body {
        padding-top: 78px;
    }

    .mobile {
        display: flex;
        width: 100%;
        justify-content: space-between;
        position: fixed;
        background: #fdfaf5;
        box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.2);
    }

    .brand {
        padding: 30px 20px 0 0;
        color: #000;
    }

    #services {
        max-width: 70%;
    }

    #services h1 {
        line-height: 1.4em;
    }

    .myrow,
    .myrow-halves,
    .myrow-thirds,
    .myrow-fourths {
        display: block;
    }

    .myrow .mycol,
    .myrow-halves .mycol,
    .myrow-thirds .mycol,
    .myrow-fourths .mycol {
        width: 100%;
        margin: 0 0 10px 0;
    }
}

@media screen and (max-height: 450px) {
    .overlay a {
        font-size: 20px;
    }
    .overlay .close-burger {
        top: 15px;
        right: 35px;
    }
}



Resources
/*
=======================================
Mobile menu functionality
=======================================
*/

$(".open-burger").on("click", function() {
    $("#myNav").css("width", "100%");
});

$(".close-burger").on("click", function() {
    $("#myNav").css("width", "0%");
});

/*
=======================================
Scroll to anchor id's
=======================================
*/

// Select all links with hashes

$('a[href*="#"]')
    // Remove links that don't actually link to anything
    .not('[href="#"]')
    .not('[href="#0"]')
    .click(function(event) {
        // On-page links
        if (
            location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") &&
            location.hostname == this.hostname
        ) {
            // Figure out element to scroll to
            var target = $(this.hash);
            target = target.length ? target : $("[name=" + this.hash.slice(1) + "]");
            // Does a scroll target exist?
            if (target.length) {
                // Only prevent default if animation is actually gonna happen
                event.preventDefault();
                $("html, body").animate(
                    {
                        scrollTop: target.offset().top
                    },
                    1000,
                    function() {
                        // Callback after animation
                        // Must change focus!
                        var $target = $(target);
                        $target.focus();
                        if ($target.is(":focus")) {
                            // Checking if the target was focused
                            return false;
                        } else {
                            $target.attr("tabindex", "-1"); // Adding tabindex for elements not focusable
                            $target.focus(); // Set focus again
                        }
                    }
                );
            }
        }
    });



Resources

コメント

Translate »