#雑談

🖋タカヒサ

2022/12/17

私の「オシ」機能


以前、「私が思う、サイトの「オシ」ページ」を紹介しました。今回はその機能版です。三つ紹介します。

私の「オシ」ページはこちら

・ハンバーガーメニュー

ハンバーガーメニューとは、スマホ画面など、ヘッダーの表示がサイズ的に難しい場合に、サイトの右上上部に表示されるやつです。合同記号(≡)みたいな三本線の形をしており、これを押してメニューを開くことにより、様々なページへのリンクを表示できます。通常このハンバーガーメニューは、JavaScriptで作ることが多いそうなのですが、なんとこちらのメニュー、HTMLとCSSだけで実装しています!。HTMLのチェックボックスの機能を応用したものです。


また、デザインや動きにも非常にこだわっています。一体世の中に、三本線(≡)をクリックすると、中央の線のみが飛び出して、それが二つに分裂し、閉じるための×マークを作るハンバーガーメニューがどれほどあるでしょうか。いや、まさかないでしょう。(実はこれは、CSSでハンバーガーを動かすためのコードに難点があったため、それを上手く回避しようとしたら、このようなデザインになったのですが...)私はこの独自のデザイン性をとても気に入っています。



・文字サイズ変更

文字サイズ変更機能は、私が初めてJavaScriptを用いて実装した機能です。サイズ変更に対応する文字を指定することや、ページを移動した後も文字サイズの情報を保持するのがとても大変でした。どなたでも快適にウェブサイトを楽しんでいただけるよう実装した、イチオシの機能です。



・タグ検索(ブログ)

タグ検索機能。こちらはブログページの、コンテンツ一ページ内の機能になります。タグやライターを選択すると、その条件に合致した記事のみを一括表示することが出来ます。また、選択されたタグは背景がオレンジ色になったりと、使い易さや分かり易さにも考慮した機能になっています。



ちなみにこちらは、表計算ソフトで自動でコーディングしています。詳細は以下の記事をご覧ください!!!

ブログの仕組みその1

最新の投稿

🖊タカヒサ 🗓2023/2/18

最優秀賞を受賞しました

全国中学高校Webコンテストの最終審査会で、最優秀賞に選ばれました

#公式

#告知

#訪問

🖊リク 🗓2023/1/10

2次審査、提出完了。

長かった。楽しかった。

#公式

#告知

🖊リュウシン 🗓2023/1/9

助け合い

「助け合い」これがなくては、私たちのWEBサイトはできませんでした。

#雑談

前の投稿

🖊リュウシン 🗓2022/12/15

問題作成という強敵

私とタカヒサでクイズページのクイズを作りました。

#独言

次の投稿

🖊タカヒサ 🗓2022/12/20

セミファイナルに選ばれました

全国中学高校Webコンテストにて、セミファイナルに選ばれました

#公式

#告知

≡ コンテンツ一覧へ戻る

文字
サイズ