こんにちは、
コンスキです。
前回は、大まかなコーディングをしました。
デザインを3つの大きな要素に分け、それをさらに細かくしていき、細かい部分を省いた要素をコーディングしていく作業でした。
今回は、前回文字や、img要素のsrc属性などもコーディングしていきます。
文字を入れていく作業
header要素
デザインをみながら、どのタグの中にどんな文字を入れていく必要があるのかを考えます。
赤い四角で囲んであるところがこれからタグの中に書いていく文字です。
タグの中に文字を入れ終わると、header要素部分のコードは次のようになりました。
<header>
<div>
<h1 id="logo"></h1>
<nav>
<ul>
<li><a href="">About</a></li>
<li><a href="">Works</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</div>
<div id="top_visual">
<div id="tp_text">
<div id="tp_tagline">
<p id="tp_tagline_main">Connections with Someone</p>
<p id="tp_tagline_sub1">気軽に頼めるサイト制作。</p>
<p id="tp_tagline_sub2">忘れた消しゴムを借りるように。</p>
</div>
<div id="tp_contact">
<button>お問い合わせ</button>
<div>
<img src="" alt="" id="tp_contact_icon">
<p>お問い合わせに関する情報はこちら</p>
</div>
</div>
</div>
<div id="tp_img"><img src="" alt=""></div>
</div>
</header>上のコードは「index.html」というファイルの一部です。
index.htmlをブラウザに表示してみると次のようになります。
まだCSSを書いてスタイルを適用させていないので、味気ない感じになっていますね。
main要素
header要素と同じようにmain要素に含まれる文字をコードにしていきます。
コーディングをしていると、前回の大まかなコーディングで書いた要素だけでは足りないことに気がつきます。
必要な要素がわかるたびに、大まかなコーディングで書いた要素の中にさらに要素を足していきます。
すると次のようなコードになります。
<main>
<!-- About部分 -->
<div class="section" id="about">
<div class="heading">
<div class="heading_text">
<div class="heading_text_inner">
<h2>About</h2>
<div class="to_single_page">
<img src="" alt="">
<p>個別ページはこちら</p>
</div>
</div>
</div>
<div class="heading_img">
<img src="" alt="">
</div>
</div>
<div class="content" id="about_content">
<div id="about_content_line1">
<div id="name_container">
<h3 id="name_heading">Name</h3>
<p id="name_content">勝又悠希</p>
</div>
<div id="age_container">
<h3 id="age_heading">Age</h3>
<p id="age_content">19歳（大学1年生）</p>
</div>
</div>
<div id="about_content_line2"></div>
<div id="skills_container">
<h3 id="skills_heading"></h3>
<ul id="skills_contents">
<li id="skill1">HTML</li>
<li id="skill2">CSS</li>
<li id="skill3">JavaScript</li>
<li id="skill4">WordPress</li>
</ul>
</div>
<div id="where_i_work_container">
<h3 id="where_i_work_heading">Where I Work</h3>
<p id="where_i_work_content">静岡県袋井市</p>
</div>
<div id="what_i_value_container">
<h3 id="what_i_value_heading">What I Value</h3>
<p id="what_i_value_content">私はWebサイト制作を気軽にできるようにすることを大切にしています。「なんとなくWebサイトを作ってみたいけど、何を考えておけばいいかわからない」という方に対しては、「サイトを作る目的」や「Webサイトの構成」なのデザインに関わらないことを私から提案させていただくこともできます。</p>
</div>
<div id="about_content_img_container">
<img id="about_content_img" src="" alt="">
</div>
</div>
</div>
<!-- Works部分 -->
<div class="section" id="works">
<div class="heading">
<div class="heading_text">
<div class="heading_text_inner">
<h2>Works</h2>
<div class="to_single_page">
<img src="" alt="">
<p>個別ページはこちら</p>
</div>
</div>
</div>
<div class="heading_img">
<img src="" alt="">
</div>
</div>
<div class="content" id="works_content">
<div id="site_sumbnails">
<div id="site_sumbnail1_container">
<img src="" alt="" id="site_sumbnail1">
<h3>Site title1</h3>
</div>
<div id="site_sumbnail2_container">
<img src="" alt="" id="site_sumbnail2">
<h3>Site title2</h3>
</div>
<div id="site_sumbnail3_container">
<img src="" alt="" id="site_sumbnail3">
<h3>Site title3</h3>
</div>
<div id="site_sumbnail4_container">
<img src="" alt="" id="site_sumbnail4">
<h3>Site title4</h3>
</div>
<div id="site_sumbnail5_container">
<img src="" alt="" id="site_sumbnail5">
<h3>Site title5</h3>
</div>
<div id="site_sumbnail6_container">
<img src="" alt="" id="site_sumbnail6">
<h3>Site title6</h3>
</div>
</div>
</div>
</div>
<!-- Blog部分 -->
<div class="section" id="blog">
<div class="heading">
<div class="heading_text">
<div class="heading_text_inner">
<h2>Blog</h2>
<div class="to_single_page">
<img src="" alt="">
<p>個別ページはこちら</p>
</div>
</div>
</div>
<div class="heading_img">
<img src="" alt="">
</div>
</div>
<div class="content" id="blog_content">
<div id="blog_container">
<h3 id="blog_content_heading">プログラミングやITに関して発信しています。</h3>
<div id="blog_content_container">
<div id="blog_content_img_container">
<img src="" alt="" id="up_arrow">
<ul id="blog_genre_list">
<li id="blog_genre1">Vue.js</li>
<li id="blog_genre2">音読さん</li>
<li id="blog_genre3">WordPress</li>
</ul>
<img src="" alt="" id="down_arrow">
</div>
<div id="blog_content_text_container">
<h4 id="blog_text_title1">おすすめの読み上げソフト「音読さん」</h4>
<p id="blog_text_content1">音読さん」っていうソフト知ってますか？自分の代わりにアナウンサーレベルの声で喋ってくれるソフトです。これは、音読さんを使って大学の遠隔授業でプレゼンをした際の動画です。声はすべて音読さんで...</p>
</div>
</div>
</div>
</div>
</div>
<!-- Contact部分 -->
<div class="section" id="contact">
<div class="heading">
<div class="heading_text">
<div class="heading_text_inner">
<h2>Contact</h2>
<div class="to_single_page">
<img src="" alt="">
<p>個別ページはこちら</p>
</div>
</div>
</div>
<div class="heading_img">
<img src="" alt="">
</div>
</div>
<div class="content" id="contact_content"></div>
</div>
</main>footer要素
最後はfooter部分です。
文字の部分はコピーライトだけです。
<footer>
<hr>
<div id="copyright_contaier">
<p id="copyright">©2021 konsuki. All rights reserved.</p>
</div>
</footer>ここまで書いたコードをもう一度ブラウザに表示してみます。
まだ、スタイルを効かせて無い状態ですが、デザインにあった構成に近づいていると思います。
画像を表示させていく作業
画像を表示させるためにimg要素のsrc属性をコードに追加していきます。
使う画像はあらかじめ一つのフォルダにまとめておきました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css./style.css">
<title>Yuuki's Portfolio</title>
</head>
<body>
<header>
<div>
<h1 id="logo"><img src="asset/img/logo.png" alt="" width="172" height="28"></h1>
<nav>
<ul>
<li><a href="">About</a></li>
<li><a href="">Works</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</div>
<div id="first_view">
<div id="fv_text">
<div id="fv_tagline">
<p id="fv_tagline_main">Connections with Someone</p>
<p id="fv_tagline_sub1">気軽に頼めるサイト制作。</p>
<p id="fv_tagline_sub2">忘れた消しゴムを借りるように。</p>
</div>
<div id="fv_contact">
<button>お問い合わせ</button>
<div>
<img src="asset/img/info_icon.svg" alt="" id="fv_contact_icon" width="29" height="29">
<p>お問い合わせに関する情報はこちら</p>
</div>
</div>
</div>
<div id="fv_img_container"><img src="asset/img/first_view.png" alt="" id="fv_img" width="764" height="271"></div>
</div>
</header>
<main>
<!-- About部分 -->
<div class="section" id="about">
<div class="heading">
<div class="heading_text">
<div class="heading_text_inner">
<h2>About</h2>
<div class="to_single_page">
<img src="asset/img/about_heading.png" alt="" class="heading_img" width="760" height="450">
<p>個別ページはこちら</p>
</div>
</div>
</div>
<div class="heading_img_container">
<img src="" alt="" class="heading_img">
</div>
</div>
<div class="content" id="about_content">
<div id="about_content_line1">
<div id="name_container">
<h3 id="name_heading">Name</h3>
<p id="name_content">勝又悠希</p>
</div>
<div id="age_container">
<h3 id="age_heading">Age</h3>
<p id="age_content">19歳（大学1年生）</p>
</div>
</div>
<div id="about_content_line2"></div>
<div id="skills_container">
<h3 id="skills_heading"></h3>
<ul id="skills_contents">
<li id="skill1">HTML</li>
<li id="skill2">CSS</li>
<li id="skill3">JavaScript</li>
<li id="skill4">WordPress</li>
</ul>
</div>
<div id="where_i_work_container">
<h3 id="where_i_work_heading">Where I Work</h3>
<p id="where_i_work_content">静岡県袋井市</p>
</div>
<div id="what_i_value_container">
<h3 id="what_i_value_heading">What I Value</h3>
<p id="what_i_value_content">私はWebサイト制作を気軽にできるようにすることを大切にしています。「なんとなくWebサイトを作ってみたいけど、何を考えておけばいいかわからない」という方に対しては、「サイトを作る目的」や「Webサイトの構成」なのデザインに関わらないことを私から提案させていただくこともできます。</p>
</div>
<div id="about_content_img_container">
<img id="about_content_img" src="asset/img/about_content.png" alt="" width="508" height="396">
</div>
</div>
</div>
<!-- Works部分 -->
<div class="section" id="works">
<div class="heading">
<div class="heading_text">
<div class="heading_text_inner">
<h2>Works</h2>
<div class="to_single_page">
<img src="" alt="">
<p>個別ページはこちら</p>
</div>
</div>
</div>
<div class="heading_img_container">
<img src="asset/img/works_heading.png" alt="" class="heading_img" width="760" height="450">
</div>
</div>
<div class="content" id="works_content">
<div id="site_sumbnails">
<div id="site_sumbnail1_container">
<img src="" alt="" id="site_sumbnail1">
<h3>Site title1</h3>
</div>
<div id="site_sumbnail2_container">
<img src="" alt="" id="site_sumbnail2">
<h3>Site title2</h3>
</div>
<div id="site_sumbnail3_container">
<img src="" alt="" id="site_sumbnail3">
<h3>Site title3</h3>
</div>
<div id="site_sumbnail4_container">
<img src="" alt="" id="site_sumbnail4">
<h3>Site title4</h3>
</div>
<div id="site_sumbnail5_container">
<img src="" alt="" id="site_sumbnail5">
<h3>Site title5</h3>
</div>
<div id="site_sumbnail6_container">
<img src="" alt="" id="site_sumbnail6">
<h3>Site title6</h3>
</div>
</div>
</div>
</div>
<!-- Blog部分 -->
<div class="section" id="blog">
<div class="heading">
<div class="heading_text">
<div class="heading_text_inner">
<h2>Blog</h2>
<div class="to_single_page">
<img src="" alt="">
<p>個別ページはこちら</p>
</div>
</div>
</div>
<div class="heading_img_container">
<img src="asset/img/blog_heading.jpg" alt="" class="heading_img" width="760" height="450">
</div>
</div>
<div class="content" id="blog_content">
<div id="blog_container">
<h3 id="blog_content_heading">プログラミングやITに関して発信しています。</h3>
<div id="blog_content_container">
<div id="blog_content_img_container">
<div id="blog_genres_list">
<img src="asset/img/up_arrow.svg" alt="" id="up_arrow" width="28" height="32">
<ul id="blog_genres">
<li id="blog_genre1">Vue.js</li>
<li id="blog_genre2">音読さん</li>
<li id="blog_genre3">WordPress</li>
</ul>
<img src="asset/img/down_arrow.svg" alt="" id="down_arrow" width="28" height="32>
</div>
<img src="" alt="asset/img/pc_ondokusan.png" id="pc_ondokusan">
</div>
<div id="blog_content_text_container">
<h4 id="blog_text_title1">おすすめの読み上げソフト「音読さん」</h4>
<p id="blog_text_content1">音読さん」っていうソフト知ってますか？自分の代わりにアナウンサーレベルの声で喋ってくれるソフトです。これは、音読さんを使って大学の遠隔授業でプレゼンをした際の動画です。声はすべて音読さんで...</p>
</div>
</div>
</div>
</div>
</div>
<!-- Contact部分 -->
<div class="section" id="contact">
<div class="heading">
<div class="heading_text">
<div class="heading_text_inner">
<h2>Contact</h2>
<div class="to_single_page">
<img src="" alt="">
<p>個別ページはこちら</p>
</div>
</div>
</div>
<div class="heading_img_container">
<img src="asset/img/contact_heading.png" alt="" class="heading_img" width="760" height="450">
</div>
</div>
<div class="content" id="contact_content"></div>
</div>
</main>
<footer>
<hr>
<div id="copyright_contaier">
<p id="copyright">©2021 konsuki. All rights reserved.</p>
</div>
</footer>
</body>
</html>この時点でブラウザーに表示される内容は次のようになります。
終わりに
最後まで読んでいただきありがとうございました。
まだまだ完成までが長いと思いますが、少し形になってきているような感じがします。
次回は、CSSでデザインを整えていこうと思います。
コメント