/*◆◆　モバイルサイズ（最低横幅280pxまで対応させた＠2023/07/25）　◆◆*/ .card-container{ border: px solid red; position: relative; background: #222222; color: #ffffff; margin-bottom: 1em; box-shadow: 0 12px 10px -6px rgba(0,0,0,.25); width: 90%; margin: 0 auto; margin-bottom: 16px; } .card-img{ border: px solid blue; position: relative; } .card-img img{ max-width: 100%; } .card-text{ border: px solid orange; margin-top: 0; /*
タグの初期設定の隙間を是正*/ height: 9em; position: relative; } .card-text dt{ border-bottom: 2px solid #c0c0c0; font-weight: bold; font-size: 100%; color: #cddc39; padding: 0.5em 0.5em 0 0.5em; } .card-text dd{ border: px solid pink; font-size: 75%; color: #ffffff; margin-left: 0; /*
タグの初期設定で右寄りになっているのを直す。初期値では「margin-left:40px;」になっているので、この値を40pxより小さくすることで、右に寄り過ぎているのを解消可能*/ padding: 1em; } .card-text dd a{ position: relative; z-index: 2; border: 0px solid springgreen; line-height: 1.5em; text-decoration: none; font-weight: bold; color: #1e90ff; } /*マウスホバー時に文字列を表示するエフェクト　--ここから*/ .card-img__mask{ overflow: hidden; opacity: 0; /*初期状態ではマスクを表示しないようにする為の処理*/ background-color: rgba(255,20,147, 0.4); position: absolute; top: 0; left: 0; width: -webkit-fill-available; /*この状態だと、親要素全体にかかるようになる*/ height: -webkit-fill-available; /*同上*/ -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } @-moz-document url-prefix(){ /*Firefoxのみに適用*/ .card-img__mask{ overflow: hidden; opacity: 0; background-color: rgba(255,20,147, 0.4); position: absolute; top: 0; left: 0; width: -moz-available; height: 12em; transition: all 0.6s ease; } } .caption{ border: px solid green; color: yellow; width: 240px; margin: 0 0 0 -3em; padding: 0; text-shadow: 1px 0 0 #222222, 0 1px 0 #222222, -1px 0 0 #222222, 0 -1px 0 #222222; } .card-container:hover .card-img__mask{ opacity: 1; /*ホバー時に表示する*/ padding-left: 60px; /*右にずらす。これに伴い、「class="caption"」の文字も同じだけずれる。*/ } /*マウスホバー時に文字列を表示するエフェクト　--ここまで*/ /*マウスホバー時に画像を動かすエフェクト　--ここから*/ .card-container .card-img{ overflow: hidden; /*要素のボックスからはみ出てしまった部分を隠して見えなくする*/ } .card-container img{ transition: transform 0.3s; transform: scale(1.0); } .card-container:hover img{ transition: 0.3s; transform: scale(1.5) rotate(-15deg); } /*マウスホバー時に画像を動かすエフェクト　--ここまで*/ .card-container .card-link a{ /*リンクエリアの設定*/ /*「クラス：card-link」内の「タグ」の範囲を無理やり拡張して、カード全体にリンク判定を当てています*/ display: block; position: relative; z-index: 1; top: -280px; left: 0; border: px dotted limegreen; height: auto; text-decoration: none; text-align: right; margin: 0; padding: 17em 1em 0 0px; box-sizing: border-box; transition: all .3s; color: #cddc39; font-weight: bold; } .card-container .card-link:hover { letter-spacing: 5px; cursor: pointer; } .card-link{ /*余計な空要素の高さをゼロにする事で回避*/ height: 0; position: absolute; bottom: -60px; right: 0; } /*◆◆　PCサイズ　◆◆*/ /*htmlの内にちゃんと「」の記述があるか要注意！*/ @media screen and (min-width:650px) {/*「min-width」は「●●px以上になったら発動」、「max-width」は「●●px以下になるまではメディアクエリ以前の設定を適用」の意味*/ .card-container{ display: flex; /*ここで画像を左に、文章を右にしている*/ align-items: flex-start; /*これを指定しないとFlexboxデフォルトの設定で高さが長いものに揃えられ、間延びしてしまう*/ position: relative; width: 90%; /*ブレイクポイントを「min-width:650px」にしているので、この大きさにした。*/ max-width: 650px; margin: 0 auto; margin-bottom: 1em; } .card-img{ /*画像が格納されている大元のクラス*/ width: 300px; height: 180px; } .card-img img{ width: 100%; height: 100%; object-fit: cover; } .card-text{ max-width: 48%; margin-left: 1em; height: 10em; } .card-container .card-link a{ /*リンクエリアの設定*/ display: block; position: relative; z-index: 1; top: -129px; border: px dotted limegreen; width: 100%; height: auto; text-decoration: none; text-align: right; margin: 0; padding: 156px 1em 0 0px; box-sizing: border-box; transition: all .3s; } .card-link{ /*余計な空要素の高さをゼロにする事で回避*/ height: 0; position: absolute; bottom: 20px; left: -20px; } }