WePuri


ログイン

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

無料登録

001.ギャラリーパーツ

サンプルファイル

サンプルコード

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_001">
        <header>
            <h2 class="ttl">
                <span>Programming online school</span>
                プログラミング・<i>オンライン</i>スクール
            </h2>
        </header>
        <div class="conts">
            <!-- 左 -->
            <div class="left">
                <div class="image">
                    <img src="./image/01.jpg">
                    <div class="ttl">ABC</div>
                </div>
                <div class="image">
                    <img src="./image/02.jpg">
                    <div class="ttl">ABC</div>
                </div>
                <div class="image">
                    <img src="./image/03.jpg">
                    <div class="ttl">ABC</div>
                </div>
            </div>
            <!-- 右 -->
            <div class="right">
                <div class="image">
                    <img src="./image/01.jpg">
                    <div class="ttl">ABC</div>
                </div>
                <div class="image">
                    <img src="./image/02.jpg">
                    <div class="ttl">ABC</div>
                </div>
                <div class="image">
                    <img src="./image/03.jpg">
                    <div class="ttl">ABC</div>
                </div>
            </div>
        </div>
    </article>
</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_001{
    padding: 100px 40px;
    @media (max-width:500px) {
        padding: 30px 10px;
    }
    header{
        margin-bottom: 60px;
        @media (max-width:500px) {
            margin-bottom: 30px;
        }
        .ttl{
            text-align: center;
            font-size: 30px;
            @media (max-width:750px) {
                font-size: 25px;
            }
            @media (max-width:600px) {
                font-size: 20px;
            }
            @media (max-width:500px) {
                font-size: 16px;
            }
            span{
                margin-bottom: 10px;
                font-size: 11px;
                display: block;
            }
            i{
                color: #E3529A;
            }
        }
    }
    .conts{
        margin: 0 auto;
        max-width: 1200px;
        display: grid;
        grid-template-columns: repeat(2 , 1fr);
        gap:20px;
        @media (max-width:850px) {
            gap:10px;
        }
        @media (max-width:800px) {
            grid-template-columns: repeat(1 , 1fr);
        }
        .left,.right{
            display: grid;
            grid-template-columns: repeat(2 , 1fr);
            gap:20px;
            @media (max-width:850px) {
                gap:10px;
            }
            .image{
                position: relative;
                width: 100%;
                height: auto;
                &::before{
                    padding-top: 65%;
                    content:"";
                    display: block;
                }
                img{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%; 
                }
                &::after{
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 1;
                    width: 100%;
                    height: 100%;
                    content:"";
                    display: block;
                    background: #000;
                    opacity: .3;
                }
                .ttl{
                    position:absolute;
                    top: 0;
                    left: 0;
                    z-index: 10;
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #fff;
                    @media (max-width:500px) {
                        font-size: 11px;
                    }
                }
            }
            
        }
        .left{
            .image{
                &:nth-of-type(3){
                    grid-column: 1 / 3;
                    grid-row: 2 / 3;
                    .ttl{
                        font-size: 30px;
                        @media (max-width:500px) {
                            font-size: 16px;
                        }
                    }
                }
            }
        }
        .right{
            .image{
                &:nth-of-type(1){
                    grid-column: 1 / 3;
                    grid-row: 1 / 2;
                    .ttl{
                        font-size: 30px;
                        @media (max-width:500px) {
                            font-size: 16px;
                        }
                    }
                }
            }
        }
    }
}