ホームページ制作

Webサイトの種類

コーポレートサイト

企業の情報を掲載している公式サイト。
会社概要や自社製品の紹介、採用情報など、企業についての情報を発信するWebサイトです。

プロモーションサイト

特定の商品やサービス、イベントの告知に使うWebサイトがプロモーションサイトです。

ポートフォリオサイト

デザイナーやアーティスト、フォトグラファーが自身の作品や制作実績を掲載しているWebサイトです。

ショッピングサイト

商品一覧ページや商品詳細ページ、買い物かごページなど多くのページで構成されています。

メディアサイト

画像サイズごとにレイアウトを変更する

多くのWebサイトでは複数のカラムを使って構成されているレイアウトの場合、モバイルとデスクトップでレイアウトを変更しています。メディアクエリーを使ってモバイルサイズではシングルカラム、デスクトップサイズでは2カラムといった変更を行います。

モバイルファーストからデスクトップ

min-width: 600pxとすることで600px以上の画面幅の時に適用できます。
justify-content: space-betweenは子要素を水平方向のどの位置に配置するかを指定します。

/*
DESKTOP SIZE 
================================================ */
@media (min-width: 600px) {
    /* Layout*/
    .container {
        display: flex;
        justify-content: space-between;
        margin-bottom: 4rem;
        padding: 1rem 2.5rem 2.5rem;
    }

HTMLではcontainerというクラスの中に<main>タグと<aside>タグが入っています。
CSSでこのcontainerクラスに「display:flex;」を追加することで２つの要素を横並びにできます。

<div class="container">
    <main>
        ・・メインコンテンツ・・
    </main>
    <aside>
        ・・サイドコンテンツ・・
    </aside>

Webサイトを作ろう