My Web pageへようこそ！

This web page is me and your page!

サイトについて

こちらのサイトは、Web技術に親しむ目的で作成しました。

Web技術に親しむには、HTML・JavaScript・CSSを手打ちするのが一番だと思います。
手打ちを繰り返したその先に技術が身に沁みて来るのです。
技術が身に沁みれば、一層高度なWebパーツの作成に取り組むモチベーションにもつながることでしょう。

そんな気持ちで本サイトを作成しました。

使用している技術など

本サイトの特徴は何と言ってもプレーンなところにあります。
余計なもの一切使用せずに、さしづめ無添加・無農薬のオーガニック食品と言ったところでしょうか。
ちなみに、プレーンを辞書で引くと以下のような意味でした。

weblio辞書 - プレーン

  1. 複雑でないさま。わかりやすいさま。平凡。
  2. 飾らないさま。 「 －なスタイル」
  3. 味つけをしないで、あっさりしたさま。

IT業界では、いわゆるプレーンであることを表現するのに、「ノンフレーバー」であるとか「バニラ」だとか、そういった表現もするようです。
中々しゃれた表現を考えるものですね。

本題ですが、使用している技術は以下の通りです。見ての通り、シンプルなものです。

  • HTML5
  • JavaScript
  • jQuery
  • CSS
  • normalize.css

HTML5のこと

今回、サイト作成中に、HTML5的なタグを使っても良いのではないかと思い、MDNのサイトにたどり着きました。
MDN web docs - HTML5

MDNとは、Mozilla Web Siteのことで、Web標準仕様を策定するリーディングな団体でもあり、またFirefoxを開発している団体でもあります。

EdgeもChromeに敗れ、WebブラウザのシェアがGoogle一強の時代に突入した今、Webの良心はMDNにあると言っても過言ではないのかもしれません。
指摘する者、諫める者、そして反発するプレッシャーが無ければ、組織が腐敗しがちになるのは歴史が証明してきた事でしょう。

そんなことに想いを馳せながらも、MDNのサイトでHTML5を学習したことが『セマンティクスなタグ』というワードです。
sectionとかmainタグとか、今までは全てをdivで表現してきたところをもう少し文脈に沿ったタグを使いましょうよって事らしいです。
それらのタグを本サイトでも利用したかったのですが、今回は時間の都合で断念しました。

そして、もう一つ今回学んだ重要なことが、MDNは良質な記事で溢れているという事実です。
今後も知識のアップデートに際し、MDNを利用させて頂こうと思います。

特徴

解像度

横幅の解像度は1240pxとしました。対象デバイスはPC向けですね。

シングルページ

その名の通り、一つのページ内に各メニューすべてのコンテンツを収めてしまうものです。
マルチページ構成と比較すると、シンプルで素朴そして簡素な感も否めませんが、コンテンツが少量ならばシングルページで十分ですし、費用対効果が大きいと言えるのかもしれません。

固定ヘッダ

大したものではありませんが、ヘッダ固定が特徴の一つです。
仕組みとしては、CSSの『position: fixed』を適用しているだけです。
fixedが適用された要素は”浮いてしまう”ので、後続の要素ブロックに『margin-top: 〇px』の指定が必要です。

メニューのアクティブ化とスクロールの連動

ブラウザの縦スクロール位置に応じて、対応するメニューがアクティブ（スタイルが変化）になります。
仕組みとしては、windowのスクロールイベントを監視して、name属性のあるaタグを上から順に辿り、最後に発見されたaタグと対応するメニューのスタイルを変更しています。

メニュークリック時のスムーススクロール

各メニューをクリックした際に、対応するコンテンツへとスムーススクロールします。
jQueryのanimateを使用しています。

公開しているアプリケーション

Isonのページではアプリケーションを多数公開しています。

MyApp

My〇〇シリーズである、WebアプリケーションテンプレートのMyAppです。
本サイトがMyWebならば、こちらはMyAppでWebアプリケーションのテンプレートとして作成してみたものです。
ソースファイル
公開ページ

Sut (SQL Utility Tool)

Excelで動作するDBオブジェクトブラウザです。
Excelにデータをエクスポート・インポートが簡単に行えて、Excelファイルをそのまま保存すればテストデータなどをポータビリティに保存可能です。共有も簡単。
最近実装された新機能の DB Diff 機能を使えばアプリケーションのテストが楽になること間違いなしです。
Sut

Bexe

Windows OS上における、バッチファイルなどのアイコンが付与できないプログラムに、アイコンを付与してあげる（代わりに実行するExeを作る）アプリです。
実利的な価値は薄いかもしれません。その昔、jarファイルにはアイコンを付けられないという悲しみから作られたソフトでもあります。
Bexe

その他GitHubで色々なものを公開中

GitHubで色々なプログラムを作っています。
IsonのGitHub

問い合わせ

本サイトはIsonが作成しました。システムでお困りのことがあれば、以下にお問い合わせください。

Ison - 問い合わせ