こんにちは、コンスキです。
今回は前回に引き続き、CSSを書いてメイン部分の見た目を整えていきます
style.css
メイン
CSSを追加していくとやはり以前書いたHTML の構成ミスがたくさん見つかります。
一番驚いたミスは、Works部分のサムネイルのサンプル画像を読み込み忘れていたことです。
なるべく作業は同じ作業のなかで終わらせて違う種類の作業を同時にやらないようにしたいです。
同時に違う種類の作業をやるとそれぞれ別のタイミングでやるよりも時間がかかってしまう気がするためです。
例えば、前回は、画像のパスをimgタグのsrcに書いていくという作業をやっていました。
それに対して、今回は要素にスタイルを効かせていくと言う作業です。
前回の作業のやり忘れに気がついて、何度かCSSを書くことを途中でストップしてしまっていたので、今回の作業を終わらせるのにすごく時間がかかりました。
まあ、最終的に不足している部分がなくなればいいのかもしれませんが・・・
そう言うことで今回はcssファイルだけじゃなくてhtmlファイルにも手を加えたため、どちらのファイルの内容もここにしるしておきます。
<!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/reset.css">
<link rel="stylesheet" href="css/style.css">
<title>Yuuki's Portfolio</title>
</head>
<body>
<header>
<!-- ヘッダートップ -->
<div id="header_top">
<h1 id="logo"><img src="asset/img/logo.png" alt="" width="172" height="28"></h1>
<nav id="navigation_bar_container">
<ul id="navigation_bar">
<li class="nav_item"><a href="" class="nav_text">About</a></li>
<li class="nav_item"><a href="" class="nav_text">Works</a></li>
<li class="nav_item"><a href="" class="nav_text">Blog</a></li>
<li class="nav_item"><a href="" class="nav_text" id="nav_text_last">Contact</a></li>
</ul>
</nav>
</div>
<!-- ファーストビュー -->
<div id="first_view">
<div id="fv_tagline">
<div id="fv_tagline">
<div id="fv_tagline_main_container">
<p class="fv_tagline_main">Connections with</p>
<p class="fv_tagline_main">Someone</p>
</div>
<div id="fv_tagline_sub_container">
<p class="fv_tagline_sub">気軽に頼めるサイト制作。</p>
<p class="fv_tagline_sub">忘れた消しゴムを借りるように。</p>
</div>
</div>
<div id="fv_contact_button_container">
<button id="fv_contact_button">お問い合わせ</button>
<div id="more_info_container">
<object id="info_icon" data="asset/img/info_icon.svg" type="image/svg+xml"></object>
<p id="more_info">お問い合わせに関する情報はこちら</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_img_container">
<img src="asset/img/about_heading.png" alt="" class="heading_img" width="720" height="426">
</div>
<div class="heading_text">
<div class="heading_text_inner">
<h2 class="heading_name">About</h2>
<div class="to_single_page_container">
<p class="to_single_page">個別ページはこちら</p>
<object class="arrow_circle_right" data="asset/img/arrow_circle_right.svg" type="image/svg+xml"></object>
</div>
</div>
</div>
</div>
<!-- 内容 -->
<div class="content" id="about_content">
<div id="about_content_line1">
<div id="name_container">
<h3 id="name_heading" class="about_content_heading">Name</h3>
<p id="name_content">勝又悠希</p>
</div>
<div id="age_container">
<h3 id="age_heading" class="about_content_heading">Age</h3>
<p id="age_content">19歳（大学1年生）</p>
</div>
</div>
<div id="about_content_line2">
<div id="skills_container">
<h3 id="skills_heading" class="about_content_heading">Skills</h3>
<ul id="skills_contents">
<li class="skills" id="skill1">HTML</li>
<li class="skills" id="skill2">CSS</li>
<li class="skills" id="skill3">JavaScript</li>
<li class="skills" id="skill4">WordPress</li>
</ul>
</div>
<div id="where_i_work_container">
<h3 id="where_i_work_heading" class="about_content_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" class="about_content_heading">What I Value</h3>
<p id="what_i_value_content">私はWebサイト制作を気軽にできるようにすることを大切にしています。「なんとなくWebサイトを作ってみたいけど、何を考えておけばいいかわからない」という方に対しては、「サイトを作る目的」や「Webサイトの構成」などのデザインに関わらないことを私から提案させていただくこともできます。</p>
</div>
</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 class="heading_name">Works</h2>
<div class="to_single_page_container">
<p class="to_single_page" class="to_single_page">個別ページはこちら</p>
<object class="arrow_circle_right" data="asset/img/arrow_circle_right.svg" type="image/svg+xml"></object>
</div>
</div>
</div>
<div class="heading_img_container">
<img src="asset/img/works_heading.png" alt="" class="heading_img" width="720" height="426">
</div>
</div>
<div class="content" id="works_content">
<div id="site_sumbnails">
<div id="site_sumbnails_line1">
<div id="site_sumbnail1_container" class="site_sumbnail_container">
<img src="asset/img/site_sumbnail.png" alt="" id="site_sumbnail1" class="site_sumbnail" width="360" height="186">
<h3>Site title1</h3>
</div>
<div id="site_sumbnail2_container" class="site_sumbnail_container">
<img src="asset/img/site_sumbnail.png" alt="" id="site_sumbnail2" class="site_sumbnail" width="360" height="186">
<h3>Site title2</h3>
</div>
<div id="site_sumbnail3_container" class="site_sumbnail_container">
<img src="asset/img/site_sumbnail.png" alt="" id="site_sumbnail3" class="site_sumbnail" width="360" height="186">
<h3>Site title3</h3>
</div>
</div>
<div id="site_sumbnails_line2">
<div id="site_sumbnail4_container" class="site_sumbnail_container">
<img src="asset/img/site_sumbnail.png" alt="" id="site_sumbnail4" class="site_sumbnail" width="360" height="186">
<h3>Site title4</h3>
</div>
<div id="site_sumbnail5_container" class="site_sumbnail_container">
<img src="asset/img/site_sumbnail.png" alt="" id="site_sumbnail5" class="site_sumbnail" width="360" height="186">
<h3>Site title5</h3>
</div>
<div id="site_sumbnail6_container" class="site_sumbnail_container">
<img src="asset/img/site_sumbnail.png" alt="" id="site_sumbnail6" class="site_sumbnail" width="360" height="186">
<h3>Site title6</h3>
</div>
</div>
</div>
</div>
</div>
<!-- Blogセクション -->
<div class="section" id="blog">
<div class="heading">
<div class="heading_text">
<div class="heading_text_inner">
<h2 class="heading_name">Blog</h2>
<div class="to_single_page_container">
<p class="to_single_page">個別ページはこちら</p>
<object class="arrow_circle_right" data="asset/img/arrow_circle_right.svg" type="image/svg+xml"></object>
</div>
</div>
</div>
<div class="heading_img_container">
<img src="asset/img/blog_heading.jpg" alt="" class="heading_img" width="720" height="426">
</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 class="blog_genre" id="blog_genre1">Vue.js</li>
<li class="blog_genre" id="blog_genre2">音読さん</li>
<li class="blog_genre" id="blog_genre3">WordPress</li>
</ul>
<img src="asset/img/down_arrow.svg" alt="" id="down_arrow" width="28" height="32">
</div>
<img src="asset/img/pc_ondokusan.png" alt="" id="pc_ondokusan" width="850">
<div id="blog_content_text_container">
<h4 id="blog_text_title1">おすすめの読み上げソフト<br>「音読さん」</h4>
<p id="blog_text_content1">音読さん」っていうソフト知ってますか？自分の代わりにアナウンサーレベルの声で喋ってくれるソフトです。これは、音読さんを使って大学の遠隔授業でプレゼンをした際の動画です。声はすべて音読さんで...</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Contactセクション -->
<div class="section" id="contact">
<div class="heading">
<div class="heading_text">
<div class="heading_text_inner">
<h2 class="heading_name">Contact</h2>
<div class="to_single_page_container">
<p class="to_single_page">個別ページはこちら</p>
<object class="arrow_circle_right" data="asset/img/arrow_circle_right.svg" type="image/svg+xml"></object>
</div>
</div>
</div>
<div class="heading_img_container">
<img src="asset/img/contact_heading.png" alt="" class="heading_img" width="720" height="426">
</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>img {
display: block;
}
/* ヘッダートップ */
#header_top {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
left: 0;
top: 0;
z-index: 10000;
width: 100vw;
height: 64px;
padding: 0 43px 0;
background-color: #ffffff;
}
#navigation_bar_container {
height: 18px;
}
#navigation_bar {
display: flex;
margin: auto 0 auto;
}
.nav_item {
height: 18px;
}
.nav_text {
margin-right: 46px;
}
#nav_text_last {
margin-right: 0;
}
#first_view {
margin-top: 64px;
}
/* ファーストビュー */
#first_view {
display: flex;
padding: 85px 110px;
background-color: #C9e8de;
}
#fv_tagline_main_container {
margin-bottom: 18px;
}
.fv_tagline_main {
font-size: 52px;
}
#fv_tagline_sub_container {
margin-bottom: 153px;
}
.fv_tagline_sub {
font-size: 18px;
}
#fv_contact_button {
margin-bottom: 18px;
padding: 15px 30px;
border-radius: 30px;
background-color: #000000;
color: #ffffff;
font-size: 18px;
}
#fv_contact_button:hover {
opacity: 0.7;
}
#more_info_container {
display: flex;
align-items: center;
}
#info_icon {
width: 22px;
margin-right: 5px;
}
#more_info {
font-size: 18px;
}
#fv_img_container {
margin-top: 170px;
}
/* メインの全セクション共通スタイル */
/* 見出し */
.heading {
display: flex;
width: 100%;
height: 426px;
box-sizing: content-box;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color: #000000;
}
.heading_img_container {
width: 50%;
}
.heading_text {
width: 50%;
padding: 130px 150px 180px 120px;
}
.heading_name {
display: inline;
color: #ffffff;
font-size: 52px;
}
.to_single_page_container {
display: flex;
align-items: center;
margin-top: 10px;
}
.to_single_page {
display: inline;
margin-right: 5px;
color: #9e9e9e;
font-style: 18px;
}
.arrow_circle_right {
width: 20px;
height: 20px;
fill: #9e9e9e;
}
/* 内容 */
.content {
margin: 0 150px 0;
}
/* Aboutセクション */
#about {
margin-top: 64px;
}
/* 内容 */
#about_content {
position: relative;
top: 0;
left: 0;
padding: 100px 0;
}
#name_heading,
#age_heading,
#name_content,
#age_content {
font-size: 32px;
}
#skills_heading,
#where_i_work_heading,
#what_i_value_heading,
#where_i_work_content,
#what_i_value_content,
.skills {
font-style: 18px;
}
.about_content_heading {
margin-bottom: 18px;
font-weight: 600;
}
#about_content_line1 {
display: flex;
}
#about_content_line2 {
display: flex;
}
#name_container {
margin-right: 100px;
margin-bottom: 60px;
}
#skills_container {
margin-right: 100px;
}
#skills_contents {
list-style: square inside;
}
#where_i_work_container {
margin-right: 100px;
}
#what_i_value_container {
width: 446px;
}
#what_i_value_content {
position: relative;
z-index: 1000;
background-color: #ffffff;
}
#about_content_img_container {
position: absolute;
bottom: 50px;
right: -160px;
}
/* Worksセクション */
/* 内容 */
#works_content {
padding: 100px 0;
}
#site_sumbnails_line1 {
display: flex;
margin-bottom: 20px;
}
#site_sumbnails_line2 {
display: flex;
}
.site_sumbnail_container {
margin-right: 30px;
}
#site_sumbnail3_container,
#site_sumbnail6_container {
margin-right: 0;
}
/* Blogセクション */
/* 内容 */
#blog_content {
margin: 0 80px 0;
padding: 80px 0 80px;
}
#blog_content_heading {
margin-bottom: 30px;
font-size: 18px;
}
#blog_content_img_container {
position: relative;
top: 0;
left: 0;
}
#blog_genres_list {
position: absolute;
top: 60px;
left: 75px;
}
#up_arrow {
margin-left: auto;
}
.blog_genre {
margin: 20px 0;
font-size: 20px;
}
#blog_genre1 {
width: 60px;
margin-left: auto;
color: #9e9e9e;
}
#blog_genre2 {
width: 85px;
margin-left: auto;
font-weight: bold;
}
#blog_genre3 {
color: #9e9e9e;
}
#down_arrow {
margin-left: auto;
}
#pc_ondockusan {
position: absolute;
top: 0;
left: 0;
}
#blog_content_text_container {
position: absolute;
top: 70px;
left:700px;
}
#blog_text_title1 {
margin-bottom: 20px;
font-size: 48px;
}
#blog_text_content1 {
color: #9e9e9e;
font-size: 18px;
}今回修正したことでブラウザーには次のように表示されるようになりました。
細かい部分を見ると、GIMPを使ってデザインしたものと違う部分がありますが、雰囲気は大体同じ感じにできていると思います。
また、ブラウザで表示をしたサイトの見た目に関して気がつくことがありました。
GIMPを使ってデザインしたものは最大の解像度が低かったため少しぼやけた印象でした。
ブラウザで表示してみると、解像度が上がったおかげなのか細部まではっきり表示されている気がします。
コメント