HTML/CSS

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

投稿日:2020年12月20日 更新日:

CSSでHTML要素を指定してデザインする方法と書かれた画像

 

あなた
CSSでHTMLの要素を指定してデザインする方法を知りたいです。

 

今までは主にHTMLの書き方の基本について解説してきました。

今回はそのHTMLを装飾するCSSの書き方について解説します。

 

そもそもCSSってなんなの?というレベルの方はこちらを参考にしてください。

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

 

【この記事でわかること】

CSSでHTMLを装飾する方法

 

【この記事の信頼性】

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

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

 

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

 

(この記事は連載記事の1つです。最初から見たい方はコチラから見れます。)

>>HTMLとCSSの学習ステップ一覧はコチラ

 

CSSでHTML要素を装飾する方法

 

今回はindex.htmlというファイルをstyle.cssというcssファイルで装飾していきます。

cssを読み込む方法はこちらで解説しています。

>>HTMLでCSSを読み込む方法

 

ソースコードは以下です。

 

<!doctype html>
<html>

    <head>
        <title>テストサイト</title>
        <meta charset="utf-8">
        <link href="css/style.css" rel="stylesheet" type="text/css" media="all">
    </head>

    <body>
        <div id="container">
            <header>
                <div id="Logo_area">
                    <h1><a href="#">デモサイト1</a>
                        <h1>
                </div>
                <div id="Navi_area">
                    <ul>
                        <li><a href="#">DEMO1</a></li>
                        <li><a href="#">DEMO2</a></li>
                        <li><a href="#">DEMO3</a></li>
                        <li><a href="#">DEMO4</a></li>
                    </ul>
                </div>
            </header>
            <main>
                <img src="images/MainImage.png" alt="メイン画像">
                <div id="Side_navi">
                    <ul>
                        <li id="navi01">
                            <h2><a href="#">トップ</a></h2>
                        </li>
                        <li id="navi02">
                            <h2><a href="#">デモサイト集</a></h2>
                        </li>
                        <li id="navi03">
                            <h2><a href="#">学習</a></h2>
                        </li>
                        <li id="navi04">
                            <h2><a href="#">制作実績</a></h2>
                        </li>
                        <li id="navi05">
                            <h2><a href="#">お問合わせ</a></h2>
                        </li>
                    </ul>
                </div>
                <div id="Main_box">
                    <div class="MainBox_item">
                        <div class="MainTitle">
                            <h2>注目記事</h2>
                        </div>
                        <div class="MainBox_news">
                            <p>2020年8月12日 <a href="" #>サイトを解説しました</a></p>

                            <p>デモサイトを公開しました。</p>
                        </div>
                    </div>

                    <div class="MainBox_item">
                        <div class="MainTitle">
                            <h2>新着情報  [NEWS]</h2>
                        </div>

                        <div class="MainBox_news">
                            <p>2020年8月13日 <a href="" #>1記事目</a></p>

                            <p>自己紹介です。</p>
                        </div>

                        <div class="MainBox_news">
                            <p>2020年8月14日 <a href="" #>2記事目</a></p>

                            <p>デモサイト1を公開しました。</p>
                        </div>

                        <div class="MainBox_news">
                            <p>2020年8月15日 <a href="" #>2記事目</a></p>

                            <p>デモサイト2を公開しました。</p>
                        </div>

                        <div class="MainBox_news">
                            <p>2020年8月16日 <a href="" #>2記事目</a></p>

                            <p>デモサイト3を公開しました。</p>
                        </div>

                        <div class="MainBox_news">
                            <p>2020年8月17日 <a href="" #>2記事目</a></p>

                            <p>デモサイト4を公開しました。</p>
                        </div>
                    </div>

                    <div class="MainBox_item">
                        <div class="MainTitle">
                            <h2>最新のブログ記事 [BLOG]</h2>
                        </div>

                        <div class="MainBox_news">
                            <p>WEBサイト案件で稼げるようになりました。</p>
                        </div>
                    </div>
                </div>
                <div id="Banner_box">
                    <a href="#"><img src="images/test1.jpg" class="side_image" alt="1"></a>
                    <a href="#"><img src="images/test2.jpg" class="side_image" alt="2"></a>
                </div>
            </main>
            <footer> © 2016 Tenshikun All rights reserved.</footer>
        </div>
    </body>

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

p {
    font-size: 12px;
    line-height: 150%;
}

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

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 #Navi_area {
	float: right;
	height: 100px;
	width: 580px;
    
}

header #Navi_area #Banner {
    float: right;
    margin-right: 30px;
}

header #Navi_area ul {
    list-style-type: none;
    font-size: 10px;
    margin-top: 100px;
}

header #Navi_area li {
    display: inline;
    float: right;
    width: 70px;
    border-left-style: solid;
    border-left-width: 1px;
    border-left-color: #050505;
    padding-left: 8px;
}

header #Navi_area li a {
    text-decoration: none;
    color: #000;
}

header #Navi_area li a:hover {
    color: #09F;
    text-decoration: underline; 
}

main {
    height: auto;
    width: 900px;
}

main #Side_navi {
    height: 300px;
    width: 210px;
    float: left;
    margin-top: 30px;
}

#Side_navi ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #000;
}

#Side_navi ul #navi01 {
    margin: 0px;
    padding: 0px;
    width: 210px;
    height: 46px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #000;
}

#Side_navi ul #navi02 {
    margin: 0px;
    padding: 0px;
    width: 210px;
    height: 46px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #000;
}
#Side_navi ul #navi03 {
    margin: 0px;
    padding: 0px;
    width: 210px;
    height: 46px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #000;
}
#Side_navi ul #navi04 {
    margin: 0px;
    padding: 0px;
    width: 210px;
    height: 46px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #000;
}
#Side_navi ul #navi05 {
    margin: 0px;
    padding: 0px;
    width: 210px;
    height: 46px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #000;
}

#Side_navi ul a:hover img {
    visibility: hidden;
}


#Side_navi ul h2 {
    margin: 0px;
    padding: 0px;
}

main #Main_box {
    height: auto;
    width: 450px;
    float: left;
    margin: 30px 0px 0px 20px;
}

#Main_box .MainBox_item {
    width: 450px;
    float: left;
    margin-bottom: 20px;
}

#Main_box .MainBox_item .MainTitle {
    width: 450px;
    height: 25px;
    margin-top: 0px;
    margin-bottom: 7px;  
}

#Main_box .MainBox_item .MainTitle h2 {
    font-size : 12px;
    color: 4A4A4A;
    margin: 0 0 0 10px;
    padding: 5px;
}

#Main_box .MainBox_item img {
    float: left;
}

#Main_Box .MainBox_item a {
	color: #F63;
}

#Main_box .MainBox_item .MainBox_news {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom-width: 1px;
    border-bottom-color: #747474;
    border-bottom-style: solid;
}


main #Banner_box {
    height: 300px;
    width: 200px;
    float: right;
    margin-top: 30px;
}

footer {
	clear: both;
    height: 20px;
    width: 900px;
    background-color: #000;
    font-size: 10px;
    text-align: center;
    color: #FFF;
    line-height: 17px;
    margin: 0 auto 0 auto;
}


.side_image{
   border: 1px solid #474747;
}

 

ファイルの位置は以下のようになっています。

 

見本サイトのフォルダ構造

 

見た目はこうなっています。

画像は以下の記事で載せています。

>>HTMLとCSSとWEBページの関係性【理解できます】

 

見本サイト

 

ではさっそくの「CSSでHTML要素を装飾する方法」です。

 

その方法は結論から話すと以下になります。

 

cssファイル

HTML要素{

装飾の名前(プロパティ):具体的な装飾指示

}

 

こういってもわかりにくいと思うので、さきほど用意したstyle.cssをいじってみましょう。

 

例えばp要素をデザインしているのがこの部分です。

style.css

p {
font-size: 12px;
line-height: 150%;
}

 

p要素というのはHTMLファイルの<p></p>で囲まれた部分でしたね。

HTMLの要素はコチラで解説しています。

>>HTMLの要素を理解しよう

 

ちなみにcssの装飾の意味はそれぞれ以下のとおりです。

font-size→文字の大きさ
line-height→行の高さ
 
つまりp要素を指定して文字のサイズや行の高さを変えているということです。
 
 
ではさっそく以下のように変更してみましょう。

style.css

p {
font-size: 30px;
line-height: 150%;
}

 

 

pタグで囲まれた部分の文字(2020年...のところ)が大きくなりましたね。

 

次に行間のサイズも変えてみましょう。

 

style.css

p {
font-size: 30px;
line-height: 50%;
}

 

行間が50%になったので1部でかぶりがおきてしまっていますね。

ただ今回は指定した要素のデザインが変わっていることを確認するのも目的とするのでOKです。

 

 

以上がCSSでHTML要素を指定して装飾する方法です。

もちろん同様にして色を変えたりなどたくさんのことができます。

 

それは今後紹介していきます。

今回はここまでです。

ありがとうございました。

 

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

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

 

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

>>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.