デモサイトを元にポートフォリオサイトにCSSを追加していきましょう。


前回の記事

[imgad]

ポートフォリオサイトのCSSを追加

前回の記事で書いたHTMLを元にCSSを書いていきます。

まずは、CSSの基本的なルールを解説していきます。

CSSの基本は紹介

フォルダやファイルの準備

HTMLの時に作ったデータを使います。

サイト制作の基本

フォルダに下記のものを用意します。

  • index.html
  • css(cssを入れるフォルダ)
  • images(画像を入れる)

サイト制作のフォルダ配置

reset.cssとstyle.cssの2種類ありますが、基本的にstyle.cssに書いていきます


reset.cssって何を書くの?

基本的にstyle.cssに書くと言いましたが、reset.cssにはデフォルトのCSSをリセットするCSSを書きます

少しややこしいところなので、ここでは全てリセットするものと覚えておいてください。

今はとりあえず下記のコードをreset.cssにコピペしてください。

reset.css


/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

CSSの書き方

CSS


セレクタ {
	プロパティ:値;
}

この書き方が基本です。文字で説明すると
セレクタの{プロパティを:この値にする;}という意味になります。

これを実践的に書くと下記になります。

例:HTML


<div>サンプルコード</div>
例:CSS


div {
	background-color: #000;/*背景の色:黒;*/
	color: white;/*文字の色:白;*/
}

サンプルコード

上のHTMLで書いてある<div>タグに対して、CSSで指定してあげます。

これを訳すと「div(セレクタ)の背景の色を黒にする・文字の色を白にする」という意味になります。

ポートフォリオサイトのCSSを書いていく

HTMLの時同様、完成形のコードを先に見せますね。[コードを見る]をクリックして確認してください。

ちなみにこのコードをstyle.cssにコピペすると、デモサイトのようなレイアウトになるはずです。


CSS


@charset "UTF-8";
/**
 * Clear fix
 */

.cf:before, .cf:after {
	content: " ";
	display: table;
}
.cf:after {
	clear: both;
}
.cf {
 	*zoom: 1;
}
body {
	color: #666;
	font-family: Avenir,"Open Sans","Helvetica Neue",Helvetica,Arial,Verdana,Roboto,"游ゴシック体","YuGothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Meir";
	font-size: 16px;
}
img {
	max-width: 100%;
	display: block;
}
a {
	text-decoration: none;
	color: #666;
	cursor: pointer;
	transition: .3s;
}
a:hover {
	color: #aaa;
	transition: .3s;
}
* {
	box-sizing: border-box;
}
h1,h2,h3,h4,h5,h6,div,p {
	line-height: 1.5;
	letter-spacing: 0.1em;
}
header {
	position: relative;
	padding: 20px;
}
.site-title {
	float: left;
	font-size: 30px;
}
.nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 10rem 2rem;
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s, visibility .5s;
	z-index: 99998;
	background: #f1f1f1;
	text-align: right;
}
.nav li {
	display: block;
	font-size: 25px;
	margin-bottom: 30px;
	letter-spacing: 0.1em;
	font-weight: 900;
}
.nav.show {
	opacity: 1;
	visibility: visible;
}
#nav-open {
	float: right;
	position: fixed;
	top: 30px;
	right: 15px;
	z-index: 99999;
	width: 30px;
}
#nav-open span,#nav-open span:before,#nav-open span:after {
	content: '';
	position: absolute;
	height: 3px;
	border-radius: 3px;
	background-color: #bbb;
	display: block;
	transition: transform .5s, opacity .5s;
}
#nav-open span,#nav-open span:before {
	width: 100%;
}
#nav-open span:before {
	bottom: -8px;
}
#nav-open span:after {
	bottom: -16px;
	width: 15px;
}
.show span {
	transform: rotate(-45deg);
}
.show span:before {
	transform: rotate(90deg);
	bottom: 0!important;
}
.show span:after {
	opacity: 0;
}
/*============ main-top ============*/
.main-top {
	position: relative;
	height: 80vh;
}
.main-top h2 {
	position: absolute;
	top: 30%;
	left: 10%;
	font-size: 25px;
	font-weight: 900;
	z-index: 9999;
	letter-spacing: 0.5em;
}
.main-top img {
	display: block;
	position: absolute;
	bottom: 20%;
	right: 0;
	width: 80%;
	object-fit: cover;
	height: 60vh;
}
/*============ section ============*/
.wrap {
	position: relative;
	padding: 100px 0;
}
.wrap:before {
	content: '';
	position: absolute;
	top: -40px;
	left: 50%;
	width: 1px;
	height: 100px;
	background: #aaa;
}
.title {
	text-align: center;
	font-size: 30px;
	font-weight: 900;
	margin-bottom: 40px;
}
/*============ about ============*/
.about {
	max-width: 90%;
	margin: 0 auto;
}
.profile-backimg {
	width: 60%;
	margin: 0 auto;
}
.profile-backimg img {
	object-fit: cover;
	border-radius: 100%;
}
.name {
	text-align: center;
	font-size: 25px;
	margin: 20px 0;
}
.sns {
	text-align: center;
}
.career {
	padding: 20px 0;
}
.career li {
	position: relative;
	margin-left: 30px;
	padding: 20px 0;
}
.career li:before {
	content: '';
	position: absolute;
	top: 49%;
	left: -30px;
	width: 20px;
	height: 1px;
	background: #666;
}
/*============ work ============*/
.item {
	position: relative;
	width: 80%;
	margin-bottom: 30px!important;
}
.item img {
	object-fit: cover;
	height: 60vh;
}
.item:nth-child(odd) p {
	position: absolute;
	bottom: 20%;
	right: -30px;
	border-bottom: 1px solid #666;
	font-size: 20px;
	font-weight: 900;
	font-style: italic;
}
.item:nth-child(even) p {
	position: absolute;
	bottom: 20%;
	left: -30px;
	border-bottom: 1px solid #666;
	font-size: 20px;
	font-weight: 900;
	font-style: italic;
}
.item:nth-child(2) {
	margin: 0 0 0 auto;
}
.more {
	text-align: center;
}
.more a {
	position: relative;
}
.more a:after {
	content: '';
	position: absolute;
	top: 45%;
	right: -50px;
	width: 50px;
	height: 1px;
	background: #aaa;
	transition: .3s;
}
.more a:hover:after {
	content: '';
	right: -100px;
	width: 100px;
	height: 1px;
	background: #aaa;
	transition: .3s;
}
/*============ contact ============*/
.contact p {
	text-align: center;
}
.mail {
	padding: 20px 0;
}
.mail a {
	font-size: 20px;
	border-bottom: 1px solid;
}
footer {
	text-align: center;
	padding: 5px 0;
	background: #eee;
}
.wrap div,.wrap h2 {
	transition: .8s;
	transition-delay: .8s;
}
/*============ page-work.html ============*/
.works {
	width: 90%;
	margin: 0 auto 40px;
}
.works p {
	padding: 10px;
}
.works img {
	transition: .3s;	
}
.works a:hover img {
	-webkit-transform: translateY(-3px);
	-ms-transform: translateY(-3px);
	transform: translateY(-3px);
	transition: .3s;
	box-shadow: 0 3px 10px #ccc;
}
/*============ single.html ============*/
@keyframes huwa {
	0% {
		-webkit-transform: translateY(10px);
		-ms-transform: translateY(10px);
		transform: translateY(10px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}
.single-wrap {
	padding: 100px 10px;
}
.single-wrap .title {
	animation: huwa 1s;
}
.work-post {
	max-width: 700px;
	margin: 0 auto;
	padding: 40px 0;
}
.work-post * {
	margin-bottom: 40px;
}
@media screen and (min-width:768px) {
	#nav-open {
		display: none;
	}
	.nav {
		opacity: 1;
		visibility: visible;
		float: right;
		position: static;
		padding: 1rem;
		background: transparent;
	}
	.nav ul {
		display: flex;
	}
	.nav li {
		margin-bottom: 0;
		margin-right: 30px;
		font-size: 18px;
		font-weight: 600;
	}
	.nav li:last-child {
		margin-right: 0;
	}
	.nav a {
		position: relative;
	}
	.nav a:before,.nav a:after {
		content: '';
		position: absolute;
		bottom: 0;
		border-bottom: 2px solid #666;
		transition: all .3s ease;
		-webkit-transition: all .3s ease;
		width: 0;
	}
	.nav a:before {
		left: 50%;
	}
	.nav a:after {
		right: 50%;
	}
	.nav a:hover:before,.nav a:hover:after {
		width: 50%;
	}
	.main-top h2 {
		font-size: 4vw;
	}
	.about {
		max-width: 60%;
		margin: 0 auto;
	}
	.work {
		max-width: 960px;
		margin: 0 auto;
	}
	.profile-backimg {
		float: left;
		width: 30%;
		margin: 0 auto;
	}
	.profile {
		float: right;
		width: 50%;
		position: relative;
	}
	.item img {
		height: auto;
	}
	.works {
		float: left;
		width: 30%;
		margin: 0 5% 40px 0;
	}
	.works:nth-of-type(3n){
		margin-right: 0;
	}
	.single-wrap {
		padding: 100px 0;
	}
}
@media screen and (min-width:1024px) {
	.site-title {
		float: left;
	}
	.navi {
		float: right;
	}
	.navi ul {
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}
	.navi li {
		margin-right: 40px;
	}
	.navi li:last-child {
		margin-right: 0;
	}
	.main-top {
		height: 90vh;
	}
}

なるべく初心者の方にたくさんのCSSを覚えてもらえるよう、色々な書き方をしている箇所があります。

こんな書き方もあるんだ、と覚えてもらえたら幸いです。

それでは実際にデモサイトを例にして解説していきますね。

書いておくべきCSS

CSS


@charset "UTF-8";
/**
 * Clear fix
 */

.cf:before, .cf:after {
	content: " ";
	display: table;
}
.cf:after {
	clear: both;
}
.cf {
 	*zoom: 1;
}
/*画面の幅が480px以上になったら*/
@media screen and (min-width:480px) {
	/*min-width:480pxは今回使っていません
	消しても大丈夫です。*/
}
/*画面の幅が768px以上になったら*/
@media screen and (min-width:768px) {
}
/*画面の幅が1024px以上になったら*/
@media screen and (min-width:1024px) {
}

CSSファイルにまず書くもの

CSS


@charset "UTF-8";

charset(キャラセット)はCSSを書く場所(今回はstyle.css)の一番上に記述するものになります。

このcharsetは必ず一番上に記述し、これより上には何も書かないという決まりがあります。

そしてこの「UTF-8」というのは、文字コードと呼ばれ日本語対応するためのものと覚えておけばOKです。

ちなみにHTMLでも<meta charset="UTF-8">というのを書いたと思いますが、これはHTMLでの指定方法ですね。ですが、同じUTF-8なので意味は一緒です。

このように日本語を使う時は使うんだなと覚えておけば大丈夫です。


cf-clearfix

CSS


/**
 * Clear fix
 */

.cf:before, .cf:after {
	content: " ";
	display: table;
}
.cf:after {
	clear: both;
}
.cf {
 	*zoom: 1;
}

この後出てくるfloat:〇〇;というものがあります。これは初心者の方だと必ずつまづくので、それを簡単にしてくれる魔法のコードです。

これをstyle.cssの@charset "UTF-8";のすぐ下に書いておくと後々役に立ちますので、書いておいてください。


レスポンシブ対応にする

CSS


/*画面の幅が480px以上になったら*/
@media screen and (min-width:480px) {
	/*min-width:480pxは今回使っていません
	消しても大丈夫です。*/
}
/*画面の幅が768px以上になったら*/
@media screen and (min-width:768px) {
}
/*画面の幅が1024px以上になったら*/
@media screen and (min-width:1024px) {
}

今の時代はスマホからサイトを見る人が増えてきているので、必ずスマホ対応にしましょう。

そのためには@media screen and(〇〇:△△px)という指定をする必要があります。

画面の幅って?
レスポンシブ

大きく分けると4種類です。

  • A:スマートフォン
  • B:タブレット
  • C:パソコン
  • D:ノートPC

それぞれで表示される大きさが違いますよね。WEB制作をする上で、この4種類に対応することが非常に大事です。

たまに表示が崩れているサイトを見かけると思いますが、そのサイトは完全にレスポンシブ対応ができておらず、崩れてしまっているパターンが多いです。

今の時代に合わせた制作をするならこのレスポンシブ対応という知識は必要ですので、必ず覚えておきましょう。

※この記事では、箇所箇所でちゃんと書く場所を指定しますので、安心してください。

header部分のCSS

デモサイトのheader

ロゴが左側にあり、ナビゲーションが横並びのよくある配置です。

CSS


header {
	position: relative;
	padding: 20px;
}
.site-title {
	float: left;
	font-size: 30px;
}
.nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 10rem 2rem;
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s, visibility .5s;
	z-index: 99998;
	background: #f1f1f1;
	text-align: right;
}
.nav li {
	display: block;
	font-size: 25px;
	margin-bottom: 30px;
	letter-spacing: 0.1em;
	font-weight: 900;
}
.nav.show {
	opacity: 1;
	visibility: visible;
}
#nav-open {
	float: right;
	position: fixed;
	top: 30px;
	right: 15px;
	z-index: 99999;
	width: 30px;
}
#nav-open span,#nav-open span:before,#nav-open span:after {
	content: '';
	position: absolute;
	height: 3px;
	border-radius: 3px;
	background-color: #bbb;
	display: block;
	transition: transform .5s, opacity .5s;
}
#nav-open span,#nav-open span:before {
	width: 100%;
}
#nav-open span:before {
	bottom: -8px;
}
#nav-open span:after {
	bottom: -16px;
	width: 15px;
}
.show span {
	transform: rotate(-45deg);
}
.show span:before {
	transform: rotate(90deg);
	bottom: 0!important;
}
.show span:after {
	opacity: 0;
}
@media screen and (min-width:768px) {
	#nav-open {
		display: none;
	}
	.nav {
		opacity: 1;
		visibility: visible;
		float: right;
		position: static;
		padding: 1rem;
		background: transparent;
	}
	.nav ul {
		display: flex;
	}
	.nav li {
		margin-bottom: 0;
		margin-right: 30px;
		font-size: 18px;
		font-weight: 600;
	}
	.nav li:last-child {
		margin-right: 0;
	}
	.nav a {
		position: relative;
	}
	.nav a:before,.nav a:after {
		content: '';
		position: absolute;
		bottom: 0;
		border-bottom: 2px solid #666;
		transition: all .3s ease;
		-webkit-transition: all .3s ease;
		width: 0;
	}
	.nav a:before {
		left: 50%;
	}
	.nav a:after {
		right: 50%;
	}
	.nav a:hover:before,.nav a:hover:after {
		width: 50%;
	}
}

サイトタイトル

HTMLのclass名「site-title」に対して、CSSで文字の大きさを指定しています。

HTML


<h1 class="site-title"><a href="#">Sample</a></h1>
CSS


.site-title {
	float: left;
	font-size: 30px;
}

メイン画像のCSS

デモサイトのメイン画像

CSS


/*============ main-top ============*/
.main-top {
	position: relative;
	height: 80vh;
}
.main-top h2 {
	position: absolute;
	top: 30%;
	left: 10%;
	font-size: 25px;
	font-weight: 900;
	z-index: 9999;
	letter-spacing: 0.5em;
}
.main-top img {
	display: block;
	position: absolute;
	bottom: 20%;
	right: 0;
	width: 80%;
	object-fit: cover;
	height: 60vh;
}
/*画面の幅が768px以上になったら*/
@media screen and (min-width:768px) {
	.main-top h2 {
		font-size: 4vw;
	}
}
/*画面の幅が1024px以上になったら*/
@media screen and (min-width:1024px) {
	.main-top {
		height: 90vh;
	}
}

画像のサイズ

CSS


.main-top img {
	display: block;
	position: absolute;
	bottom: 20%;
	right: 0;
	width: 80%;
	object-fit: cover;
	height: 60vh;
}

横幅をもう少し大きくしたい場合は、width: 80%;の数字を変更します。

高さはheight: 60vh;の数字を変更します。

全体の共通CSS

CSS


/*============ section ============*/
.wrap {
	position: relative;
	padding: 100px 0;
}
.wrap:before {
	content: '';
	position: absolute;
	top: -40px;
	left: 50%;
	width: 1px;
	height: 100px;
	background: #aaa;
}
.title {
	text-align: center;
	font-size: 30px;
	font-weight: 900;
	margin-bottom: 40px;
}

デモサイトのHTMLでは「About」・「Work」・「Contact」の3つを共通で<section class="wrap ~~~"> </section>で囲んでいます。

そのため「wrap」がついているclass名(クラス)にはまったく同じCSSが効くことになります。

線を挿入

CSS


.wrap:before {
	content: '';
	position: absolute;
	top: -40px;
	left: 50%;
	width: 1px;
	height: 100px;
	background: #aaa;
}

HTMLで<div class="wrap"> </div>と書いてあるところには、この線がつくようにしています。

線を書く

AboutのCSS

デモサイトのAbout

CSS


/*============ about ============*/
.about {
	max-width: 80%;
	margin: 0 auto;
}
.profile-backimg {
	width: 60%;
	margin: 0 auto;
}
.profile-backimg img {
	object-fit: cover;
	border-radius: 100%;
}
.name {
	text-align: center;
	font-size: 25px;
	margin: 20px 0;
}
.sns {
	text-align: center;
}
.career {
	padding: 20px 0;
}
.career li {
	position: relative;
	margin-left: 30px;
	padding: 20px 0;
}
.career li:before {
	content: '';
	position: absolute;
	top: 49%;
	left: -30px;
	width: 20px;
	height: 1px;
	background: #666;
}
/*画面の幅が768px以上になったら*/
@media screen and (min-width:768px) {
	.about {
		max-width: 800px;
		margin: 0 auto;
	}
	.profile-backimg {
		float: left;
		width: 30%;
		margin: 0 auto;
	}
	.profile {
		float: right;
		width: 50%;
	}
}
CSS


.career li {
	position: relative;
	margin-left: 30px;
	padding: 20px 0;
}
.career li:before {
	content: '';
	position: absolute;
	top: 49%;
	left: -30px;
	width: 20px;
	height: 1px;
	background: #666;
}
li

HTMLでliを指定すると「-」が文字のお左に表示されます。

WorkのCSS

デモサイトのWork

CSS


/*============ work ============*/
.item {
	position: relative;
	width: 80%;
	margin-bottom: 30px!important;
}
.item img {
	object-fit: cover;
	height: 60vh;
}
.item:nth-child(odd) p {
	position: absolute;
	bottom: 20%;
	right: -30px;
	border-bottom: 1px solid #666;
	font-size: 20px;
	font-weight: 900;
	font-style: italic;
}
.item:nth-child(even) p {
	position: absolute;
	bottom: 20%;
	left: -30px;
	border-bottom: 1px solid #666;
	font-size: 20px;
	font-weight: 900;
	font-style: italic;
}
.item:nth-child(2) {
	margin: 0 0 0 auto;
}
.more {
	text-align: center;
}
.more a {
	position: relative;
}
.more a:after {
	content: '';
	position: absolute;
	top: 45%;
	right: -50px;
	width: 50px;
	height: 1px;
	background: #aaa;
	transition: .3s;
}
.more a:hover:after {
	content: '';
	right: -100px;
	width: 100px;
	height: 1px;
	background: #aaa;
	transition: .3s;
}
@media screen and (min-width:768px) {
	.work {
		max-width: 960px;
		margin: 0 auto;
	}
	.item img {
		height: auto;
	}
}

nth-child

CSS


.item:nth-child(2) {
	margin: 0 0 0 auto;
}
nth-child

itemというclass名を書けば、二番目の要素が右側に引っ込みます。

ContactのCSS

デモサイトのContact

CSS


/*============ contact ============*/
.contact p {
	text-align: center;
}
.mail {
	padding: 20px 0;
}
.mail a {
	font-size: 20px;
	border-bottom: 1px solid #666;
}

メールアドレスを変更

メールアドレスを変更するには、CSSではなくHTMLを変更する必要があります。

HTML


<section class="wrap contact">
	<h2 class="title">Contact</h2>
	<p>ご連絡はメールまたはSNSのDMにて承っております。</p>
	<p class="mail"><a href="mailto:ここにメールアドレス">ここにメールアドレス</a></p>
</section>

「ここにメールアドレス」に自分のメールアドレスに変更してください。

footerのCSS

デモサイトのfooter

CSS


footer {
	text-align: center;
	padding: 5px 0;
	background: #eee;
}

背景の色を変える

現在のままだとただのグレーですよね。色を変えたいという時はbackground: #eee;#eeeの部分(16進数)を変更しましょう。

HTML


<footer>
	<small>©️sample</small>
</footer>
CSS


footer {
	text-align: center;
	padding: 5px 0;
	background: #eee;/*←ここを変更*/
}

色については、Color Huntなどの配色サイトを参考にすると、きれいなサイトに仕上げられますよ。

黄色に変更した場合

デモサイトfooter(黄)

水色に変更した場合

デモサイトfooter(青)

まとめ:ポートフォリオサイトのCSS

まず自分の手で見ながら書いてみてください。

実際に手を動かすことで、徐々に書き方がわかってきますので、まず書く→細かいところを見るという風に進めてみてください。

あわせて読みたい記事