ポートフォリオサイトのCSSを追加【基本も紹介】

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

デモサイト

前回の記事

ポートフォリオサイトのHTMLの書き方【part2】

[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：floatの使い方と解除方法

レスポンシブ対応にする

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

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

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」の３つを共通で<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

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;
}

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

WorkのCSS

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;
}

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

ContactのCSS

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

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などの配色サイトを参考にすると、きれいなサイトに仕上げられますよ。

黄色に変更した場合

水色に変更した場合

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

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

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

ポートフォリオサイトまとめへ

あわせて読みたい記事

『いつかは仕事を辞めたい』なら今すぐやっておくべきたった1つのこと

あなたに向いてる仕事がすぐにわかるたった1つの方法