WePuri


ログイン

パスワードを忘れた方はこちらから

無料登録

002.画像付きコンテンツ

サンプルファイル

サンプルコード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live_parts_001</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100&display=swap" rel="stylesheet">
</head>
<body>

    <article class="live_patrs_002">
        <header><h2 class="ttl"><i>プログラミング</i>で未来を変える!<span>Change the future!</span></h2></header>
        <div class="conts">
            <section class="cont">
                <div class="left">
                    <div class="in">
                        <h3 class="ttl">タイトルテキスト</h3>
                        <p>テキストテキストテキストテキテキテテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキテキテテキストテキストテキストテキストテキストテキスト</p>
                    </div>
                </div>
                <div class="right"><img src="./image/01.jpg"></div>
            </section>
            <section class="cont">
                <div class="left">
                    <div class="in">
                        <h3 class="ttl">タイトルテキスト</h3>
                        <p>テキストテキストテキストテキストテキストテキストテキストテキテキテテキストテキストテキストテキストテキストテキストテキストテキテキテテキストテキストテキストテキストテキストテキストテキストテキテキテテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキテキテテキストテキストテキストテキストテキストテキスト</p>
                    </div>
                </div>
                <div class="right"><img src="./image/01.jpg"></div>
            </section>
            <section class="cont">
                <div class="left">
                    <div class="in">
                        <h3 class="ttl">タイトルテキスト</h3>
                        <p>テキストテキストテキストテキストテキストテキストテキストテキテキテテキストテキストテキストテキスキストテキストテキストテキテキテテキストテキストテキストテキストテキストテキスキストテキストテキストテキテキテテキストテキストテキストテキストテキストテキスキストテキストテキストテキテキテテキストテキストテキストテキストテキストテキスキストテキストテキストテキテキテテキストテキストテキストテキストテキストテキスキストテキストテキストテキテキテテキストテキストテキストテキストテキストテキストテキストテキストテキストテキテキテテキストテキストテキストテキストテキストテキストテキストテキテキテテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキテキテテキストテキストテキストテキストテキストテキスト</p>
                    </div>
                </div>
                <div class="right"><img src="./image/01.jpg"></div>
            </section>
            <section class="cont">
                <div class="left">
                    <div class="in">
                        <h3 class="ttl">タイトルテキスト</h3>
                        <p>テキストテキストテキストテキストテキストテキストテキストテキテキテテキストテキストテキストテキストテキストテキストテキストテキテキテテキストテキストテキストテキストテキストテキストテキストテキテキテテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキテキテテキストテキストテキストテキストテキストテキスト</p>
                    </div>
                </div>
                <div class="right"><img src="./image/01.jpg"></div>
            </section>

        </div>
        
    </article>



    <script src="./js/base.js"></script>
</body>
</html>

reset.scss

/* ----------------------------------------------------------------------
 reset css
---------------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
body {
    -webkit-text-size-adjust: 100%;
    line-height: 1;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}
/*box-sizingを全ブラウザに対応*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
/*画像を縦に並べた時に余白が出ないように*/
img {
    vertical-align: top;
    font-size: 0;
    line-height: 0;
    font-family: 'object-fit: cover;';
}
/*縦方向の揃え位置を中央揃えに指定しています*/
input, select {
    vertical-align:middle;
}

/*水平罫線のデフォルトである立体的な罫線を見えなくしています*/
hr {
    display:block;
    height:1px;
    border:0;  
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
/*a要素のフォントサイズなどをリセットしフォントの縦方向の揃え位置を親要素のベースラインに揃えるようにしています*/
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    text-decoration: none;
}
/*IEではデフォルトで点線を下線表示する設定ではないので、下線がつくようにしています
また、マウスオーバー時にヘルプカーソルの表示が出るようにしています*/
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
/* ----------------------------------------------------------------------
 font-family フォントスタイルの調整
---------------------------------------------------------------------- */
body {
    font-family:'Noto Sans JP', -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
}

style.scss

.live_patrs_002{
    padding: 100px 40px;
    @media (max-width:900px) {
        padding: 100px 0;
    }
    background: #EFF8FF;
    color: #333;
    header{
        margin-bottom: 60px;
        .ttl{
            font-size:40px;
            text-align: center;
            line-height: 1.5em;
            @media (max-width:950px) {
                font-size:33px;
            }
            @media (max-width:750px) {
                font-size:28px;
            }
            @media (max-width:500px) {
                font-size:23px;
            }
            span{
                margin-top: 10px;
                display: block;
                font-size: 14px;
                color: #286884;
                line-height: 1.5em;
            }
            i{
                color: #286884;
            }
        }
    }
    .conts{
        margin: 0 auto;
        max-width: 1200px;
        .cont{
            margin-bottom: 100px;
            position: relative;
            display: grid;
            grid-template-columns: repeat(2 , 1fr );
            @media (max-width:900px) {
                grid-template-columns: repeat(1 , 1fr );
            }
            .left{
                position: relative;
                z-index: 10;
                padding: 30px 20px 30px 0;
                @media (max-width:900px) {
                    margin-top: -50px;
                    padding: 0 20px 30px 20px !important;
                }
                .in{
                    padding: 60px;
                    height: 100%;
                    min-height: 350px;
                    display: flex;
                    align-content: center;
                    flex-wrap: wrap;
                    background: #fff;
                    @media (max-width:900px) {
                        min-height: 200px;
                    }
                    @media (max-width:500px) {
                        padding: 40px;
                    }
                    .ttl{
                        margin-bottom: 5px;
                        width: 100%;
                        font-size: 28px;
                        line-height: 1.5em;
                        color: #286884;
                        @media (max-width:950px) {
                            margin-bottom: 10px;
                        }
                        @media (max-width:750px) {
                            font-size: 22px;
                        }
                        @media (max-width:500px) {
                            font-size: 18px;
                        }
                    }
                    p{
                        font-size: 14px;
                        line-height: 2em;
                        @media (max-width:950px) {
                            line-height: 2.5em;
                        }
                        @media (max-width:500px) {
                            font-size: 12px;
                        }
                    }
                }
            }
            .right{
                position: relative;
                @media (max-width:900px) {
                    grid-column: 1 / 2;
                    grid-row: 1 /1;
                    height: 50vw;
                }
                img{
                    position: absolute;
                    top: 0;
                    left: -50px;
                    width: calc(100% + 50px);
                    height: 100%;
                    object-fit: cover;
                    @media (max-width:900px) {
                        position: static;
                        width: 100%;
                    }
                }
            }
            &:nth-of-type(even){
                .left{
                    padding: 30px 0 30px 20px;
                }
                .right{
                    grid-column: 1 / 2;
                    grid-row: 1 /1;
                    img{
                        left: 0;
                    }
                }
            }
        }
    }
}