Q&A
前提・実現したいこと
表題の通り、文字を見やすいように表示させたいので、background-color: #333;のような黒にしたい。
R:文字同士が重なるのを避けたいからです。
それぞれの制作実績の説明の文字に関しても、中央配置にしたいです。
発生している問題・エラーメッセージ
・文字が見えにくくなってしまっている。原因: 文字同士が重なり合っていること ・backgroud-colorが文字が明確にわかりやすいcolorになっていない。 →黒で透明度を調整させて、。実績説明の文字が見やすいようにしたいです
試したこと
下のライン調整については、それぞれのimgにwidth,heightをつけて、練っていましたが
「overflow: hidden;」を使い、調整を試みたり
該当のソースコード
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <title></title> 5 <link rel="stylesheet" href="./Top/asset/css/destyle.css"> 6 <link rel="stylesheet" href="./Top/asset/css/style.css"> 7 <link rel="stylesheet" href="./Top/asset/css/slick.css"> 8 <link rel="stylesheet" href="/Top/asset/css/slick-theme.css"> 9</head> 10<body> 11 <section class="Works" id="js-works works"> 12 <div class="container"> 13 <ul class="works-list works-slick"> 14 <!--1--> 15 <li class="works-item"> 16 <div class="works-item_img"><img alt="" src="./asserts/img/works/demosite1.png"></div><!-- /.wrks-item_img --> 17 <div class="works-item_txt"> 18 <div class="txt_desc"> 19 <div class="txt_desc_head-skill"> 20 <p class="ttl">Skill</p> 21 <p class="desc">【HTML】【CSS】【JQuery】</p> 22 </div> 23 <div class="txt_desc_head-detail"> 24 <p class="ttl">detail</p> 25 <p class="desc">画像と画像を重ね合わせてPopに表示させました。</p> 26 </div> 27 </div><!-- /.txt_desc --> 28 </div><!-- /.works-item_txt --> 29 <a href=""></a> 30 </li><!-- /.works-item --> 31 <!--2--> 32 <li class="works-item"> 33 <div class="works-item_img"><img alt="" src="./asserts/img/works/works_demosite2.png"></div> 34 <div class="works-item_txt"> 35 <div class="txt_desc"> 36 <div class="txt_desc_head-skill"> 37 <p class="ttl">Skill</p> 38 <p class="desc">【HTML】【CSS】【JQuery】【Javascript】</p> 39 </div> 40 <div class="txt_desc_head-detail"> 41 <p class="ttl">detail</p> 42 <p class="desc">jsを使い、様々な動きを表示させました。(zoom＆fadeIn),(modal-window),(drawer-nav)...</p> 43 </div> 44 </div><!-- /.txt_desc --> 45 </div><!-- /.works-item_txt --> 46 <a href="https://happy-blog-life.net/tyukyuex" rel="noopener noreferrer" target="_blank"></a> 47 </li><!-- /.works-item --> 48 <!--3--> 49 <li class="works-item"> 50 <div class="works-item_img"><img alt="" src="./asserts/img/works/demosite3png.png"></div> 51 <div class="works-item_txt"> 52 <div class="txt_desc"> 53 <div class="txt_desc_head-skill"> 54 <p class="ttl">Skill</p> 55 <p class="ttl">【HTML】【CSS】【JQuery】【wordpress】</p> 56 </div> 57 <div class="txt_desc_head-detail"> 58 <p class="ttl">detail</p> 59 <p class="ttl">・Wordpress化<br> 60 ・phpを使ったパンくずナビ<br> 61 ・プラグインを使ったカスタマイズしやすいサイト</p> 62 </div> 63 </div><!-- /.txt_desc --> 64 </div><!-- /.works-item_txt --> 65 <a href="" rel="noopener noreferrer" target="_blank"></a> 66 </li><!-- /.works-item --> 67 </ul><!-- /.works-list --> 68 </div><!-- /.container --> 69 </section><!-- /.Works --> 70 <script src="./asserts/js/jquery-3.6.0.min.js"></script> 71 <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 72 <script type="text/javascript" src="./asserts/js/slick.min.js"></script> 73 <script src="./asserts/js/script.js"></script> 74</body> 75</html>
CSS
1 2.works::after { 3 content: "制作実績"; 4 width: 10%; 5 height: 10%; 6 font-size: 1.8rem; 7 padding-top: 20px; 8} 9 10.works-ttl { 11 line-height: 3; 12 position: relative; 13 z-index: 1; 14 text-transform: capitalize; 15 font-size: 3.0rem; 16} 17 18.works-ttl::first-letter { 19 color: #c42d2d; 20} 21 22.works-ttl::after { 23 content: "制作実績"; 24} 25 26.works-list { 27 margin: 10%; 28} 29 30.works-item { 31 display: -webkit-box; 32 display: -webkit-flex; 33 display: -ms-flexbox; 34 display: flex; 35 -webkit-box-pack: center; 36 -webkit-justify-content: center; 37 -ms-flex-pack: center; 38 justify-content: center; 39 -webkit-box-align: center; 40 -webkit-align-items: center; 41 -ms-flex-align: center; 42 align-items: center; 43 position: relative; 44} 45 46.works-item:hover { 47 background-color: darkgray; 48 opacity: .8; 49} 50 51.works-item_img { 52 width: 50vw; 53 width: 100%; 54 z-index: -1; 55 overflow: hidden; 56} 57 58.works-item_txt { 59 width: 100%; 60 height: 100%; 61 visibility: hidden; 62 /* 文字を表示しない */ 63 font-size: 150%; 64 z-index: 1; 65} 66 67.works-item_txt .txt_desc { 68 text-align: center; 69 position: absolute; 70 top: 60%; 71 left: 50%; 72 -webkit-transform: translate(-50%, -70%); 73 transform: translate(-50%, -70%); 74 color: #c7ace2; 75} 76 77.works-item_txt .txt_desc-skill .ttl { 78 text-transform: capitalize; 79 padding-bottom: 10%; 80} 81 82.works-item_txt .txt_desc-detail { 83 position: relative; 84 top: 60%; 85 left: 50%; 86} 87 88.works-item_txt .txt_desc-detail .ttl { 89 text-transform: capitalize; 90 padding-bottom: 10px; 91} 92 93.works-item:hover .works-item_txt { 94 visibility: visible; 95 /* 文字を表示する */ 96} 97 98.works-item:hover .works-item_txt .txt_desc { 99 opacity: 1; 100} 101 102.works-item a { 103 position: absolute; 104 width: 100%; 105 height: 100%; 106 top: 0; 107 left: 0; 108 text-indent: 100%; 109 /*テキスト非表示*/ 110 white-space: nowrap; 111 /*テキスト非表示*/ 112 overflow: hidden; 113 /*テキスト非表示*/ 114}
JS
1 2//Slick 3$(function(){ 4 5 $('.works-slick').slick({ 6 infinite: true, 7 slidesToShow: 1, 8 slidesToScroll: 1, 9 autoplay : true, 10 Speed: 3000, 11 autoplaySpeed: 5000, 12 arrows: false, 13 centerPadding: '100px', 14 centerMode: true, 15 responsive: [ 16 { 17 breakpoint: 768, 18 settings: { 19 slidesToShow: 1, 20 slidesToScroll: 1, 21 infinite: true, 22 dots: true, 23 centerPadding: 0, 24 centerMode: true, 25 } 26 }, 27 28 ] 29 }); 30 31 32});
回答1件
0
ベストアンサー
文字が見えにくくなってしまっている。原因: 文字同士が重なり合っていること
line-heightを変更してはどうでしょうか。
黒で透明度を調整させて、。実績説明の文字が見やすいようにしたいです
とりあえず、文字ごと透過してるのをやめた方がいいと思います。
css
1.works-item:hover { 2 background-color: darkgray; 3 opacity: .8; /* ←これ */ 4}
画像にfilterをかけて輝度を落としてはいかがでしょうか。
投稿2022/01/04 09:54
総合スコア36960
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/01/09 04:26