記事の作成1(実践初級①)

webサイト作成
2023.05.29

実際に記事を書いて見ましょう

HTML初級①、CSS初級①で学んだことを生かして記事を書いてみましょう！

今回はこのような記事を書いてみようと思います。難しくはないのでHTML初級①、CSS初級①での復習もこめて勉強していけたらいいと思います。

初心者の方でまだＨＴＭＬ初級①、CSS初級①をご覧になられてない方はこちらから↓

HTMLで土台作り

まず最初にHTMLコードを書きましょう！

コードを理解していれば自分の頭の中でイメージをして、記事を書くことをおすすめします。

見本の記事をみてどれが何のタグかわかれば簡単です。

HTMLコード

<section>

            <h1>About</h1>

        <figure>

        <img src=”https://dummyimage.com/600×400/000/fff” alt=”#”>

        <figcaption>

            <h2>about</h2>

            <p>text text text text text text text text text

               text text text text text text text text text

               text text text text text text text text text

               text text text text text text text text text

        </figcaption>

        </figure>

    </section>

配置を決めてその役割に合ったタグを使うことで簡単に制作ができ楽しくなってきます！

サンプル画像はこちらから↓

Dynamic Dummy Image Generator

サイズを決めてhttpをコピーしてimgタグに貼ると添付できます。

CSSで色付け

CSSで書いたHTMLを色付けしますが少々複雑になることがありますので一つ一つやっていきましょう。

見出しタグ(記事の題名)

この記事の見出しタグについて特徴を洗い出し、使えるプロパティを選んでみましょう。

特徴　使えるプロパティ
・字が中央text-align,padding
・ブロックが中央margin
・文字が白色color
・ブロックに線が引いているborder
・ブロック内が緑色background-color

コードにするとこのようになります。

コード

h1{

color: white;

    text-align: center;

    background-color: #008000;

    padding: 15px;

    font-size: 30px;

    margin: 25px 150px;

    border:solid 5px #2f4f4f;

}

marginは25pxと150pxと書いてますがこれは上下と左右個別で分けて余白を設定できます。⤵

margin:　25px→上下　150px→左右；

左右のみ余白を大きくすることでブロックを中央に置けます。

borderは線の種類・太さ・色を設定できます。⤵

border: solid→線の種類 5px→太さ #2f4f4f→色；

figure・figcaptionタグ(記事の内容)

題名と同様に、特徴を洗い出し、使えるプロパティを選定しましょう。

特徴使えるプロパティ
・画像と説明文が横並びdisplay:flex;
・説明文の背景が黄緑色background-color
コード

figure{

    display: flex;

    margin: 0 150px;

}

figcaption{

    padding: 0 15px ;

    margin: 0 15px;

    font-size: 20px;

    background-color: #7fff00;

    color: black;

}

sectionタグ

これでほぼ完成ですが記事に余白と背景がないので最後に付け足しましょう。

コード

section{  

    background-color: #98fb98;

    padding: 15px;

}

これで見本通りに作ることができました！作り方の手順は独自のやり方なんで変更しても大丈夫です。むしろ、自分のやりやすい手順でやったほうがいいと思います。

今後もこのようにHTMLタグとCSSプロパティを少しずつでも学んで実践し理解してもらえるとうれしいです。

コメント

タイトルとURLをコピーしました