HTML/CSSでページネーションを作るコードをレビューしてみました！
2020年、第二回となる256times LIVEを配信しました。ご参加いただいた皆様、ありがとうございました。
今回の課題は、メディアサイトやブログでよく見る「ページネーション」を作ってみよう、というものでした。回を重ねるごとにコードレビュー依頼が増えてきていて、運営としても嬉しい限りです！
↑ 課題の見本です。
ページネーションはシンプルな部品ではありますが、以下のようなポイントに気をつけてマークアップしていく必要があります。
・「＜」や「＞」はそのまま書くとHTMLの区切り記号になってしまうので実体参照やアイコンフォントを使いましょう。
・数字の間に境界線をつける場合、最初や最後に余計な線がつかないように気をつけましょう。
・現在のページやマウスホバーしたときのスタイルを整えて、インタラクションをわかりやすくしましょう。
具体的なコードを知りたい方は是非アーカイブ映像をチェックしてみてくださいね。
次回は1月28日 (火) 21時より開催予定です。なお、お題はJavaScriptを使ったなにかにする予定なので、時間に余裕のある方は以下のレッスンを学習しておくと良いかと思います。
また、お見逃しがないようにTwitterのフォロー、YouTubeチャネルの登録がおすすめです。
・256times（@256times）さん / Twitter
https://twitter.com/256times
・256times - YouTube
https://www.youtube.com/channel/UCuIKq6eaBz6K36wDSbjvJeg
最後にご参加いただいた方の感想なども載せておきます。みなさん楽しんでいただけたようでなによりです！それではまた来週お会いしましょう！
BGMがとても好みでまったりいい感じなのですが、コーディングは全然進んでません(･_･; #256times
— まりもまりもく (@m_marimoc) January 21, 2020
たのしかったです！ありがとうございました！ #256times
— ももた (@momota16_game) January 21, 2020
こちらこそありがとうございました。臨場感があふれるレッスンでした！ #256times https://t.co/vwjTDcWnQD
— Hiroshi Fukui@水泳学部バタフライ学科専攻 (@echizenya_yota) January 21, 2020
昨日は残業のため #256times にチャレンジできず、録画で振り返りながら書いてしみたものの30分以内に作成できず。。。次こそは！！#100dayOfCode #Coding #programming #Progate #dotinstall 10/100日目
— Fanchoco (@_fanchoco) January 21, 2020
コードレビュー聞いてから、もう一回チャレンジ。
— くも (@mo9mo99mo) January 21, 2020
inline-flexとかtransitionとかこれで良かったっけ・・？https://t.co/s0NNeKvb9I#256times
がんばったー#256timeshttps://t.co/D4Ng8o812P
— appare (@Appare45) January 21, 2020
この記事が気に入ったらサポートをしてみませんか？