plan
swiperを使いスマホの時はスライダーになるようにしました。
銀ねこアトリエさんの記事が参考になりました！
銀ねこアトリエさんの記事にも書いてありますが、jsのコードだけ書いておきます。
import Swiper from "swiper";
import "swiper/css"; // CDN経由の方は多分いらないです
(() => {
const breakpoint = 768;
let swiper;
const options = {
loop: true,
speed: 400,
spaceBetween: 30,
slidesPerView: 1.5,
centeredSlides: true,
};
if (window.innerWidth < breakpoint) {
swiper = new Swiper(".swiper", options);
} else {
swiper = undefined;
}
window.addEventListener("resize", (e) => {
if (window.innerWidth < breakpoint) {
if (swiper) return;
swiper = new Swiper(".swiper", options);
} else {
if (!swiper) return;
swiper.destroy();
swiper = undefined;
}
});
})();
お知らせ
タブ
タブについては、中級課題の時も紹介した↓の書籍に詳しく書いてありました。
アクセシビリティのことなども詳しく書いてあるのでぜひ読んでみてください。
しょーごさんが紹介していらっしゃる記事もあるので、そちらも見てみてください。
こちらの記事も、
アクセシビリティのことに触れつつタブの制作方法を書かれているので、
とても参考になります！
並び順について
デザインカンプを見た感じ、上の画像に書いたような順番で表示されていると思ったので、flexやgridを使ってうまいこといかないか色々試したのですが、うまくいかず。
なので、右側と左側をそれぞれdivで囲い、親要素にdispaly:flex; flex-direction:row-reverse;を指定することでカンプ通りの表示順になるようにしました。
↓実際に書いたコードの一部分(不要なところは省いています)
// 親要素にあたるtabpanelにdisplay:flex; flex-direction:row-reverse;を指定
<div class="news__tabpanel js-news__tabpanel" id="tabpanel2" role="tabpanel" aria-labelledby="tab2" aria-hidden="true">
<div class="news__list news__list--right"> // 右側
<div class="news__item">
</div><!-- /.news__item -->
</div><!-- /.news__list -->
<div class="news__list news__list--left"> // 左側
<div class="news__item">
</div><!-- /.news__item -->
</div><!-- /.news__list -->
</div><!-- /.news__tabpanel -->ただ、htmlがdivだらけになり分かりにくくなってしまったので、普段はElementにはクラス名をつけないのですが、ここはつけることにしました。
news_list を ul、 news_item を li にすればいいとも思ったのですが、右側左側全てをひっくるめてulで囲むべきところを、右のグループ・左のグループと分けるのは、アクセシビリティ的に微妙そうだったので、divを使うことにしました。
macのvoiceoverを使った感じだと、
全てdivで囲った方がわかりやすいかなと思ったので。
ul 要素のなかにdivを入れて二つに分割できれば一番いいのですが、（↓みたいな感じ）
<ul class="news__list">
<div>
<li></li>
</div>
<div>
<li></li>
</div>
</ul>HTMLのルールで、ulタグの子要素には li タグしか入れることができないので(一応 scriptタグとtemplateタグも入れられます。使う機会ないと思いますが。)↑の作り方はNGになります。
liタグには割となんでも入れられます。
各タグの中にどのタグを入れていいのか、パッとわかるサイトがあるのでぜひ見てみてください！
文字数の制限
お知らせのタイトル部分が長くなってしまった時に、文字がはみ出るのを防ぐため、タイトルが4行目までいくようなら、3行目で溢れたテキストを「…」表記に変えるようにするためのcssを指定しました。
↓高さを指定しているため、タイトルが長いとはみ出してしまう
↓cssだけではみ出さないようにすることができる
下のように指定するだけで、「…」表記になります！
.title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // ここの数値で何行目から「...」表記にするか決められる
overflow: hidden;
}plan newsは以上となります！
次の記事はこちら！
一つ前の記事はこちら！
