ゼロから始めるコーポレートサイト作成のロゴ画像

ゼロから始めるコーポレートサイト作成

概要

会社のホームページや個人のホームページなどの「コーポレートサイト」を作成していく過程を解説しています。
コーポレートサイトとは、会社概要や採用情報、お問い合わせといった複数のページで構成されているホームページのことです。
会社や商品のことを知ってもらったり、個人であれば自分のことを知ってもらうことを目的としています。
このホームページも、ホームページの作り方を知ってもらうことを目的としているコーポレートサイトに分類されます。
最終的には、問い合わせや、採用申し込み等を目標としているため、
お問い合わせフォームのページが用意されていることが多いです。
必要な言語は「HTML」「CSS」「JavaScript」「PHP」になります。

準備

ファイル作成に必要なsakuraエディターをダウンロード&インストールしましょう。

sakuraエディターダウンロードサイト

VisualStudioを使用すると、タグ入力時に候補が表示されて作成効率が上がりますので、VisualStudioをダウンロード&インストールしましょう。

VisualStudioダウンロードサイト

PHPが実行できる環境を作る必要があります。パソコンにサーバを作るのは大変なので、XAMPPをダウンロード&インストールしましょう。

XAMPPダウンロードサイト

※各ソフトのインストール方法や使い方は各サイトを参照するか、検索してみてください。

コーポレートサイトの構成図、階層構造、画面設計図、ファイルの作成

まずは、どのようなホームページにするか設計図を作成しましょう。

サイトの構成図

コーポレートサイトの各ページの構成図を作成します。
必要なページとして、メインページ、会社概要ページ、採用情報ページ、問い合わせページを用意する事とします。

このようなイメージ

コーポレートサイトの階層図

サイトの階層構造図

サイトの構成図を参考に階層構造図を作成します。
コーポレートサイトはヘッダーやフッターが同じ内容が使用されることが多いため、
今回はヘッダー、サイドバー、フッターを共通部品として作成する方法で構築します。
また、各ページで複数使用する文言を使いまわしできるように設定ファイルを用意します。

このようなイメージ

コーポレートサイトの階層構造図

サイトの画面設計図の作成

サイトの画面設計図を作成します。
パソコンだけではなく、タブレットやスマートフォンで見た時にもきれいに表示されるように、
レスポンシブ対応も導入します。
iPadProの横幅、1024pxをポイントにして表示が切り替わるよう設計します。

このようなイメージ

画面設計図の画像

フォルダとファイルの作成

サイトの階層構造図を参考にフォルダとファイルを作成します。
ファイルの作成は、中身に何も記述しない空ファイルでOKです。
XAMPPをインストールすると「C:\xampp\htdocs」というフォルダが作成されているので、
その配下に「corporate」フォルダから作成してください。
ファイルを保存する時は下の図のように「文字コード:UTF-8」「BOMなし」「改行コード:LF(UNIX)」を指定しましょう。

ファイル保存時の画像

作成完了後にビジュアルスタジオで「ローカルフォルダーを開く」>「corporate」を選択します。
ソリューションエクスプローラーフォルダビューが下の図になります。

ファイル一覧の画像

画像の作成

ホームページに表示する画像を作成します。
作成方法は、スクリーンショットを利用したり、画像作成ソフトを利用したりとやり方はいろいろあります。
エクセルで図形を駆使して絵を作成して、ウィンドウズのペイントに貼り付けて画像として保存する方法もあります。
サイトの設計図はエクセルから作ったものです。
必要な画像を作成して「images」フォルダの配下に配置しましょう。

作成するのが面倒であれば、実際に表示している画像をダウンロードして使用してください。

logo.jpgのダウンロード

agent.pngのダウンロード

コンテンツの作成

作成したファイルにコンテンツ(文字)の記述をしていきます。
作成したファイルに下記内容をコピー&ペーストしていってください。
画像のリンクや各文言は適宜書き換えてください。
たくさんのタグやJavaScript、PHPの記述がありますが、詳細の説明は省かせていただきます。

index.php

アクセスされたときにmain.phpへ自動的に遷移する設定です。

<?php
header('Location: https://corporate.allsite.me/html/main.php');
exit;

config.php

各ページで複数使用する文言の記述です。

<?php
$mainTitle = "株式会社架空会社";
$mainPath = "../html/main.php";
$mainDescription = <<<EOI
会社の説明を記載します。<br />
会社の説明会社の説明会社の説明会社の説明会社の説明会社の説明<br />
会社の説明会社の説明会社の説明会社の説明会社の説明会社の説明
EOI;
$companyProfileTitle = "会社概要";
$companyProfilePath = "../html/companyProfile.php";
$companyProfileDescription = <<<EOI
会社概要の説明を記載します。<br />
会社概要の説明会社概要の説明会社概要の説明会社概要の説明<br />
会社概要の説明会社概要の説明会社概要の説明会社概要の説明
EOI;
$employmentInformationTitle = "採用情報";
$employmentInformationPath = "../html/employmentInformation.php";
$employmentInformationDescription = <<<EOI
採用情報の説明を記載します。<br />
採用情報の説明採用情報の説明採用情報の説明採用情報の説明<br />
採用情報の説明採用情報の説明採用情報の説明採用情報の説明
EOI;
$inquiryTitle = "お問い合わせ";
$inquiryPath = "../html/inquiry.php";
$inquiryDescription = <<<EOI
お問い合わせの説明を記載します。<br />
お問い合わせの説明お問い合わせの説明お問い合わせの説明<br />
お問い合わせの説明お問い合わせの説明お問い合わせの説明
EOI;
$mailAddress = "info@allsite.me";

header.php

各ページで表示するヘッダー部分の記述です。

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="description" content="<?php echo $description ?>">
    <title><?php echo $title ?></title>
    <link rel="stylesheet" type="text/css" href="../css/reset.css">
    <link rel="stylesheet" type="text/css" href="../css/style.css">
    <script type="text/javascript" src="../js/main.js"></script>
</head>

<body>
    <header>
        <img src="../images/logo.jpg" alt="<?php echo $mainTitle ?>のロゴ画像" />
        <h1><?php echo $mainTitle ?></h1>
        <nav class="globalNav">
            <ul class="globalNavList">
                <li class="globalNavItem"><a href="<?php echo $mainPath ?>">ホーム</a></li>
                <li class="globalNavItem"><a href="<?php echo $companyProfilePath ?>"><?php echo $companyProfileTitle ?></a></li>
                <li class="globalNavItem"><a href="<?php echo $employmentInformationPath ?>"><?php echo $employmentInformationTitle ?></a></li>
                <li class="globalNavItem"><a href="<?php echo $inquiryPath ?>"><?php echo $inquiryTitle ?></a></li>
            </ul>
        </nav>
        <div class="hamburger" id="hamburger">
            <span class="hamburgerLine hamburgerLine1"></span>
            <span class="hamburgerLine hamburgerLine2"></span>
            <span class="hamburgerLine hamburgerLine3"></span>
        </div>
        <div class="blackScreen" id="blackScreen"></div>
    </header>

side.php

各ページで表示するサイド部分の記述です。

<article class="side" id="side">
    <section>
        <h1>お知らせ</h1>
        <dl>
            <dt>2020/1/1</dt>
            <dd>お知らせ1</dd>
            <dt>2020/4/1</dt>
            <dd>お知らせ2</dd>
        </dl>
    </section>
    <section>
        <h1>代表者</h1>
        <img src="../images/agent.png" alt="代表者画像">
        <p>代表者氏名</p>
        <p>
            代表者の詳細を記載します。<br />
            代表者の詳細代表者の詳細代表者の詳細代表者の詳細<br />
            代表者の詳細代表者の詳細代表者の詳細代表者の詳細
        </p>
    </section>
</article>

footer.php

各ページで表示するフッター部分の記述です。

<footer>
    <div id="scrollTop">
        <p id="triangle"></p>
    </div>
    <p>Copyright © 2020 <a href="https://allsite.me" target="_blank"><?php echo $mainTitle ?></a></p>
</footer>
</body>

</html>

main.php

メインページの記述です。

<?php
include('../conf/config.php');
$title = $mainTitle;
$description = $mainDescription;
include('../parts/header.php');
?>
<div class="centerArea">
    <article class="content">
        <section>
            <h1><?php echo $mainTitle ?></h1>
            <p><?php echo $mainDescription ?></p>
        </section>
        <section>
            <h1><?php echo $companyProfileTitle ?></h1>
            <p><?php echo $companyProfileDescription ?></p>
            <a href="<?php echo $companyProfilePath ?>"><?php echo $companyProfileTitle ?>ページへ</a>
        </section>
        <section>
            <h1><?php echo $employmentInformationTitle ?></h1>
            <p><?php echo $employmentInformationDescription ?></p>
            <a href="<?php echo $employmentInformationPath ?>"><?php echo $employmentInformationTitle ?>ページへ</a>
        </section>
        <section>
            <h1><?php echo $inquiryTitle ?></h1>
            <p><?php echo $inquiryDescription ?></p>
            <a href="<?php echo $inquiryPath ?>"><?php echo $inquiryTitle ?>ページへ</a>
        </section>
    </article>
    <?php include('../parts/side.php'); ?>
</div>
<?php include('../parts/footer.php'); ?>

companyProfile.php

会社概要ページの記述です。

<?php
include('../conf/config.php');
$title = $companyProfileTitle;
$description = $companyProfileDescription;
include('../parts/header.php');
?>
<div class="centerArea">
    <article class="content">
        <section>
            <h1><?php echo $companyProfileTitle ?></h1>
            <p><?php echo $companyProfileDescription ?></p>
        </section>
        <section>
            <h1>沿革</h1>
            <dl>
                <dt>1990/4/1</dt>
                <dd>設立</dd>
                <dt>2000/4/1</dt>
                <dd>事業所を○○へ移転</dd>
                <dt>2010/4/1</dt>
                <dd>資本金○○円達成</dd>
            </dl>
            <p></p>
        </section>
    </article>
    <?php include('../parts/side.php'); ?>
</div>
<?php include('../parts/footer.php'); ?>

employmentInformation.php

採用情報ページの記述です。

<?php
include('../conf/config.php');
$title = $employmentInformationTitle;
$description = $employmentInformationDescription;
include('../parts/header.php');
?>
<div class="centerArea">
    <article class="content">
        <section>
            <h1><?php echo $employmentInformationTitle ?></h1>
            <p><?php echo $employmentInformationDescription ?></p>
        </section>
        <section>
            <h1>募集内容</h1>
            <dl>
                <dt>職種</dt>
                <dd>
                    内容内容内容内容内容内容<br />
                    内容内容内容内容内容内容
                </dd>
                <dt>業務内容</dt>
                <dd>
                    内容内容内容内容内容内容<br />
                    内容内容内容内容内容内容
                </dd>
            </dl>
            <table>
                <tr>
                    <th>応募資格</th>
                    <td>○○歳~○○歳</td>
                </tr>
                <tr>
                    <th>雇用形態</th>
                    <td>正社員</td>
                </tr>
                <tr>
                    <th>勤務地</th>
                    <td>○○県△△市</td>
                </tr>
                <tr>
                    <th>勤務時間</th>
                    <td>9時~18時(実働8時間)</td>
                </tr>
                <tr>
                    <th>給与</th>
                    <td>○○円</td>
                </tr>
                <tr>
                    <th>休日</th>
                    <td>完全週休2日制(土日)</td>
                </tr>
            </table>
        </section>
    </article>
    <?php include('../parts/side.php'); ?>
</div>
<?php include('../parts/footer.php'); ?>

inquiry.php

問い合わせページの記述です。

<?php
include('../conf/config.php');
$title = $inquiryTitle;
$description = $inquiryDescription;
include('../parts/header.php');
?>
<div class="centerArea">
    <article class="content">
        <section>
            <h1><?php echo $inquiryTitle ?></h1>
            <p><?php echo $inquiryDescription ?></p>
        </section>
        <section class="mail">
            <form method="post" action="confirmation.php">
                <table>
                    <tr>
                        <th>お名前</th>
                        <td><input type="text" id="name" name="name" required></td>
                    </tr>
                    <tr>
                        <th>メールアドレス</th>
                        <td><input type="email" id="email" name="email" required></td>
                    </tr>
                    <tr>
                        <th>内容</th>
                        <td><textarea id="content" name="content" required></textarea></td>
                    </tr>
                    <tr class="center">
                        <th colspan="2" class="center"><input type="submit" value=" 確認 "></th>
                    </tr>
                </table>
            </form>
        </section>
    </article>
    <?php include('../parts/side.php'); ?>
</div>
<?php include('../parts/footer.php'); ?>

confirmation.php

問い合わせ確認ページの記述です。

<?php
include('../conf/config.php');
$title = $inquiryTitle;
$description = $inquiryDescription;
$name = htmlspecialchars($_POST['name'], ENT_QUOTES);
$mail = htmlspecialchars($_POST['email'], ENT_QUOTES);
$content = htmlspecialchars($_POST['content'], ENT_QUOTES);
include('../parts/header.php');
?>
<div class="centerArea">
    <article class="content">
        <section class="mail">
            <h1><?php echo $title ?></h1>
            <table>
                <tr>
                    <th>お名前:</th>
                    <td><?php echo $name ?> 様</td>
                </tr>
                <tr>
                    <th>メールアドレス:</th>
                    <td><?php echo $mail ?></td>
                </tr>
                <tr>
                    <th>内容:</th>
                    <td><?php echo $content ?></td>
                </tr>
                <tr>
                    <th class="center" colspan="2">上記の内容でお間違いなければ送信ボタンをクリックして下さい。</th>
                </tr>
                <tr>
                    <th class="center" colspan="2">
                        <form action="thanks.php" method="post">
                            <input type="hidden" name="name" value="<?php echo $name ?>">
                            <input type="hidden" name="email" value="<?php echo $mail ?>">
                            <input type="hidden" name="subject" value="<?php echo $name ?>からの問い合わせ">
                            <input type="hidden" name="content" value="<?php echo $content ?>">
                            <input type="submit" class="button" value=" 送信 ">
                        </form>
                    </th>
                </tr>
            </table>
        </section>
    </article>
    <?php include('../parts/side.php'); ?>
</div>
<?php include('../parts/footer.php'); ?>

thanks.php

問い合わせ完了ページの記述です。

<?php
include('../conf/config.php');
$title = $inquiryTitle;
$description = $inquiryDescription;
include('../parts/header.php');
?>
<div class="centerArea">
    <article class="content">
        <section>
            <?php
            mb_language("japanese");
            mb_internal_encoding("UTF-8");

            $name = htmlspecialchars($_POST['name'], ENT_QUOTES);
            $mail = htmlspecialchars($_POST['email'], ENT_QUOTES);
            $to = "<$mailAddress>";
            $subject = $_POST['subject'];
            $body = $_POST['content'];
            $from = mb_encode_mimeheader(mb_convert_encoding(" $name", "JIS", "UTF-8")) . "<$mail>
                    ";
            $success = mb_send_mail($to, $subject, $body, "From:" . $from);
            ?>
            <?php
            if ($success) {
                echo ('<p>送信が完了しました。<br />内容を確認の上、お返事させて頂きます。</p>');
            } else {
                echo ('<p>送信に失敗しました。<br />時間をおいて再度お試し下さい。</p>');
            }
            ?>
        </section>
    </article>
    <?php include('../parts/side.php'); ?>
</div>
<?php include('../parts/footer.php'); ?>

main.js

JavaScriptの記述です。
・右下のトップへ戻るアイコンをクリックしたときの動き
・画面をスクロールした時の制御
・スマフォやタブレットの時のハンバーガーメニューの制御が記載されています。

window.onload = function () {
    // トップへ戻るアイコンの制御
    const scrollTopEle = document.getElementById('scrollTop');
    const duration = 500;
    scrollTopEle.addEventListener('click', function () {
        let currentY = window.pageYOffset;
        const step = duration / currentY > 1 ? 10 : 100;
        const timeStep = duration / currentY * step;
        const intervalID = setInterval(scrollUp, timeStep);

        function scrollUp() {
            currentY = window.pageYOffset;
            if (currentY === 0) {
                clearInterval(intervalID);
            } else {
                scrollBy(0, -step);
            }
        }
    });

    // 画面スクロール時の制御
    window.onscroll = function () {
        scrollFunction();
    };

    function scrollFunction() {
        const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop < 100) {
            scrollTopEle.style.display = 'none';
        } else {
            scrollTopEle.style.display = 'block';
        }
    };


    // ハンバーガーメニューの制御
    const hamburger = document.getElementById('hamburger');
    const blackScreen = document.getElementById('blackScreen');
    function toggleNav(Flg) {
        if (Flg === true) {
            hamburger.addEventListener('click', hamburgerClick);
            blackScreen.addEventListener('click', blackBgClick);
        } else {
            hamburger.removeEventListener('click', hamburgerClick);
            blackScreen.removeEventListener('click', blackBgClick);
        }
    };

    function hamburgerClick() {
        document.body.classList.toggle('navOpen');
    };

    function blackBgClick() {
        document.body.classList.remove('navOpen');
    };

    if (window.innerWidth < 1025) {
        toggleNav(true);
    } else {
        scrollFunction();
    }

    window.addEventListener('resize', function () {
        if (window.innerWidth < 1025) {
            toggleNav(true);
        } else {
            toggleNav(false)
        }
    }, false);
};

ブラウザで表示を確認する

コンテンツの作成が完了したので、ブラウザでどのように表示されるか確認してみましょう。
XAMPPを立ち上げて、Apacheの「Start」ボタンを押下して起動します。
起動したらブラウザを立ち上げましょう。
私はメインでグーグルクロームを使用していますので、グーグルクロームでの説明をします。
ブラウザが起動したら、アドレスバーに「localhost/corporate/html/main.php」と入力してください。
下のように表示されていれば成功です。画面の表示を整えるステップに進みましょう。

スタイル適用前のブラウザ表示の画像

スタイルの設定

作成したファイルにスタイルの設定を記述してきます。
作成したファイルに下記内容をコピー&ペーストしてください。
たくさんの設定の記述がありますが、詳細の説明は省かせていただきます。

reset.css

リセットスタイルの記述です。

今回は「HTML5 Doctor Reset CSS」を使用させていただきました。
どのようなブラウザで表示しても、表示崩れがおきないようにいったん表示を統一するスタイルの設定です。

http://html5doctor.com/html-5-reset-stylesheet/

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
    line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

    nav ul {
        list-style: none;
    }

blockquote, q {
    quotes: none;
}

    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

/* change colours to suit your needs */
ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}

/* change colours to suit your needs */
mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}

input, select {
    vertical-align: middle;
}

ブラウザを更新してみてください。
下のように文字の間隔が詰まって表示されていれば成功です。
画面の表示を画面設計図のように設定していきましょう。

リセットスタイル適用後のブラウザ表示の画像

style.css

個別スタイルの記述です。
大枠は画面設計図のように整えていきます。
細かな設定は、見た目を重視して整えていきます。

/* 全体のスタイル */
body {
    background-color: #FAFAFA;
    font-family: "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
}

header, section, footer {
    margin-bottom: 16px;
    background-color: white;
    line-height: 2;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
}

section {
    padding: 16px;
    width: 95%;
    margin: 0 auto;
}

h1, h2, h3 {
    font-size: 120%;
}

a:hover {
    color: blue;
}

img {
    max-width: 100%;
    vertical-align: top;
}

/* ヘッダーエリアのスタイル */
header h1 {
    font-size: 180%;
    position: absolute;
    top: 30px;
    left: 30%;
    color: white;
}

/* メニューのスタイル */
.globalNav {
    position: fixed;
    right: -50%;
    top: 0;
    width: 50%;
    height: 100%;
    padding-top: 40px;
    background-color: #FFF;
    transition: all .6s;
    z-index: 200;
    overflow: auto;
}

.hamburger {
    position: fixed;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 300;
}

.globalNavList {
    margin: 0;
    padding: 0;
    list-style: none;
}

.globalNavItem {
    padding: 0 16px;
}

    .globalNavItem a {
        display: block;
        padding: 8px 16px;
        border-bottom: 1px solid blue;
        text-decoration: none;
    }

        .globalNavItem a:hover {
            background-color: blue;
            color: white;
        }

.hamburgerLine {
    position: absolute;
    left: 11px;
    width: 18px;
    height: 1px;
    background-color: #000;
    transition: all .6s;
}

.hamburgerLine1 {
    top: 14px;
}

.hamburgerLine2 {
    top: 20px;
}

.hamburgerLine3 {
    top: 26px;
}

.blackScreen {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: #000;
    opacity: 0;
    visibility: hidden;
    transition: all .6s;
    cursor: pointer;
}

.navOpen .globalNav {
    right: 0;
}

.navOpen .blackScreen {
    opacity: .8;
    visibility: visible;
}

.navOpen .hamburgerLine1 {
    transform: rotate(45deg);
    top: 20px;
}

.navOpen .hamburgerLine2 {
    width: 0;
    left: 50%;
}

.navOpen .hamburgerLine3 {
    transform: rotate(-45deg);
    top: 20px;
}

/* コンテンツのスタイル */
article dd {
    margin-left: 16px;
}

article th {
    text-align: right;
    width: 10%;
    min-width: 100px;
    padding-right: 16px;
}

.mail table {
    width: 100%;
}

.mail th {
    text-align: right;
    vertical-align: top;
    padding-right: 16px;
    width: 40%;
    min-width: 140px;
}

#name {
    width: 60%;
    max-width: 160px;
}

#email {
    width: 80%;
    max-width: 180px;
}

#content {
    width: 80%;
    max-width: 300px;
    height: 80px;
}

.mail .center {
    text-align: center;
}

/* フッターのスタイル */
footer {
    text-align: center;
}

/* トップへ戻るアイコンのスタイル */
#scrollTop {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 100;
    background-color: blue;
    opacity: 0.5;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: none;
}

    #scrollTop:hover {
        opacity: 1;
    }

#triangle {
    width: 0;
    height: 0;
    margin-left: 13px;
    margin-top: 3px;
    border-top: solid 12px transparent;
    border-right: solid 12px transparent;
    border-bottom: solid 18px white;
    border-left: solid 12px transparent;
}

/* 画面サイズ1025px以上の設定 */
@media screen and (min-width:1025px) {
    /* ヘッダーエリアのスタイル */
    header h1 {
        font-size: 300%;
        left: 40%;
    }
    /* メニューのスタイル */
    .hamburger {
        display: none;
    }

    .globalNav {
        position: static;
        width: 100%;
        padding: 0;
        height: 100%;
    }

    .globalNavList {
        width: 100%;
        display: flex;
    }

    .globalNav .globalNavItem {
        width: 25%;
        padding: 5px;
        text-align: center;
    }

        .globalNav .globalNavItem a {
            border: 1px solid blue;
            min-height: 64px;
        }

    /* コンテンツエリアのスタイル */
    .centerArea {
        width: 80%;
        margin: 0 auto;
        display: flex;
    }

    .content {
        width: 70%;
    }

    .side {
        width: 29%;
        margin-left: 1%;
    }
}

ブラウザで表示を確認する

スタイルの設定が完了したので、ブラウザでどのように表示されるか確認してみましょう。
XAMPPを立ち上げて、Apacheの「Start」ボタンを押下して起動します。
起動したらブラウザを立ち上げましょう。
私はメインでグーグルクロームを使用していますので、グーグルクロームでの説明をします。
ブラウザが起動したら、アドレスバーに「localhost/corporate/html/main.php」と入力してください。
以下のように表示されていれば成功です。
各ページへのリンクをクリックしてすべての画面の表示が整っていることを確認しましょう。
また、ブラウザのサイズを大きくしたり小さくしたりして表示が整っていることを確認しましょう。

ブラウザ表示の画像

ファイルをアップロードする

お疲れさまでした。コーポレートサイトの作成は完了です。
世界中に公開できるように、ファイルをアップロードしましょう。

ファイルアップロードを始める
サーバレンタルがまだの場合はこちら
サーバレンタルを始める

サーバにアップロードされたコーポレートサイトを確認する

こちらから実際に公開されているコーポレートサイトをご確認いただけます。

コメント、お問い合わせはこちら

お名前

メールアドレス

内容

下記サービスにてお仕事受付中です

このサイトの制作者

制作者画像

阿見 孝則(Takanori Ami)

以前は接客業などのサービス業を中心とした業務に従事していました。
しかし、無理がたたり身体を壊してしまったため転職を考えました。
座り仕事の事務職などを検討しましたが、これからの時代やニーズを考えた時に、「WEB」の世界に興味を持ちました。
2005年頃からのWEBサイトの発展はめざましいものがあり、動的なページに目を奪われ感嘆しました。
そんなWEBサイトを自分の手で作ってみたいという思いから、2015年から学習を始めました。
2016年よりシステムエンジニアとしてWEBサイト・WEBアプリケーションの設計~製造を実施しています。
最近では、WEBの何でも屋を目指しつつ、色々なことを勉強しています。

自己紹介サイト「AllSite」を開く

制作者の画像にはイラストレーターI<アイ>さんの画像を利用させていただいてます。

イラストボックス>I<アイ>さんのページ