研究日誌 - 1380461699 - したらば掲示板

研究日誌

114：名無しさん：2014/02/06(木) 07:44:35: 【共通】Hover.css

以前につくったHTMLランチャーを改修した話です。

HTMLランチャーは、HTML画面に表示されたボタンを押すと該当のプログラムを
起動するプログラムでした。

今回の改修は、プログラムから呼び出すHTML画面の修正です。

BASIC!のプログラムは、呼び出すHTML画面のファイル名を変更しただけで
なにも変えていません。

具体的には、ボタンが押されたときのホバーエフェクト（見た目）を変更しました。

「コリス | サイト制作に関する最新の情報をご紹介」というHTML制作における
情報を提供しているサイトがあり、たまに眺めていますが、
そのサイトに以下の記事がありました。

【[CSS]楽しい動きが満載！ボタンや画像用の40種類以上のホバーエフェクトが
まとめられたスタイルシート -Hover.css】
http://coliss.com/articles/build-websites/operation/css/hover-css-by-ianlunn.html

このページにたくさんのボタンがありますが、タップしてみるとボタンの見た目が
微妙に変わります。

この微妙な変わり方をホバーエフェクトというそうです。

微妙に見た目がかわるのでボタンが押されたかどうかがわかりやすくなります。

このホバーエフェクトを利用するためには外部CSSファイルが必要になります。

【IanLunn/Hover ・ GitHub】
https://github.com/IanLunn/Hover

ここのCSS配下のhover-min.cssをダウンロードしました。githubは初めてだったので
ちょっとわからず困りましたがなんとか確保しできました。

つづいてhover-min.cssをタブレットのrfo-basic>dataディレクトリに配置して
同じ場所にあるHTMLランチャー用のHTMLファイルを修正しました。

まず、CSSファイルを呼び出しの為にHTMLファイルに<head></head>部に以下を追加
<link href="hover-min.css" rel="stylesheet">

次に、ボタンの文字のフォントサイズを指定
<font size="5">・・・・・・</font>

ボタンのHTML文の修正は以下です。
修正前：<input type="button" value="メモデータベース" onClick="doDataLink('a-sql12.bas')"/>
修正後：<a class="button border-fade" onClick="doDataLink('a-sql12.bas')" >メモデータベース</a>

ボタンは、inputタグからアンカータグに変更しました。
今回は、エフェクトに黒い額縁みたいな線が表示されるborder-fadeを使いました。
ボタンをタップするとすぐにわかるのでわかりやすいと思っています。

追記：HTMLモードで処理していて別のプログラムをrunコマンドで呼び出す場合は、
必ずhtml.closeを発行してからrun命令の方がいいようです。

【修正前後の画面、HTML、テストPGM等】

https://www.dropbox.com/sh/u6oidhe9r487dxj/F17RJTK4KK

2chMate 0.8.6/unknown/L01A/4.0.3/LT

※書き込む際の注意事項はこちら

※画像アップローダーはこちら

（画像を表示できるのは「画像リンクのサムネイル表示」がオンの掲示板に限ります）