こんにちは。コンスキです。
今回は異なる画面サイズのパソコンでみてもサイトの見た目が綺麗に見えるようにCSSなどを設定してみようと思います。
スマホやタブレット向けのデザインまで設定する予定ではないため、これはレスポンシブ対応とは呼ばないかもしれません💦
現状
今の状態だと、自分が制作しているパソコンでは上手く表示されていますが、画面の解像度が異なる他のパソコンでこのポートフォーリオサイトを見たときに、デザインが上手く表示されません。
例えば、Google DevToolsを使って画面サイズを変更させてみると次のように不恰好になってしまう部分があります。
この動画の場合で言うと、自分のパソコンよりも少し小さめの画面サイズで見た場合、実績のサムネイル画像が重なってしまいます。
このままにしておくと、一部の人にとっては操作がしにくいサイトになってしまうため何かしらの対応をする必要があります。
対応方法
今回考えているのは、現在pxという単位で書かれている幅や高さをvwという単位に変換することです。
vwを使えば、要素とmarginでつけた空白部分の比率を保ったまま画面を小さくすることができます。
反対に言えば画面を小さくしても、pxで書いた場合に自分のパソコンに表示されている見た目とほとんど同じ見た目でサイトを表示することができると考えています。
この「px → vw」の変換をするときにとても便利なサイトがあったのでご紹介します。
このサイトでは、「Base: 〇〇px」の部分に自分の画面幅を入力して、px単位で書かれているCSSを左側の枠の中に入力するだけで、右側にvw単に変換したCSSを表示してくれるそうです！
ポートフォーリオサイトのCSSをコピーしてここに貼り付けるだけで瞬時に変換ができたのでとても便利だと思いました。
このポートフォーリオサイトの場合、横幅を測ってみると「1440px」でした。
試しに「Base: 1440px」と設定して、AboutやWorksといった各セクションの画像の横幅と高さをpx単位で左側の枠の中にコピペしてみます。
こんな感じですぐにpx単位からvw単位に変換してくれます。
style.cssの編集
編集がし終わった「style.css」の内容が次のようになります。
img {
display: block;
max-width: 100%;
height: auto;
}
/* ヘッダートップ */
#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;
min-width: 1020px;
height: 37.5%;
padding: 6vw 8.75vw;
background-color: #C9e8de;
}
#fv_tagline_container {
width: 40%;
}
#fv_tagline_main_container {
height: auto;
margin-bottom: 18px;
}
#fv_tagline {
height: auto;
}
.fv_tagline_main {
height: auto;
font-size: 4vw;
}
#fv_tagline_sub_container {
width: 100%;
margin-bottom: 8vw;
}
.fv_tagline_sub {
font-size: 1.8vw;
}
#fv_contact_button {
margin-bottom: 1.25vw;
padding: 1.042vw 2.083vw;
border-radius: 2.083vw;
background-color: #000000;
color: #ffffff;
font-size: 1.25vw;
}
#fv_contact_button:hover {
opacity: 0.7;
}
#more_info_container {
display: flex;
align-items: center;
}
#more_info_container:hover #info_icon {
fill: #658686;
}
#more_info_container:hover #more_info {
color: #658686
}
#info_icon {
width: 22px;
height: 22px;
margin-right: 5px;
}
#more_info {
font-size: 18px;
}
#fv_img_container {
margin-top: 170px;
}
#fv_img {
width: 53.056vw;
height: 18.819vw;
}
/* メインの全セクション共通スタイル */
/* 見出し */
.heading {
display: flex;
width: 100%;
max-width: 100%;
height: 29.583vw;
box-sizing: content-box;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color: #000000;
}
.heading_img_container {
width: 50vw;
}
.heading_img {
width: 50vw;
height: 29.583vw;
}
.heading_text {
width: 50vw;
padding: 9.028vw 10.417vw 12.5vw 8.333vw;
}
.heading_name {
display: inline;
color: #cecece;
font-size: 4vw;
}
.to_single_page_container {
display: flex;
align-items: center;
margin-top: 2.667vw;
}
.to_single_page {
display: inline;
margin-right: 1.333vw;
color: #9e9e9e;
font-style: 4.8vw;
}
.arrow_circle_right {
width: 1.389vw;
height: 1.389vw;
fill: #6e6e6e;
}
.to_single_page_container:hover .to_single_page {
color: #658686;
}
.to_single_page_container:hover .arrow_circle_right {
fill: #658686;
}
/* 内容 */
.content {
margin: 0 auto;
}
/* Aboutセクション */
#about {
margin-top: 4.444vw;
}
/* 内容 */
#about_content {
position: relative;
top: 0;
left: 0;
width: 84%;
padding: 6.944vw 0;
}
#name_heading,
#age_heading,
#name_content,
#age_content {
font-size: 2.222vw;
}
#skills_heading,
#where_i_work_heading,
#what_i_value_heading,
#where_i_work_content,
#what_i_value_content,
.skills {
font-style: 1.25vw;
}
.about_content_heading {
margin-bottom: 1.25vw;
font-weight: 600;
}
#about_content_line1 {
display: flex;
}
#about_content_line2 {
display: flex;
}
#name_container {
margin-right: 6.944vw;
margin-bottom: 4.167vw;
}
#skills_container {
margin-right: 6.944vw;
}
#skills_contents {
list-style: square inside;
}
#where_i_work_container {
position: relative;
margin-right: 6.944vw;
}
#what_i_value_container {
width: 30.972vw;
}
#what_i_value_heading {
background-color: #ffffff7e;
box-shadow: 0px 0px 5px 20px #ffffff7e;
z-index: 1000;
}
#what_i_value_content {
position: relative;
background-color: #ffffff7e;
box-shadow: 0px 0px 3px 3px #ffffff7e;
z-index: 1000;
}
#about_content_img_container {
position: absolute;
bottom: 3.472vw;
right: -11.111vw;
}
/* Worksセクション */
/* 内容 */
#works_content {
padding: 100px 0;
margin: 0 auto;
width: 84%;
max-width: 1140px;
}
.site_sumbnails {
width: 100%;
}
#site_sumbnails_line1 {
display: flex;
width: 100%;
margin-bottom: 20px;
}
#site_sumbnails_line2 {
display: flex;
width: 100%;
}
.site_sumbnail_container {
width: 32%;
margin-right: 2%;
}
#site_sumbnail3_container,
#site_sumbnail6_container {
margin-right: 0;
}
/* Blogセクション */
/* 内容 */
#blog_content {
height: 34.375vw;
margin: 5.556vw;
margin-bottom: 2vw;
box-sizing: content-box;
}
#blog_content_heading {
margin-bottom: 2.083vw;
font-size: 1.25vw;
}
#blog_content_container {
position: relative;
}
#blog_content_img_container {
position: relative;
top: 0;
left: 0;
transition: all 0.3s 0s ease;
}
#blog_categories_list {
position: absolute;
z-index: 1000;
top: 2.083vw;
left: 2.083vw;
}
#up_arrow {
position: relative;
top: 0;
left: 0;
width: 1.389vw;
height: 2.222vw;
margin-left: auto;
transition: top 0.5s;
}
#up_arrow:hover {
top: -5px
}
.blog_category {
width: 8.681vw;
margin: 1.389vw 0;
color: #9e9e9e;
font-size: 1.389vw;
transition: all 0.5s 0s ease;
}
#blog_category1 {
width: 4.861vw;
margin-left: auto;
}
#blog_category2 {
width: 5.903vw;
margin-left: auto;
}
#down_arrow {
position: relative;
top: 0;
left: 0;
width: 1.389vw;
height: 2.222vw;
margin-left: auto;
transition: top 0.5s;
}
#down_arrow:hover {
top: 0.347vw;
}
#pc_ondockusan {
position: absolute;
top: 0;
left: 0;
}
#blog_content_text_container {
position: absolute;
top: 4.861vw;
left:48.611vw;
width: 41.667vw;
}
.blog_text {
position: absolute;
top: 0;
left: -5vw;
opacity: 0;
transition: all 0.3s 0s ease;
}
.blog_text_title {
margin-bottom: 1.389vw;
font-size: 3.333vw;
}
.blog_text_content {
color: #9e9e9e;
font-size: 1.25vw;
}
/* Contactセクション */
/* 内容 */
#contact_content {
margin: 0 220px;
padding: 40px 0;
height: 780px;
}
#contact_content_title {
color: #9e9e9e;
font-size: 18px;
}
/* コンタクトフォーム */
.search-edit, input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea, select {
padding: 11px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 18px;
width: 100%;
}
input[type='submit'] {
-webkit-appearance: none;
color: #ffffff;
border: 1px solid #ddd;
background-color: #000000;
text-align: center;
}
input[type='submit'], #bbp_reply_submit, .bp-login-widget-register-link a {
padding: 11px;
width: 100%;
margin: 0;
cursor: pointer;
}
.contact_form p {
margin-bottom: 1.8em;
}
/* フッター */
footer {
padding: 36px 100px 0;
background-color: #000000;
}
#footer_hr {
height: 1px;
border: none;
background-color: #9e9e9e;
}
#copyright_contaier {
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}
#copyright {
color: #ffffff;
}
.img_slider_item_container {
position: relative;
}
.img_slider_item {
position: absolute;
top: 70px;
left: 0;
width: 50vw;
opacity: 0;
transition: all 0.5s 0s ease;
}
.emphasize {
color: #000000;
font-weight: bold;
}単位をpxからvwに変えた意外にも少し修正しました。
おわりに
「style.css」を編集した後のサイトで画面のサイズを変化させてみると次のようになります。
今回は画面のサイズが異なるパソコンに対応するための作業をしましたが、次回はスマートフォンやタブレットに対応したデザインを作成する作業を行いたいです。
コメント