NINA

Information

ここはmain>section
spanで下線
markでマーカー
strongで重要事項
セクション内リンク
 class="link"
class="boxlink"
class="ja"でこころ明朝

class="center"で中央揃え

見出し

ここはsection>section
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur alias fugiat eius praesentium consequuntur quia cupiditate similique quibusdam saepe molestias id dolores quo eos eveniet at et velit, obcaecati. Voluptatibus.

Main contents

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

その他

現在リクエストを受け付けています。などなど。

Request page

source code

TITLE by 華.
アイコンはicooon mono様で保存してください。
・ダイヤモンドのフリーアイコン
配布元サイト様の規約をご確認の上ご使用ください。
テンプレート公開 2019/07/05
横幅768px以上で2カラム

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

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

@font-face {
    font-family: 'こころ明朝';
    font-display: swap;
    src: url('https://cdn.leafscape.be/kokoro/Kokoro_web.woff2') format("woff2");
}

/*-------------------------------------------------
このフォントはIPAフォントライセンスv1.0の下で提供されています。
http://ipafont.ipa.go.jp/ipa_font_license_v1.html
オリジナルのフォントは以下から取得できます。
http://ipafont.ipa.go.jp/
-------------------------------------------------*/

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

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

/* リンク */
a {
    text-decoration: none;
    border-bottom: 1px solid #000;
    color: #000;
}

/* コンテナ */
#wrap {
    margin: 5em auto 3em;
}

/* ヘッダー */
header {
    position: relative;
    display: inline-block;
    margin: 0 auto 5em;
    padding: 3em;
    width: 250px;
    height: 300px;
    border: 1px solid #000;
}

/* 枠 */
header::before,
header::after {
    position: absolute;
    content: '';
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #000;
}

header::before {
    transform: rotate(8deg);
}

header::after {
    transform: rotate(-5deg);
}

/* ヘッダーの中身 */
header #head {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

/* 画像サイズ */
header img {
    width: 30px;
    height: auto;
}

/* 見出し */
header h1 {
    margin: 0.5em auto 2em;
    font-size: 1em;
}

/* フォントの指定 */
header h1,
section h2 span,
section h3,
.ja {
    font-family: 'こころ明朝', serif;
}

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

nav ul li {
    margin: 0.5em auto 1em;
    border-bottom: 1px dotted #000;
}

nav ul li a {
    border-bottom: none;
    font-family: 'こころ明朝', serif;
}

/* メイン */
main {
    margin: 0 auto;
    width: 80%;
}

/* メイン直下のセクション */
main > section {
    margin: 3em auto;
    text-align: justify;
    word-break: break-all;
}

/* 見出し */
section h2 {
    position: relative;
}

section h2::before {
    position: absolute;
    content: '';
    display: block;
    z-index: -10;
    top: 55%;
    left: 0;
    width: 100%;
    height: 1px;
    border-top: 1px dotted #000;
}

section h2 span {
    padding: 0 0.5em 0 0;
    background-color: #fff;
}

section h3 {
    font-size: 1em;
}

section h3 img {
    margin-right: 0.5em;
    width: 20px;
    height: auto;
}

/* セクション内セクション */
section > section {
    margin: 0.5em auto;
    width: 90%;
}

/* 文字サイズ */
section > section p {
    font-size: 12px;
}

/* セクション内共通 */
section p {
    margin: 1em auto 1.5em;
}

section p span {
    border-bottom: 1px dotted #000;
}

section mark {
    padding: 0.1em 0.4em;
    background-color: #efefef;
}

section strong {
    font-weight: bold;
    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;
}

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

section .boxlink {
    display: inline-block;
    margin: 0.5em auto;
    padding: 0.2em 1em;
    background-color: #efefef;
    border: 1px solid #000;
    font-family: 'La Belle Aurore', cursive;
}

/* 中央寄せ */
.center {
    text-align: center;
}

/* フォーム系 */
textarea,
input[type] {
    -webkit-appearance: none;
    padding: 0.2em 0.5em;
    background-color: #efefef;
    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) {
    #wrap {
        margin: 5em auto;
        max-width: 700px;
    }

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

header {
        margin-left: 1em;
        float: left;
    }

main {
        overflow: hidden;
        width: calc(85% - 250px);
    }
}

/* 横幅1024px以上で読み込む */
@media screen and (min-width:1024px) {
    #wrap {
        max-width: 1000px;
    }
}
</style>

<div id="wrap">
    <header>
        <div id="head">
            <img src="画像URL">
            <h1>タイトル</h1>
            <nav>
                <ul>
                    <li><a href="#info">info</a></li>
                    <li><a href="#main">main</a></li>
                    <li><a href="#code">code</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <main>
        <section id="info">
            <h2><span>Information</span></h2>
            <p>
                ここはmain>section<br>
                <span>spanで下線</span><br>
                <mark>markでマーカー</mark><br>
                <strong>strongで重要事項</strong><br>
                <a href="#">セクション内リンク</a><br>
                <a href="#" class="link">class="link"</a><br>
                <a href="#" class="boxlink">class="boxlink"</a><br>
                <span class="ja">class="ja"でこころ明朝</span>
            </p>
            <div class="center">class="center"で中央揃え</div>
            <section>
                <h3><img src="画像URL">見出し</h3>
                <p>ここはsection>section</p>
            </section>
        </section>
        <section id="main">
            <h2><span>Main contents</span></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>
                <h3><img src="画像URL">その他</h3>
                <p>現在リクエストを受け付けています。などなど。</p>
                <div class="center"><a href="#" class="boxlink">Request page</a></div>
            </section>
        </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>