90's風ページの説明｜WEB・ITのお困りを解決します。サポーターズ安曇野

各要素の説明は以下の通りです。

共通

上記のフレームワーク、ツールを使用しています。基本的にすべて無料のものです。
bootstrapでレスポンシブデザインの実装を行っているので、スマホでもキレイに見れるはずです。
W3CのHTMLバリデーションサービス、Googleのモバイルフレンドリーテストも問題なしのページです。

INDEXのタイトル画像

SVG
Bootstrap

「ようこそtakeshiのホームページへ！」
ワードアートを彷彿とさせる文字の画像を、SVGにて再現しました。製作はオープンソースのInkscapeを使用しました。
HTML上はimg要素として呼び出し、Bootstrapの.img-responsiveクラスを当てているので、デバイスの画面の幅に合わせて大きさが変わります。

どぎつい背景画像

CSS3
linear-gradient

かつてMSペイントで作って「背景に並べて表示」していた画像はCSS3のlinear-gradientをbackground-imageに実装しています。
市松模様やストライプなども実装可能です。

「質問してみる」ボタン

CSS3

あえてbutton要素のborder4箇所個別指定で、素敵な立体感を目指しました。
新しいウィンドウが開きます。飛び先は怪しくないので、押してみてください。
なぜ「お問い合わせ」じゃなく「質問してみる」なのか、なんでそんなにでかいボタンなのか、というつっこみは無しです。これが90'sスタイルです。

設置失敗のアクセスカウンタ

意気揚々と設置したものの、なぜか失敗したアクセスカウンタ。あー、あるある。
デッドリンクの画像を見せることで再現しましたが、若干うろおぼえです。
ちなみにIEを超久々に起動し、強引に表示させてキャプチャしてるときにIEが10のままだと気づきました（笑）。
それくらいIEを触っていませんでした。Edge入れなきゃ。

左右にスクロールするmarquee

CSS3
jQuery

marqueeの動きがCSS3のアニメーションでできるとのことで、入れてみました。
なつかしい。今となっては、何であんなものがあったのか、知りたくもない。
中身はやはり、現在時刻でしょう。こんなところに必要ないのに出しちゃうのが90'sスタイル。
現在時刻はjQueryのdate()関数で拾っているだけ。フォーマット変更はしません。
参考：http://on-ze.com/archives/648

メニュー

bootstrap
.text-center

テーブルレイアウトにしようかと思ったけど、さすがにやめておきました。<ul>リストです。
<center>タグを使用せず、bootstrapの.text-centerクラスで中央ぞろえです。

謎のアニメーション画像

Font Awesome
fa-stack,fa-spin

NEW　とか、チカチカしたGIFアニメーションがよくありました。今回はFont Awesomeのstack機能を使用して2種類のWEBアイコンを重ねて、.fa-spinにて回転させています。

お問い合わせ

安心してください本物です。
ちゃんと私まで問い合わせが届きますので、ご利用ください。

無意味に貼り付けられた画像

jQuery

なんの脈絡もなく現れる、サムネイル画像。猫だったり孫だったり、景色だったり。
しまいにはボタンの形状に加工されていたり。
大抵、巨大な画像にリンクされているので、うっかりクリックしないよう気をつけてください。
ダイヤルアップだと死にます。
もちろん勝手に保存されないように「右クリック禁止」を入れてあります。javascriptというよりjQueryです。
対象の画像にクラス.noclickをつけると右クリックしたときにアラートが表示され、コンテキストメニューが抑制されます。
参考：http://mitama-design.com/blog/cate_javascript/noclick.html

相互リンク募集中！

お気軽にどうぞ（笑）！

問い合わせ先メールアドレス

数値実体参照

テキストそのままソースに書いちゃうとボットに拾われるので、それを回避／困難にするために、文字列を数値実体参照に変換しています。16進数への変換です。ソース見ると分かります。

コピーライト

文字実体参照

日本においては、コピーライト表記をする必要はないのですが、慣例と抑止力として表示しているようです。

正しい表記は

©マーク
最初の著作権発行年
著作者ではなく著作権者

このホームページについて

共通