見出し画像

HTML/CSSでページネーションを作るコードをレビューしてみました!

2020年、第二回となる256times LIVEを配信しました。ご参加いただいた皆様、ありがとうございました。

今回の課題は、メディアサイトやブログでよく見る「ページネーション」を作ってみよう、というものでした。回を重ねるごとにコードレビュー依頼が増えてきていて、運営としても嬉しい限りです!

画像1

↑ 課題の見本です。

ページネーションはシンプルな部品ではありますが、以下のようなポイントに気をつけてマークアップしていく必要があります。

・「<」や「>」はそのまま書くとHTMLの区切り記号になってしまうので実体参照やアイコンフォントを使いましょう。
・数字の間に境界線をつける場合、最初や最後に余計な線がつかないように気をつけましょう。
・現在のページやマウスホバーしたときのスタイルを整えて、インタラクションをわかりやすくしましょう。

具体的なコードを知りたい方は是非アーカイブ映像をチェックしてみてくださいね。

次回は1月28日 (火) 21時より開催予定です。なお、お題はJavaScriptを使ったなにかにする予定なので、時間に余裕のある方は以下のレッスンを学習しておくと良いかと思います。

また、お見逃しがないようにTwitterのフォロー、YouTubeチャネルの登録がおすすめです。

・256times(@256times)さん / Twitter
https://twitter.com/256times
・256times - YouTube
https://www.youtube.com/channel/UCuIKq6eaBz6K36wDSbjvJeg

最後にご参加いただいた方の感想なども載せておきます。みなさん楽しんでいただけたようでなによりです!それではまた来週お会いしましょう!


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
7
ドットインストールが展開するスパルタ方式プログラミングスクール『256times』の公式noteです。