NINA

information

spanで太字
markでマーカー
strongで重要事項
セクション内リンク
 class="link"

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta dolores quae natus est aliquid ex mollitia iusto ad consequuntur error maiores eum quod unde quidem, sit ipsa eius fugiat perspiciatis?

Main contents

記述リスト: テキスト
リンク: テキスト

Source code

Title by Suisei.
テンプレート公開 2019/07/05
横幅1024px以上で2カラム

/* Template & Designed by Towako. */
/* https://ninawas.me */

/* ウェブフォントの読み込み */
@import url('https://fonts.googleapis.com/css?family=EB+Garamond|Noto+Serif+JP&display=swap');

@font-face {
    font-family: 'はれのそら明朝';
    font-display: swap;
    src: url('https://cdn.leafscape.be/Harenosora/harenosora_web.woff2') format("woff2");
}

/*-------------------------------------------------
このフォントはIPAフォントライセンスv1.0の下で提供されています。
http://ipafont.ipa.go.jp/ipa_font_license_v1.html
オリジナルのフォントは以下から取得できます。
<blockquote class="wp-embedded-content" data-secret="Zcpa0mdkdz"><a href="https://fontopo.com/?p=377">はれのそら明朝</a></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" src="https://fontopo.com/?p=377&embed=true#?secret=Zcpa0mdkdz" data-secret="Zcpa0mdkdz" width="500" height="282" title="“はれのそら明朝” — fontopo" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
http://ipafont.ipa.go.jp/
-------------------------------------------------*/

/* 全体に適用する */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-weight: normal;
    font-family: 'Noto Serif JP', serif;
}

/* リンク */
a {
    transition: background 0.5s;
    color: #000;
}

/* ホバー */
a:hover {
    background-color: #f4f5f9;
}

/* 基本設定 */
body {
    text-align: center;
    background-color: #fff;
    line-height: 1.7;
    letter-spacing: 0.1em;
    font-size: 13px;
    color: #000;
}

/* ヘッダー */
header {
    position: relative;
    margin: 15vh auto;
    width: 70%;
}

/* 線 */
header::before,
header::after {
    position: absolute;
    content: '';
    display: block;
    width: 50px;
    height: 50px;
}

header::before {
    top: -2.5em;
    left: -2.5em;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
}

header::after {
    bottom: -2.5em;
    right: -2.5em;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
}

/* 画像サイズ */
header img {
    width: 100%;
}

/* 見出し */
header h1 {
    margin: 1.5em auto;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    text-shadow: 2px 2px 3px #c0c0c0;
    font-size: 1.5em;
}

/* フォントの指定 */
header h1,
nav ul li a,
aside,
section h2,
footer,
footer a {
    font-family: 'EB Garamond', 'はれのそら明朝', serif;
}

/* ナビゲーション */
nav ul {
    list-style-type: none;
}

nav ul li {
    display: inline-block;
}

nav ul li a {
    margin: 0 0.5em;
}

/* 補足情報 */
aside {
    margin: 1.5em auto;
    font-size: 11px;
}

/* セクション */
section {
    margin: 3em auto 0;
    padding: 3em;
    position: relative;
    text-align: justify;
    word-break: break-all;
}

/* 見出し */
section h2 {
    position: absolute;
    top: 0;
    left: 1em;
    transform: rotate(-15deg);
}

/* セクション内共通 */
section span,
section strong {
    font-weight: bold;
}

section mark {
    background: linear-gradient(transparent 70%, #f4f5f9 30%);
}

section strong {
    color: red;
}

/* リスト系 */
section dl,
section ul {
    margin: 1em auto 1.5em;
}

section dd {
    margin-left: 1em;
}

section ul {
    list-style-type: none;
}

section ul li a {
    margin-left: 1em;
}

/* リンク */
.link {
    display: inline-block;
    margin: 0.2em auto;
    padding: 0.2em 0.5em;
    text-decoration: none;
    border: 1px solid #000;
}

/* 余白 */
p,
footer {
    margin: 1em auto 1.5em;
}

/* フォーム系 */
textarea,
input[type] {
    -webkit-appearance: none;
    padding: 0.2em 0.5em;
    background-color: #f4f5f9;
    border: none;
    border-radius: 0;
}

textarea {
    width: 280px;
    height: 200px;
}

input[type=text] {
    width: 80px;
}

input[type=submit] {
    width: auto;
}

/* 横幅768px以上で読み込む */
@media screen and (min-width:768px) {
    body {
        font-size: 14px;
    }
}

/* 横幅1024px以上で読み込む */
@media screen and (min-width:1024px) {
    #wrap {
        margin: 5em auto 0;
        max-width: 900px
    }

#wrap::after {
        display: block;
        content: '';
        clear: both;
    }

header {
        margin: 3em auto;
        width: 30%;
        float: left;
    }

main {
        margin: 0 auto;
        overflow: hidden;
        width: 60%;
    }
}
</style>

<div id="wrap">
    <header>
        <img src="画像URL">
        <h1>タイトル</h1>
        <nav>
            <ul>
                <li><a href="#info">information</a></li>
                <li><a href="#main">contents</a></li>
                <li><a href="#code">source code</a></li>
            </ul>
        </nav>
        <aside>http://asa.xxx.xxx<br>thank you 12345 hits.</aside>
    </header>
    <main>
        <section id="info">
            <h2>information</h2>
            <p>
                <span>spanで太字</span><br>
                <mark>markでマーカー</mark><br>
                <strong>strongで重要事項</strong><br>
                <a href="#">セクション内リンク</a><br>
                <a href="#" class="link">class="link"</a>
            </p>
        </section>
        <section id="main">
            <h2>Main contents</h2>
            <dl>
                <dt>記述リスト</dt>
                <dd>テキスト</dd>
                <dt><a href="#" class="link">リンク</a></dt>
                <dd>テキスト</dd>
            </dl>
            <ul>
                <li><mark>リスト</mark></li>
                <li><a href="#">リンク</a></li>
                <li><a href="#">リンク</a></li>
                <li><a href="#">リンク</a></li>
                <li><a href="#">リンク</a></li>
            </ul>
        </section>
    </main>
</div>
<footer>Template by <a href="https://ninawas.me" target="_blank">Nina</a>.</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(function() {
        $('a[href^="#"]').click(function() {
            var speed = 800;
            var href = $(this).attr("href");
            var target = $(href == "#" || href == "" ? 'html' : href);
            var position = target.offset().top;
            $('body,html').animate({
                scrollTop: position
            }, speed, 'swing');
            return false;
        });
    });

</script>