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でデザインする方法

 

【この記事の信頼性】

この記事を書いている僕は現役のWEBエンジニアです。

普段からHTMLとCSSを使ってWEBページを制作しています。

 

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

 

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

 

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

 

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

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

 

今回はタイトルです。

 

【この章でわかること】

✔ CSSでタイトルを編集する方法

 

タイトル部分を把握する

 

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

 

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

 

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

 

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

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

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

 

body {
	margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
}

 

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

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

 

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

 

marginとpaddingの説明

 

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

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

 

 

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

 

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

次に「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、左右は自動の余白にする

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

 

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

 

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

 

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

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

 

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

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

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

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

 

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

 

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

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

てんし君

 

ちなみに

header h1 → headerの中のh1

 

header #Logo_area  → headerの中のLogo_areaというID要素

 

header #Logo_area h1 → headerの中のLogo_areaというID要素の中のh1

 

を示しています。

 

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

 

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

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

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

 

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

値を色々変えてみて変化を見てみるとしっかり分かると思います。

 

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

 

今回はここまでです。

 

HTMLとCSSの教材をまだ準備していない方は準備しましょう。

>>HTMLとCSSのオススメ教材を紹介【失敗しない】

 

学習ステップの全体はコチラ

>>HTMLとCSSの学習ステップ一覧

 

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

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

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

続きを見る

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

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

続きを見る

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

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

続きを見る

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

  あなたWEB系の自社開発企業に就職したいです。 オススメのスクールを教えて下さい。   エンジニアを目指すにあたってまず最初に自社開発企業への転職を希望する方がほとんどです。 ...

続きを見る

プログラミンングスクールに無料で通うならココ【現役エンジニアおすすめ】と書かれた画像
プログラミンングスクールに無料で通うならココ【現役エンジニアおすすめ】

  あなたプログラミングスクールに通いたいけどどのスクールも何十万もして通えません。コスパよくエンジニアになれるスクールはありますか?   今回はコスパが良いどころか完全に無料でプ ...

続きを見る

-HTML/CSS

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