HTMLとCSSで会社ロゴを作ってみました！

- コーディング
2022.10.16 Sun

先日、学校でHTMLのtableタグについて学びました。

復習のために表を作ろうと思ったのですが、やる気が出ず、某不動産会社さまのコーポレートロゴを作ることにしました。

色もついているからなんだか楽しく作れそう…！！

tableタグとは

tableタグとは表を作るときに使用する要素のことです。

tableタグを使用した表の作り方

tableタグの難しさは「セルの結合」にあり！

表を作成するソフトとして、WordやExcelがありますよね。

しかし、「WordやExcel」と「HTMLのtableタグ」では、セルを結合する時の考え方が異なります。

考え方の違いをまとめてみました。

AというセルとBというセルがあるとします。

WordやExcelでは、A・Bの２つのセルを結合すると、Aのセルが大きくなってBのセルは消えます。

しかし、HTMLのtableタグは、２つのセルを結合すると、Aのセルが大きくなってBのセルは消えずに残ります。

つまり、HTMLのtableタグを結合する場合には、余ったBのセルを削除しなければなりません。

なぜなら、余ったセルを削除しなければ、表からはみ出てしまうからです。

完成したコーポレートロゴ

↓完成したロゴがこちら↓

ページを開くmake.openhouse.logo

作ったのは、OPENHOUSEさまのロゴです！

長さや色味は実際とは異なりますが、私なりにうまく再現できたのではないかと思います。

完成した喜びからHOUSEのつづりをミスしていますが、許してください。

コードを見てみよう

↓完成したロゴがこちら↓

ページをもう一度開くmake.openhouse.logo

１つの表で完成させようとすると構造が複雑になるため、上と下２つの表を組み合わせて作りました。左の突起部分は上の表の疑似要素として追加しました。

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>openhouse</title>
    <link rel="stylesheet" href="https://unpkg.com/modern-css-reset/dist/reset.min.css" />
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div class="inner">
        <div class="table-all">
            <!--上の段-->
            <table class="upper" border="8" cellpadding="" cellspacing="0">

                <caption>好立地、ぞくぞく。</caption>

                <td class="upper-left" colspan="3" rowpan="3"></td>
                <td class="upper-center" rowspan="7"></td>
                <td class="upper-right" rowspan="7"></td>
                </tr>

                <tr>
                    <td class="upper-leftside" colspan="2" rowspan="4"></td>
                    <td class="forbox"></td>
                </tr>
                <tr>

                    <td class="forbox"></td>
                </tr>
                <tr>

                    <td class="forbox"></td>
                </tr>
                <tr>

                    <td class="forbox"></td>

                </tr>

            </table>


            <!-- 下の段 -->
            <table class="lower" border="8" cellspacing="0">
                <tr>
                    <td class="lower-left"></td>
                    <td class="lower-center" rowspan="2"></td>
                    <td class="lower-right" rowspan="2"></td>
                </tr>
                <tr>
                    <td class="lower-leftbottom"></td>
                    <!-- <td></td> -->
                    <!-- <td></td> -->
                </tr>

            </table>
            <h1><span>OPEN</span><br>HOUCE</h1>
        </div>

    </div>
</body>

</html>

@charset "utf-8";

.inner {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
}



table {
    margin-left: auto;
    margin-right: auto;
    border-color: #000000;
}

caption {
    margin-bottom: 30px;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 0.3em;
}

/* 上の段 */
.upper {
    position: relative;
    z-index: 10;
    width: 400px;
    height: 240px;
    border-bottom-width: 1px;

}

/* 突起部分 */
.upper::after {
    position: absolute;
    top: 63%;
    left: -90px;
    content: "";
    display: inline-block;
    width: 90px;
    height: 90px;
    border-radius: 100% 0 0 0;
    background: #000000;
    z-index: 20;

}

.upper-left {
    background-color: #addef8;
    width: 35%;
    height: 35%;
    border-bottom-width: 6px;

}

.upper-leftside {
    background-color: #ffe037;
    width: 15%;
    border-right-width: 6px;
    border-bottom-width: 6px;
}

.forbox {
    border-bottom-width: 3px;
}

.upper-center {
    background-color: #d7000f;
    width: 45%;
    border-width: 0 6px 6px;
}

.upper-right {
    background-color: #addef8;
    width: 20%;
    border-bottom-width: 6px;
}


/* 下の段 */
.lower {
    width: 400px;
    height: 160px;
    border-top: 0;
}

.lower-left {
    width: 20%;
    height: 35%;
    border-right-width: 0;
}

.lower-center {
    width: 60%;
    border-left-width: 0;
}

.lower-right {
    background-color: #ffe037;
    width: 20%;
    background-image: linear-gradient(-66deg, transparent 48%, black 50%, black 52%,
            transparent 50%, transparent);
    /* 右上がりの斜線 */
    border-left-width: 6px;
}

.lower-leftbottom {
    background-color: #d7000f;
    border-color: #000000;
    border-width: 6px 6px 0 0;
}

h1 {
    margin-top: 30px;
    text-align: center;
    font-size: 90px;
    line-height: 1.2;
    letter-spacing: 0.07em;
}

span {
    font-size: 120px;
    letter-spacing: 0.1em;


}

コーディングするときに気をつけたこと

私が気をつけたことは、２つあります。

１つ目は、それぞれのセル（tdタグ）にclass名をつけることです。

class名は、「left」や「center」など位置を示す言葉を使いました。

これは、後にCSSで大きさや色などを変更するときに自分がわかりやすくなるようにしたかったからです。

２つ目は、セルを囲う線の太さを忠実に再現することです。

上下左右すべて同じ太さならば、border-width : 〇〇px ; と書きます。

しかし、それぞれ太さが違うセルもあったので、上下左右それぞれに値を書きました。

またセルの結合をすると全体のバランスが崩れる場合は、セルの数はそのままにして、罫線を０pxにすることで、スペースを大きく見せました。

/* まとめて変更する場合 * /
border-width:　上px 右px 下px 左px;

/* それぞれ変更する場合 */
/* 上 */
barder-top-width:10px;

/* 下 */
barder-bottom-width:10px;

/* 右 */
barder-right-width:10px;

/* 左 */
barder-left-width:10px;