2023-02-20

blog

Posted by

applemango

画像は壮大さに惹かれた(web、と検索したら出てきたから許して)

cssだけでウェブサイトを作る事は可能かだろうか

僕は今まで数々(一桁)の物をCSSだけで作ってきた

そこでふと思った事がある、今現在CSSだけでウェブサイトを作る事が出来るのでは無いだろうか

流石にbodyにいくらcssを付けようが限界があるので今回は空のdivのみ使ってよい事にする(linkもね)

classなし

idなし

その他属性無し

空のdiv

<div>
    <div></div>
</div>

早速作っていく

因みに今回作るサイトはこのサイトだ

文字を表示する

さて、当然ながら普通htmlで文字を表示しろ、と言われたら誰だってpを使うだろう

<p>Hello, world!</p>

だが今回は空のdivしか使ってはいけない

したのような感じでもダメだ

<div>Hello, world!</div>

ではどうやってそれと同等の事をするか、それはcontentを使う

例えば上のコードと下のコードは同等である、そのため今回はcontentを多用する事になる

<div></div>
div::after {
    content: "Hello, world!"
}

headerを作る

headerはcontentを組み合わせて簡単に出来た

もしかしたら今回は余裕かもしれない

<div>
    <div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
html,
body {
    padding: 0;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
        Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}
* {box-sizing: border-box;}

body {
    width: 100vw;
    overflow-x: hidden;
}

body > div:first-child {
    margin: 24px 0;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
}
body > div:first-child > div {
    display: flex;
    position: relative;
}
body > div:first-child > div > div::after {
    color: #222;
    margin: 20px;
    font-weight: 700;
    cursor: pointer;
}
body > div:first-child > div > div:nth-child(1)::after {
    content: "home";
}
body > div:first-child > div > div:nth-child(2)::after {
    content: "about";
}
body > div:first-child > div > div:nth-child(3)::after {
    content: "contact";
}
body > div:first-child > div > div:nth-child(4)::after {
    content: "";
    width: 30px;
    height: 1px;
    background-color: #000;
    position: absolute;
    left: 0;
    top: 12px;
    transition: transform .3s ease;
}
body > div:first-child > div > div:nth-child(1):hover ~ div:nth-child(4)::after {
    transform: translateX(0);
}
body > div:first-child > div > div:nth-child(2):hover ~ div:nth-child(4)::after {
    transform: translateX(82px);
}
body > div:first-child > div > div:nth-child(3):hover ~ div:nth-child(4)::after {
    transform: translateX(167px);
}

因みに、なぜhtmlにbodyが含まれないのにcssにbodyが含まれるのかと言うと最近のブラウザは優秀で自動でbodyを付けてくれるのです

<html>
    <head>
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <div>
            <div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </body>
</html>

地味に便利(こんな事する時にしか使わないけど)

適当に文字をスクロールさせる

とりあえず大きなタイポグラフィ使ってれば良い風潮最近あるくね?

(Site Of The Dayとか見てると)

<div>
    <div>
        <div></div>
        <div></div>
    </div>
</div>
body > div {
    width: 100vw;
    overflow: hidden;
}
body > div > div {
    display: flex;
    overflow: hidden;
    width: 200vw;
    --width: -100vw;
}
div > div > div::after {
    color: #252525;
    display: flex;
    content: "abc.osaka";
    width: 100vw;
    margin: 0;
    font-size: 13vw;
    font-weight: 400;
    animation: 8s linear scrolls infinite;
}
@keyframes scrolls {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(var(--width));
    }
}

footerを作る

footerも適当に作る

<div>
    <div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div>
    <div></div>
    <div>
        <div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div>
        <div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div></div>
    <div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
body > div:nth-child(9) {
    position: relative;
    background-color: #f8f8f8;
}

body > div:nth-child(9) > div:first-child {
    content: "";
    width: 100%;
    height: 64px;
    background-color: #fff;
    border-radius: 0 0 64px 64px;
}
body > div:nth-child(9) > div:nth-child(2) {
    width: 100vw;
    overflow: hidden;
}
body > div:nth-child(9) > div:nth-child(2) > div {
    display: flex;
    overflow: hidden;
    width: 200vw;
    --width: -100vw;
}
body > div:nth-child(9) > div:nth-child(2) > div > div::after {
    color: #252525;
    display: flex;
    content: "abc.osaka";
    width: 100vw;
    margin: 0;
    font-size: 13vw;
    font-weight: 400;
    animation: 8s linear scrolls infinite;
}
body > div:nth-child(9) > div:nth-child(3) {
    width: 100vw;
    overflow: hidden;
}
body > div:nth-child(9) > div:nth-child(3) > div {
    display: flex;
    overflow: hidden;
    width: 200vw;
    --width: -100vw;
}
body > div:nth-child(9) > div:nth-child(3) > div > div::after {
    color: #252525;
    display: flex;
    content: "[email protected]";
    width: 100vw;
    margin: 0;
    font-size: 13vw;
    font-weight: 400;
    animation: 8s linear scrolls infinite;
}
@keyframes scrolls {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(var(--width));
    }
}
body > div:nth-child(9):hover > div:nth-child(4)::after {
    opacity: 1;
}
body > div:nth-child(9) > div:nth-child(4)::after {
    content: "mailは基本返信できません、ご了承ください";
    margin: 20px;
    font-size: 12px;
    color: #445;
    opacity: 0;
    transition: opacity .3s ease;
}
body > div:nth-child(9) > div:nth-child(5) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 20px 0; 
    margin-bottom: 0;
    padding-bottom: 20px;
}
body > div:nth-child(9) > div:nth-child(5) > div::after {
    font-size: 14px;
    margin: 0 20px;
    color: #445;
    cursor: pointer;
}
body > div:nth-child(9) > div:nth-child(5) > div:nth-child(1):after {
    content: "プライバシーポリシー | Privacy Policy";
}
body > div:nth-child(9) > div:nth-child(5) > div:nth-child(2):after {
    content: "お問い合わせフォーム | Contact Form";
}
body > div:nth-child(9) > div:nth-child(5) > div:nth-child(3):after {
    content: "このサイトについて | About";
}

まずい、思いのほか普通に作れている

画像を表示する

imgタグを使わずに画像を表示する方法としてcontentを使う方法とbackground-imageを使う方法があるが

background-imageを使った方がbackground-sizebackground-positionを使えて便利なので、今回はbackground-imageを使う事にした

<div>
    <div></div>
</div>
div {
    width: 100%;
    height: 500px;
}
div div {
    content: "";
    display: flex;
    width: 100%;
    height: 500px;
    overflow: hidden;
    background-size: cover;
    border-radius: 16px;
    background-position: center;
    background-image: url("/images/blog/nasa-hj8.jpg");
}

結論

普通に作れる

(リンクは使えないので強制SPA?)

htmlを書くのが得意じゃない人はぜひ試して見て欲しい

一つ難点としてはリンクが使えない事と文字が認識されない事があるが大した問題では無いと思う

ではまた

完成

(一部無いがそれは普通に作れる事が分かりモチベが無くなったため)

<link rel="stylesheet" href="main.css">
<meta name="viewport" content="width=device-width">
<div>
    <div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
<div>
    <div>
        <div></div>
        <div></div>
    </div>
</div>
<div></div>
<div>
    <div>
        <div></div>
        <div></div>
    </div>
</div>
<div></div>
<div>
    <div>
        <div></div>
        <div></div>
    </div>
</div>
<div>
    <div>
        <div></div>
        <div></div>
        <div>
            <div></div>
        </div>
        <div></div>
        <div></div>
    </div>
    <div>
        <div></div>
        <div></div>
        <div>
            <div></div>
        </div>
        <div></div>
        <div></div>
    </div>
    <div>
        <div></div>
        <div></div>
        <div>
            <div></div>
        </div>
        <div></div>
        <div></div>
    </div>
</div>
<div></div>
<div>
    <div></div>
    <div>
        <div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div>
        <div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div></div>
    <div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
html,body {padding: 0;margin: 0;font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;}
a {color: inherit;text-decoration: none;}
* {box-sizing: border-box;}
::-webkit-scrollbar {width: 5px;height: 5px;background-color: transparent;}
::-webkit-scrollbar-thumb {background-color: #ccc;border-radius: 3px;}
::-webkit-scrollbar-track {background-color: transparent;}
body {
    width: 100vw;
    min-height: calc(100vh - 24px);
    overflow-x: hidden;
}
body > div:first-child {
    margin: 24px 0;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
}
body > div:first-child > div {
    display: flex;
    position: relative;
}
body > div:first-child > div > div::after {
    color: #222;
    margin: 20px;
    font-weight: 700;
    cursor: pointer;
}
body > div:first-child > div > div:nth-child(1)::after {
    content: "home";
}
body > div:first-child > div > div:nth-child(2)::after {
    content: "about";
}
body > div:first-child > div > div:nth-child(3)::after {
    content: "contact";
}
body > div:first-child > div > div:nth-child(4)::after {
    content: "";
    width: 30px;
    height: 1px;
    background-color: #000;
    position: absolute;
    left: 0;
    top: 12px;
    transition: transform .3s ease;
}
body > div:first-child > div > div:nth-child(1):hover ~ div:nth-child(4)::after {
    transform: translateX(0);
}
body > div:first-child > div > div:nth-child(2):hover ~ div:nth-child(4)::after {
    transform: translateX(82px);
}
body > div:first-child > div > div:nth-child(3):hover ~ div:nth-child(4)::after {
    transform: translateX(167px);
}

body > div:nth-child(2) {
    width: 100vw;
    overflow: hidden;
}
body > div:nth-child(2) > div {
    display: flex;
    overflow: hidden;
    width: 320vw;
    --width: -160vw;
}
body > div:nth-child(2) > div > div::after {
    color: #252525;
    display: flex;
    content: "Want to make something?";
    width: 160vw;
    margin: 0;
    font-size: 13vw;
    font-weight: 400;
    animation: 8s linear scrolls infinite;
}
body > div:nth-child(6) {
    width: 100vw;
    overflow: hidden;
}
body > div:nth-child(6) > div {
    display: flex;
    overflow: hidden;
    width: 240vw;
    --width: -120vw;
}
body > div:nth-child(6) > div > div::after {
    color: #252525;
    display: flex;
    content: "Articles I've Written";
    width: 120vw;
    margin: 0;
    font-size: 13vw;
    font-weight: 400;
    animation: 8s linear scrolls infinite;
}
body > div:nth-child(4) {
    width: 100vw;
    overflow: hidden;
}
body > div:nth-child(4) > div {
    display: flex;
    overflow: hidden;
    width: 520vw;
    --width: -260vw;
}
body > div:nth-child(4) > div > div::after {
    color: #252525;
    display: flex;
    content: "The one that isn't written in several parts";
    width: 260vw;
    margin: 0;
    font-size: 13vw;
    font-weight: 400;
    animation: 8s linear scrolls infinite;
}
body > div:nth-child(9) {
    position: relative;
    background-color: #f8f8f8;
}

body > div:nth-child(9) > div:first-child {
    content: "";
    width: 100%;
    height: 64px;
    background-color: #fff;
    border-radius: 0 0 64px 64px;
}
body > div:nth-child(9) > div:nth-child(2) {
    width: 100vw;
    overflow: hidden;
}
body > div:nth-child(9) > div:nth-child(2) > div {
    display: flex;
    overflow: hidden;
    width: 200vw;
    --width: -100vw;
}
body > div:nth-child(9) > div:nth-child(2) > div > div::after {
    color: #252525;
    display: flex;
    content: "abc.osaka";
    width: 100vw;
    margin: 0;
    font-size: 13vw;
    font-weight: 400;
    animation: 8s linear scrolls infinite;
}
body > div:nth-child(9) > div:nth-child(3) {
    width: 100vw;
    overflow: hidden;
}
body > div:nth-child(9) > div:nth-child(3) > div {
    display: flex;
    overflow: hidden;
    width: 200vw;
    --width: -100vw;
}
body > div:nth-child(9) > div:nth-child(3) > div > div::after {
    color: #252525;
    display: flex;
    content: "[email protected]";
    width: 100vw;
    margin: 0;
    font-size: 13vw;
    font-weight: 400;
    animation: 8s linear scrolls infinite;
}
@keyframes scrolls {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(var(--width));
    }
}
body > div:nth-child(9):hover > div:nth-child(4)::after {
    opacity: 1;
}
body > div:nth-child(9) > div:nth-child(4)::after {
    content: "mailは基本返信できません、ご了承ください";
    margin: 20px;
    font-size: 12px;
    color: #445;
    opacity: 0;
    transition: opacity .3s ease;
}
body > div:nth-child(9) > div:nth-child(5) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 20px 0; 
    margin-bottom: 0;
    padding-bottom: 20px;
}
body > div:nth-child(9) > div:nth-child(5) > div::after {
    font-size: 14px;
    margin: 0 20px;
    color: #445;
    cursor: pointer;
}
body > div:nth-child(9) > div:nth-child(5) > div:nth-child(1):after {
    content: "プライバシーポリシー | Privacy Policy";
}
body > div:nth-child(9) > div:nth-child(5) > div:nth-child(2):after {
    content: "お問い合わせフォーム | Contact Form";
}
body > div:nth-child(9) > div:nth-child(5) > div:nth-child(3):after {
    content: "このサイトについて | About";
}
body > div:nth-child(7) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    grid-auto-flow: row dense;
    grid-gap: 40px;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 96%;
    margin: 0 auto;
}
@media (max-width: 520px) {
    body > div:nth-child(7) {
        width: 96%;
        display: flex;
    }
}
body > div:nth-child(7) > div > div:nth-child(1) {
    color: #445;
    margin: 16px 0;
}
body > div:nth-child(7) > div:nth-child(1) > div:nth-child(1)::after {
    content: "2023-02-20";
}
body > div:nth-child(7) > div:nth-child(2) > div:nth-child(1)::after {
    content: "2023-01-31";
}
body > div:nth-child(7) > div:nth-child(3) > div:nth-child(1)::after {
    content: "2023-01-18";
}
body > div:nth-child(7) > div > div:nth-child(2) {
    height: 110px;
    overflow: hidden;
    color: #252525;
    margin-bottom: 12px;
    font-size: 32px;
    font-weight: bold;
    margin: 21.44px 0;
    margin-bottom: -8px;
}
body > div:nth-child(7) > div:nth-child(1) > div:nth-child(2)::after {
    content: "cssだけでウェブサイトを作る事は可能かだろうか";
}
body > div:nth-child(7) > div:nth-child(2) > div:nth-child(2)::after {
    content: "流れ星には独自言語を使うべきである";
}
body > div:nth-child(7) > div:nth-child(3) > div:nth-child(2)::after {
    content: "年賀状を書いた";
}
body > div:nth-child(7) > div > div:nth-child(3) {
    width: 100%;
    height: 500px;
}
body > div:nth-child(7) > div > div:nth-child(3)  > div::after{
    content: "";
    display: flex;
    width: 100%;
    height: 500px;
    overflow: hidden;
    background-size: cover;
    border-radius: 16px;
    background-position: center;
}
body > div:nth-child(7) > div:nth-child(1) > div:nth-child(3) > div::after {
    background-image: url("/images/blog/nasa-hj8.jpg");
}
body > div:nth-child(7) > div:nth-child(2) > div:nth-child(3) > div::after {
    background-image: url("/images/blog/shooting-star.jpg");
}
body > div:nth-child(7) > div:nth-child(3) > div:nth-child(3) > div::after {
    background-image: url("/images/blog/sun.jpg");
}
body > div:nth-child(7) > div > div:nth-child(4) {
    margin: 21.44px 0;
    font-size: 21px;
    font-weight: 400;
    color: #445;
}
body > div:nth-child(7) > div:nth-child(1) > div:nth-child(4)::after {
    content: "htmlを書かずcssだけでウェブサイトを作る事はできるのだろうか?、実際に試してみた";
}
body > div:nth-child(7) > div:nth-child(2) > div:nth-child(4)::after {
    content: "時間の無い現代社会では効率化が必要不可欠である、皆も効率よく、良いメソッドを使い流れ星に願い事をして願いを叶えようじゃ無いか";
}
body > div:nth-child(7) > div:nth-child(3) > div:nth-child(4)::after {
    content: "年賀状を書いた、これほどつまらない事を書く人もそうそういないだろう、だが面白い年賀状を書くのは意外と難しいと言う事を書きたい、それと多くのアクシデントが起こったからついでにそれも書く";
}
body > div:nth-child(7) > div > div:nth-child(5)::after {
    margin: 21.44px 0;
    font-size: 24px;
    font-weight: 600;
    position: relative;
    text-decoration: underline;
    content: "Read Article ->";
    cursor: pointer;
    color: #445;
}
body > div:is(
    :nth-child(3),
    :nth-child(5)
) {
    height: 500px;
}

このブログどう?

emoji
emoji
emoji
emoji