NINA

#Information

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia molestiae obcaecati ad reprehenderit enim iure dolor et, laborum quis magnam atque illum neque odit, inventore, pariatur eligendi quisquam rem ullam!

spanで文字色
markでマーカー
strongで重要事項
セクション内リンク

わたし
おいしいパン食べたい

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum facere ducimus magni recusandae dolorum, fugiat veritatis iste consequuntur saepe, consequatur cum ut delectus? Repudiandae ducimus minus omnis fugiat, ullam est?

#Source code

Photo by SAE SOL from Unsplash.
20220818公開

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

/* ウェブフォントの読み込み */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&family=M+PLUS+1&display=swap');

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

:root {
    --light-color: #fff;
    --dark-color: #888;
    --en-font: 'Josefin Sans', 'M PLUS 1', sans-serif;
    --color1: #d9aacd;
    --color2: #a4c1d7;
}

/* 基本設定 */
body {
    background: var(--light-color);
    line-height: 1.7;
    letter-spacing: 0.1em;
    text-align: justify;
    word-break: break-all;
    line-break: strict;
    font-size: 13px;
    color: var(--dark-color);
}

/* リンク */
a {
    color: var(--dark-color);
}

/* ヘッダー */
header {
    position: fixed;
    top: 1em;
    left: 0;
    z-index: -1;
}

/* 大見出し */
header h1 {
    display: inline-block;
    padding: 0.2em 0;
    background: linear-gradient(to bottom, var(--color1), var(--color2));
}

header h1 span {
    display: block;
    text-align: center;
    border-bottom: 5px solid var(--light-color);
    font-family: var(--en-font);
    font-size: 1.2em;
    color: var(--light-color);
}

header h1 span:last-of-type {
    border-bottom: none;
}

/* コンテンツ */
nav,
main {
    margin: 2em auto 3em;
    width: 80%;
}

/* 小見出し */
nav h2 {
    font-family: var(--en-font);
    font-size: 2em;
}

/* リスト */
nav ul {
    margin: 1em auto;
}

nav ul li {
    display: inline-block;
    margin-right: 1em;
    padding-left: 0.5em;
    border-left: 5px solid var(--color1);
}

nav ul li a {
    text-decoration: none;
}

/* セクション */
section h2 span,
section span {
    color: var(--color2);
}

section p:not(.box p) {
    margin: 1em auto 1.5em;
}

section mark {
    background: linear-gradient(to bottom, transparent 0, transparent 50%, #efefef 50%, #efefef 100%);
}

section strong {
    font-weight: bold;
    color: red;
}

section a {
    color: var(--color1);
}

section .box {
    margin: 1em auto;
    padding: 1em;
    width: 90%;
    border: thin solid var(--color2);
}

/* プロフィールボックス */
.profile {
    display: flex;
    justify-content: space-between;
}

.profileimg {
    width: 100px;
    height: 100px;
    object-fit: cover;
    background: url('プロフィール画像URL') center/cover;
    flex-basis: 100px;
}

.profiletext {
    flex-basis: calc(100% - 110px);
}

/* フォーム系 */
textarea,
input[type] {
    -webkit-appearance: none;
    padding: 0.5em;
    background: var(--light-color);
    border: thin solid var(--color2);
    border-radius: 0;
    font-size: 11px;
    color: var(--dark-color);
}

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

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

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

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

header {
        left: auto;
        right: 92%;
    }
}

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

header {
        right: 82%;
    }

nav,
    main {
        width: 60%;
    }
}

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

header {
        right: 72%;
    }

nav,
    main {
        width: 40%;
    }
}
</style>

<header>
    <h1>Something</h1>
</header>
<nav>
    <h2>Something to save you.</h2>
    <span>テキスト</span>
    <ul>
        <li><a href="#">LINK</a></li>
        <li><a href="#">LINK</a></li>
        <li><a href="#">LINK</a></li>
        <li><a href="#">LINK</a></li>
        <li><a href="#">LINK</a></li>
    </ul>
</nav>
<main>
    <section>
        <h2><span>#</span>Information</h2>
        <p>テキスト</p>
        <p>
            <span>spanで文字色</span><br>
            <mark>markでマーカー</mark><br>
            <strong>strongで重要事項</strong><br>
            <a href="#">セクション内リンク</a>
        </p>
        <div class="box">
            <div class="profile">
                <div class="profileimg"></div>
                <div class="profiletext">
                    <span>わたし</span><br>
                    おいしいパン食べたい
                </div>
            </div>
            <p>テキスト</p>
        </div>
    </section>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {

$("h1").each(function () {
            var content = $(this).html();
            var trimText = $.trim(content);
            var newText = "";

trimText.split("").forEach(function (e) {
                if (e == ' ') {
                    newText += '<span> </span>';
                } else {
                    newText += '<span>' + e + '</span>';
                }
            });
            $(this).html(newText);
        });

});
</script>