はなっふぃーアウトプット部屋　SkillHacks受講CSS編

     <img src=”https://pbs.twimg.com/profile_images/1340917953181585408/gXfGfKwG_400x400.jpg”>
    <p>はなっふぃー</p>
    <ul>
            <li><a href =”https://hanaffi-fleelife.blog/”>ホーム</a></li>
            <li><a href =”https://twitter.com/hanaffi_life”>Twitter</a></li>
            <li><a href =”https://yukisako99.com/l/c/ArWorOML/pxt2mX03″>SkillHacks申し込みは
            こちら</a></li>
    </ul>
    <p>こんにちは！はなっふぃーです！！</p>
    <p>仕事は携帯電話の販売をしています。</p>
    <p>プログラミングを勉強中です！</p>
    <p>趣味はゲームとダーツです。</p>
    <h2>好きな食べ物は</h2>
    <ul>
        <li>ケーキ</li>
        <li>ハンバーグ</li>
        <li>オムライス</li>
    </ul>
    <h2>好きな本</h2>
    <ul>
        <li>アウトプット大全</li>
        <li>多分そいつ、今ごろパフェとか食ってるよ</li>
        <li>金持ち父さん、貧乏父さん</li>
    </ul>

    <img src=”https://pbs.twimg.com/profile_images/1340917953181585408/gXfGfKwG_400x400.jpg”>
　<p>はなっふぃー</p>
    <ul>
        <li class =”inline”><a href =”https://hanaffi-fleelife.blog/”>ホーム</a></li>
        <li class =”inline”><a href =”https://twitter.com/hanaffi_life”>Twitter</a></li>
        <li class =”inline”><a href =”https://yukisako99.com/l/c/ArWorOML/pxt2mX03″>SkillHacks申し込みは
            こちら</a></li>
        <!- liタグそれぞれに”inline”のクラスを付与->
    </ul>
    <div id =”name”> <!- 自己紹介の部分をdivタグで囲い”name”のidを付与　->
        <p>こんにちは！はなっふぃーです！！</p>
        <p>仕事は携帯電話の販売をしています。</p>
        <p>プログラミングを勉強中です！</p>
        <p class =”red”>趣味はゲームとダーツです。</p> <!- 文字の色を変えたいため、”red”のclassを付与->
    </div>
    <div id =”food”> <!- 食べ物の部分をdivタグで囲い”name”のidを付与　->
        <h2>好きな食べ物</h2>
        <ul>
            <li>ケーキ</li>
            <li>ハンバーグ</li>
            <li>オムライス</li>
        </ul>
    </div>
    <div id =”book”><!-　本の部分をdivタグで囲い”book”のidを付与　->
        <h2>好きな本</h2>
        <ul>
            <li>アウトプット大全</li>
            <li>多分そいつ、今ごろパフェとか食ってるよ</li>
            <li>金持ち父さん、貧乏父さん</li>
        </ul>
    </div>

※<!- ->で囲まれた部分はHTMLには影響を与えないコメントです。

img{/*画像について*/
    width: 150px;/*画像の横幅を指定*/
}
.inline{/*<li>につけたinlineのクラスについて*/
    display:inline;/*インライン要素の見た目に変更、箇条書きを改行せず横に並べる*/
    margin-right:10px; /*それぞれ右との間隔を10ピクセル分空ける*/
}
#name{/*自己紹介部分につけたnameのidについて*/
    border:solid black;/*黒枠で囲む*/
    margin-bottom: 30px;/*下に30pxの空白を作る*/
}
#food{/*好きな食べ物の部分につけたfoodのidについて*/
    border:solid green;/*緑の枠で囲む*/
    color: green;      /*文字の色を緑に変える*/
    margin-bottom: 30px;
}
#book{/*好きな本の部分につけたbookのidについて*/
    border:solid blue; /*青の枠で囲む*/
    color:blue;        /*文字の色を青に変える*/
    margin-bottom: 30px;
}
.red{/*redのclassを付与した部分について*/
    color:red;/*文字の色を赤に変える*/
}

※/* */で囲まれた部分はCSSに影響を与えないコメントです。