Portfolio Site

Portfolio Site
Color Plan
Portfolioサイト
初期設定カラー設計
コンセプトは、“男⼥関係なく使える⾊”
“違和感のない⾊”
キーカラー：#2C3E50
明度が⾼い、彩度を落としたエメラルドグリーン。
Portfolioサイト
初期設定カラー設計
サブカラー：#18BC9C
メインカラーに近い⻘のグレー。完全にグレーではな
く⻘系に
することでメインカラーをビジネス⾊に傾倒させつつ
、調和を保ち、絞めの⾊としてナビに使う。
Portfolioサイト
初期設定カラー設計
全体として
“クリーンで、落ち着いてている、安⼼感“
” 「優雅」、「調和」、「希望」”
のイメージになるように。
#2C3E50 画面を絞める⾊としてグレーをサブとして⽤いる
#18BC9C 男⼥とも使って違和感のないグリーンをメインで⽤いる
#233140
さらに押さえとして明度の低いライトアップカラーを⽤いる
※アクセントカラー#344787はイラストの帽子でのみ使⽤する
Portfolioサイト
初期設定カラー設計
サブカラー
@brand-primary
#18BC9C
メインカラー
@brand-success
#2C3E50
ライトアップカラー
@gray-lighter
#233140
テキストカラー１
@base
#fff
テキストカラー2
@base
#18BC9C
a:hover
@a:hover
#2C3E50
Scroll btn a:hover
@a:hover
#18BC9C
http://test5150.web.fc2.com/onepage/
Portfolioサイト
カラー変更サンプル
サブカラー
@brand-primary
#333
メインカラー
@brand-success
#555
ライトアップカラー
@gray-lighter
#000
テキストカラー１
@base
#fff
テキストカラー2
@base
#555
a:hover
@a:hover
#555
Scroll btn a:hover
@a:hover
#000
http://test5150.web.fc2.com/onepage-va/
Portfolioサイト
変更箇所⼀覧
必ず事前にカラー設計を⾏っておくこと。
◆brand-primary#2c3e50
-----------navbar
boot.css
4161⾏目
-----------f.css
footer-above
338⾏目
------------txt(icon)
PORTFOLIO,CONTACT ME
hr-->#2c3e50
70⾏目
74⾏目
◆@brand-success: #18BC9C;
===========
footer-below
345⾏目
-----------navbar-nav
boot.css
Bg 4187⾏目
Txt 4180⾏目
===========
header
85⾏目
-----------star-light
66 ⾏目
-----------about(success)
184 ⾏目
Portfolioサイト
変更箇所⼀覧
必ず事前にカラー設計を⾏っておくこと。
portfolio->on mouse
214⾏目
===========
h2
boot.css
903⾏目
-----------social-icon
268⾏目
-----------navbar-brand hover
boot.css
4169⾏目
------------
他トップへ戻るボタン
2849⾏目
2850⾏目
2859⾏目
2860⾏目
-----------◆文字サイズ
name、skills
100⾏目
118⾏目
105⾏目以上sp
122⾏目
107⾏目
102⾏目
p
12⾏目
16⾏目
Portfolioサイト
変更箇所⼀覧
必ず事前にカラー設計を⾏っておくこと。
===========
◆大文字化回避->ｎavbar
34、99、149削除
Portfolioサイト
⼀括変更⽅法
Lessを使うと、箇所の変更ですべての該当箇所を変えられる。
Portfolioサイト
⼀括変更⽅法
Lessを使うと、箇所の変更ですべての該当箇所を変えられる。
Portfolioサイト
⼀括変更⽅法
Lessを使うと、１箇所の変更ですべての該当箇所を変えられる。

Download Report