【第4回HTML, CSS, JS編】基礎から学ぶJamstack構成のサイト開発

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
}

Copy

h1,
h2,
h3 {
    font-family: Comico;
}

p {
    padding: 1rem 0;
}

/* Text Color */
.text-white {
    color: #fff;
}

.text-red {
    color: #f12607;
}

.text-small {
    font-size: 1.875rem;
}

.text-medium {
    font-size: 2.25rem;
}

h3,
.text-large {
    font-size: 3rem;
}

h2,
.text-huge {
    font-size: 3.75rem;
}

/* Text Font */
.font-comico {
    font-family: Comico;
}

/* Flex */
.flex-col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.flex-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 0.5rem;
}

@media (max-width: 1024px) {
    .col-span-full {
        grid-column-start: 1;
        grid-column-end: -1;
    }
}

Copy

<style>
    html {
        font-family:
            ui-sans-serif,
            system-ui,
            sans-serif,
            'Apple Color Emoji',
            'Segoe UI Emoji',
            Segoe UI Symbol,
            'Noto Color Emoji';
    }
    body {
        background-color: #f3f4f6;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin: 0 auto;
        padding: 2rem;
        max-width: 1280px;
        color: #0f1014;
    }
</style>

Copy

---
interface Props {
    text: string;
    link: string;
    textColor: string;
    bgColor: string;
}

const { text, link, textColor, bgColor } = Astro.props;
---

<a href={link} target="_blank" rel="noopener noreferrer"><div>{text}</div><div>→</div></a>

<style define:vars={{ textColor, bgColor }}>
    a {
        color: var(--textColor);
        background-color: var(--bgColor);
        transition-duration: 0.3s;
        font-weight: 600;
        font-size: 1.25rem;
        line-height: 1.75rem;
        padding: 0.5rem 2rem;
        border-radius: 0.75rem;
        height: 4rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-decoration: inherit;
    }
    a:hover{
        color: white;
        background-color: black;

    }
</style>

Copy

---
interface Props {
    bgColor?: string;
    className?: string;
}

const {
    bgColor = '#E5E7EB',
    className
} = Astro.props;
---

<div class={className}>
    <slot />
</div>

<style define:vars={{ bgColor }}>
    div {
        background-color: var(--bgColor);
        padding: 2rem;
        border-radius: 1.5rem;
        min-width: 100%;
    }
</style>

Copy

<div>
    <slot />
</div>

<style>
    div {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 0.5rem;
        min-width: 100%;
    }
    @media (min-width: 1024px) {
        div {
            grid-template-columns: repeat(2, 1fr);
        }
    }
</style>

Copy

---
import Bento from '../components/Bento.astro';
import ButtonLink from '../components/ButtonLink.astro';
import Layout from '../layouts/Layout.astro';
import TwoCol from '../layouts/TwoColLayout.astro';
---

Copy

<Layout title="Jamstack Portalsite">
    <main>
        <TwoCol>
            <div class="flex-col">
                <Bento bgColor="#279E54">
                    <div class="text-small font-comico text-white">Hello Members!</div>
                    <h2 class="text-large text-white">About Jamstack Study Group</h2>
                    <p class="text-white">
                        fuga近年注目されているJamstackと、広く普及し始めているヘッドレスCMSに取り組むエンジニアを増やすことが必要だと感じ、本ギルドが開設されました。
                        <br />
                        Jamstackな人材の育成や技術研究、社内外への普及活動に取り組んでいます。
                    </p>
                </Bento>
                <Bento bgColor="#7498FF">
                    <h3 class="text-white text-medium">Application Form</h3>
                    <p class="text-white">
                        Jamstackに関するハンズオンや勉強会、時にはブログ執筆をして広報活動を行なっています。<br />
                        研究員が自主的に活動内容を決めて行っているので裁量が大きいのもポイントです！<br />
                        「まずは話を聞いてみたい」「活動を見学したい」からOK！
                        <br />
                    </p>
                    <ButtonLink text="問い合わせはこちらから" link="" bgColor="#fff" textColor="#7498FF" />
                </Bento>
            </div>
            <Bento>
                <div class="info">
                    <h2 class="text-red">News</h2>
                    <div>
                        <div></div>
                    </div>
                </div>
            </Bento>
        </TwoCol>
    </main>
</Layout>

Copy

<style>
    main {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    .info {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    .iflame {
        height: 30rem;
    }
</style>

Copy