HTML/CSS

WEBサイトのタイトルをCSSでデザインしてみよう【大きさや場所を変更】

2021年1月17日

WEBサイトのタイトルをCSSでデザインしてみよう【大きさや場所を変更】と書かれた画像

 

あなた
HTMLのBody要素を表示させるところまではできました。いい感じに見た目を調節していきたいです。

 

これまではプログラミング未経験者の方に向けてHTMLとCSSの意味やWEBページの基本を解説してきました。

前回はHTMLのbody要素について解説しましたね。

前回の記事:HTMLのbody要素とは?【メイン部分を実装していこう】

 

今回は上記のような要望に答えるべく、body要素をCSSで装飾していきます。

 

※補足

この記事は連載の1つです。

以下の学習ステップを歩んできていることを想定しています。

>>【完全無料】HTMLとCSSの学習ステップ一覧

 

HTMLとCSSの学習ステップ一覧と書かれた画像
【完全無料】HTMLとCSSの学習ステップ一覧

  てんし君こちらはプログラミング初心者の方向けのHTMLとCSSの基本的な学習用ページです。   ここで紹介している学習カリキュラムをやりきれば、最終的にこちらのようなWebサイトを作成可能です。 ...

続きを見る

 

ではさっそく見ていきましょう。

 

CSSでタイトルの要素を編集しよう

 

あなた
タイトルをいい感じにしたいです。

 

前回までで、body要素を表示することはできましたね。

ここからは要素ごとに細かく表示を変えていきます。

 

今回はタイトルの表示部分の見た目を整えていきますです。

 

タイトル部分を把握する

 

まずはHTMLファイルのどの部分によってサイトタイトルが表示されているかを把握しましょう。

 

以下の部分がHTMLファイルでタイトルを表示しています。

 

<body>
    <div id="container">
        <header>
            <div id="title">
                <h1><a href="#">デモサイト1</a>
                    <h1>
            </div>
        </header>
    </div>
</body>

 

まずはbodyを装飾していきましょう。

要素を指定してCSSで装飾する方法はこちらで解説しています。

>>CSSでHTML要素を指定してデザインする方法

デザインする人
CSSでHTML要素を指定してデザインする方法

  前回はHTMLの決まり文句のタグの書き方について解説しました。 前回:HTMLで表示するための決まり文句のタグの意味を理解しよう   HTMLの書き方についてはだいぶ理解が深まってきたかと。   ...

続きを見る

 

body {
	margin: 0px;
        padding: 0px;
        width: 100%;
        height: 100%;
	background-repeat: repeat-x;
}

 

ちなみにmarginとpaddingは余白のことです。

それぞれの余白の場所は異なります。

以下の画像のオレンジの部分がmarginで緑がpaddingです。

 

marginとpaddingの説明

 

ちなみに青の部分が指定するHTMLの要素です。

つまりbody要素に対するCSSでは「margin:0」「paddinng:0」を指定しているので完全に余白を消しているということです。

 

 

他のプロパティと値の意味は以下のとおりです。

 

参考

width: 100% → 横幅を画面いっぱいに
height: 100% → 縦幅を画面いっぱいに

background-repeat: repeat-x; → 背景画像を横に繰り返す



次に「container」というIDを指定して装飾を加えましょう。

さきほどの続きで以下のCSSを追記してください

 

#container {
    width: 900px;
    height: 600px;
    margin: 0px auto 0px auto;
    float: none;
}

 

idを指定するときは先頭に「# 」をつけます。

それぞれの意味は次のとおりです。

 

参考

width: 900px → 横幅を900ピクセルにする

height: 600px → 縦幅を600ピクセルにする

margin: 0px auto 0px auto → 上下は0px、左右は自動の余白にする

float: none → 配置指定なし

(ちなみにmarginやpaddingを4つ指定すると上、右、下、左の順番で装飾されます)

 

実際に確認してみましょう。

左右はmarginがついていますね(オレンジの部分です)

 

 左右にmarginがついている様子

 

header要素やその中身の要素を指定してあげましょう。

cssに以下を追加してください。

 

header {
	height: 120px;
	width: 900px;
}

header h1 {
    margin: 0px;
    padding: 0px;
}

header #title {
	float: left;
	height: 100px;
	width: 300px;
}

header #title h1 {
    margin-top: 40px;
}

 

あなた
全部headerで指定してあげるのはだめなの?

 

headerの中に他の要素が入ったときにフォントが崩れてしまう可能性があります。

header内で共通して使う装飾だけを書きましょう。

てんし君

 

ちなみに各指定部分の意味は次の通り。

 

参考

・header h1 → headerの中のh1

・header #title  → headerの中のtitleというID要素

・header #titleh1 → headerの中のtitleというID要素の中のh1

 

cssのfloat: leftは「左寄せ」を意味します。

以下のような表示になっていれば成功です。

見本サイトのヘッダー要素

色々CSSを変更してタイトルをいじってみよう

 

ということで今回はタイトル部分をCSSで装飾して変更しました。

各プロパティの値を色々変えてみて変化を見てみるとしっかり分かると思います。

 

このように「CSSを使うと見た目がととのっていくのだなー」と思って貰えればOKです。

 

今回はここまでです。

次回はナビメニューをCSSで整えていきます。

>>次の回:HTMLのナビメニューをCSSで装飾する方法

 

\ HTMLとCSSについて最初から学びたい方はこちら /

HTMLとCSSの学習ステップ一覧と書かれた画像
【完全無料】HTMLとCSSの学習ステップ一覧

  てんし君こちらはプログラミング初心者の方向けのHTMLとCSSの基本的な学習用ページです。   ここで紹介している学習カリキュラムをやりきれば、最終的にこちらのようなWebサイトを作成可能です。 ...

続きを見る

 

\ Web制作の副業で今すぐ稼ぎたい方はこちら /

wordpress
【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

  あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの? スクール選びで失敗はしたくないです。   ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...

続きを見る

 

プログラミングスクールに関する情報

【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】と書かれた画像
【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】

  あなたプログラミングスクールに通いたいけどたくさんありすぎてどこがいいのかわかりません。   最近はエンジニアブームということもありプログラミングスクールが増えました。 一方でたくさんありすぎてど ...

続きを見る

返金保証ありのプログラミングスクールランキング【エンジニアが選びました】と表示されたパソコンの画面
【転職保証つき】返金保証ありのプログラミングスクールランキング【エンジニアが選びました】

  あなた返金保証がついているオススメのプログラミングスクールってありますか?   結論から話すと、返金保証つきのプログラミングスクールランキングは次の通りです。   1位:DMMWEBキャンプ  【 ...

続きを見る

wordpress
【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

  あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの? スクール選びで失敗はしたくないです。   ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...

続きを見る

フリーランス
無料あり:フリーランスを目指せるプログラミングスクールランキング【体験をもとに徹底分析しました】

  あなたフリーランスエンジニアを目指すことができるプログラミングスクールってありますか?   最近では、高年収や働きやすさの魅力からフリーランスエンジニアを目指す方も増えてきました。 結論から話すと ...

続きを見る

WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】と書かれた画像
WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】

  あなたWEB系の自社開発企業に就職したいです。 オススメのスクールを教えて下さい。   結論から話すと、WEB系自社開発に行きやすいスクールのランキングは以下の通り。   第1位:テックアカデミー ...

続きを見る

-HTML/CSS

© 2022 エンジニアてんし君ブログ