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の学習ステップ一覧

 

その他HTML/CSSに関する記事

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

 

続きを見る

【最新】HTML/CSSを習得できるプログラミングスクールランキングと書かれた画像
HTML/CSSを習得できるプログラミングスクールランキング

  あなたすいません、まだHTML/CSSについてよくわかっていないのですが、そもそもどんなものなのでしょうか?   こんな疑問に簡単に答えていきます。   WEBサイト ...

続きを見る

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

 

続きを見る

テックアカデミーでHTMLとCSSを無料で学ぶ技【初心者必見】と書かれた画像
テックアカデミーでHTMLとCSSを無料で学ぶ技【初心者必見】

  あなた簡単に無料教材を手に入れることができました!でも少し質問があるのですがいいですか?   この章ではテックアカデミーの無料教材についてよくある質問に対して答えていきます。 ...

続きを見る

HTMLとCSSの意味をエンジニアの僕が解説【1から学べる】と書かれた画像
HTMLとCSSの意味をエンジニアの僕が解説【1から学べる】

  あなたHTMLの意味とCSSの意味はわかりました。2つを使うと何ができるんでしょうか?   HTMLとCSSの意味を理解して2つを使えるようになると以下のことができます。 ・W ...

続きを見る

HTMLとCSSのオススメ教材を紹介【無料あり】と書かれた画像
HTMLとCSSのオススメ教材を紹介【無料あり】

  てんし君 大手プログラミングスクールのテックアカデミーが自社アピールのために提供しています。 大手の会社の教材なので情報も正確で信頼できます。   無料教材を手に入れる方法はコ ...

続きを見る

HTMLとCSSの入門方法【現役エンジニアの僕が解説】と書かれた画像
HTMLとCSSの入門方法【現役エンジニアの僕が解説】

  あなた本当に0円なの?急に有料になったりしない?   このように思う方もいると思いますが安心してください。 まったく料金はかかりませんし、無料教材を手にいれたからと言って本コー ...

続きを見る

HTMLとCSSの初心者は何をすべき?【経験をもとに解説】と書かれた画像
HTMLとCSSの初心者は何をすべき?【経験をもとに解説】

 

続きを見る

HTMLとCSSが難しいと感じた時に僕がとった行動と書かれた画像
HTMLとCSSが難しいと感じた時に僕がとった行動

 

続きを見る

HTMLとCSSを独学で1カ月勉強してみた結果【超成長した】と書かれた画像
HTMLとCSSを独学で1カ月勉強してみた結果【超成長した】

  てんし君   この記事を読んでわかること ①HTML・CSSの独学勉強方法 ②HTML・CSSの独学のきつい点 ③HTML・CSSを勉強した後にエンジニアになった僕の話 &nb ...

続きを見る

HTMLとCSSの初心者は模写をしよう【僕もやりました】と書かれた画像
HTMLとCSSの初心者は模写をしよう【僕もやりました】

 

続きを見る

HTMLとCSSの資格はあるの?必要?【現場の声を伝えます】と書かれた画像
HTMLとCSSの資格はあるの?必要?【現場の声を伝えます】

  てんし君実践的なテスト内容が特徴ですね。 実務経験者が腕試しで受けるのはいいかもしれませんが、初心者の方は特にこの試験のために頑張る必要はないかなと思います。 この資格を持ってる方も見た ...

続きを見る

僕がHTMLとCSSのアウトプットに使った方法を紹介【必見】と書かれた画像
僕がHTMLとCSSのアウトプットに使った方法を紹介【必見】

  あなたアウトプットの方法はわかりました。でもインプットのタイミングはどうすればいいのでしょうか?   ここまではHTMLとCSSのアウトプットの方法をメインに解説してきました。 ...

続きを見る

-HTML/CSS

Copyright© エンジニアてんし君ブログ , 2021 All Rights Reserved.