バタンキュー

Web制作の現場から・・ただいま少し一休み中

※当ページを閲覧される場合は、Windows7以上、Internet Explorer11などの安全でできるだけ最新の閲覧環境でアクセスされることを推奨いたします。
※タブレット端末などのブラウザーで横幅640px以下の画面解像度で閲覧される場合は、レイアウトが崩れて正しく表示されない可能性がありますのでご了承ください。


JavaScript無効時の表示確認

カテゴリー:技術的なところ
敢えて、あえて技術的な側面・・ものづくりという観点から問いかけてみたいと思いますが、みなさんはどうでしょか?制作時にレスポンシブ対応じゃなくても、最低限のレンダリング確認っていう意味で、Internet Explorer、Firefox、およびGoogle ChromeやSafariとかのメジャーブラウザーを使用したローカル環境での表示確認&サーバーアップ後の表示確認+JavaScript(アクティブスクリプト)を無効化にした状態でそれぞれの表示確認をやってますかな?

かなり以前の[JavaScriptで著作権の西暦表示]という記事中の拙文、
JavaScriptオフの環境なんて考えずに行きましょうよ!と言いたくもなる気持ちが無くもなく・・
と書いてました。

確かにJavaScriptを無効にしてWebページを閲覧してる人は割合ではかなり少ないみたいですが、今もゼロではありましぇん。何らかの理由で意図的にJavaScriptをオフにしてたり、意識せず、組織的なセキュリティー対策でそうなってたりする場合もあるのかも知れません。

・・やっぱりプロの制作者としては、最低限のやるべきことなんではなかろうかと考える今日この頃やったりもします。もちろん表示確認をするだけじゃなくて、JavaScriptが無効時でも必要最低限の情報発信ができる状態に仕上げてから公開・納品するための表示確認ですよー!!

参考:JavaScript無効でWebを見ている人はどれぐらい? Web担で実際に調べてみた by Web担当者Forum

参考:JavaScript が無効なユーザーはほとんどいない。だから… by Website Usability Info

特に最後の見出し【HTML、CSS、JS の適切な役割分担を意識する。】の内容は、コンテンツ設計において重要な意義と制作者が担うべき(考えて果たすべき)ことを何とも明快に解りやすく説明してくれてるではありませぬかー!!


で、実際にブラウザーの設定でJavaScriptをオフにして表示確認をする訳ですが、最近の無効化についてはFirefoxなんかちとややこしいことになってるので、下記ページなどをご参照くだされ。

参照:各ブラウザでJavaScriptを無効にする by Qiita
0
     | 技術的なところ | | | pookmark

    jQueryだけでも!その2

    カテゴリー:技術的なところ
    前回の続編・・といっても、かなり間があいてしまいました。言い訳ではございませんが、決して忘れてた訳じゃなく、記事を書いてる途中の状態でなかなか仕上げられずにそのままになってしまっておりました。しかもこのカテゴリーの投稿自体が、実はかなりペースダウンしてきてます・・・やはり現場を離れてるだけあって、鬼気迫る日々の技術的な解決策を検証することもなければ、そのために新たな技術習得を必要とすることもないので、基本的に自分次第なんですが、私・・根っこがズボラなもんで。リハビリと称して記事を書きつつも、なかなか向上心を維持し続けることも難しく・・あ、これはもう言い訳になってますね、完全に・・・

    **********

    ということで・・、どういうことで?
    前回の記事はこちらです。 → [jQueryだけでも!その1]

    今回は、ページの先頭へ戻るボタンの表示について、このブログでやってるjQueryだけで設定してる方法の説明をば。と言っても、前回と同様、お知恵拝借の関数をほぼそのまま使っております。下記に掲載しておきますのでよろしければご自由にご利用くださいませ〜!

    まず最初にjQuery本体を読み込ませます。
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <!-- <head>要素内に記述〜読み込ませるバージョンには注意が必要 -->
    
    ※JSファイルをダウンロードしたものを利用してもO.K.ですよ!
    ダウンロードできるバージョンの違いについては、前回の記事[jQueryだけでも!その1]をご参照くださいませ。
    ◎ちなみに本家サイトです → jQuery

    ☆☆パターン① (以前の)フェードイン表示タイプ☆☆
    <script>
    $(function() {
    	var topBtn = $('#page-top'); //要素に適用するidを設定→HTML内でこのidを指定しておく	
    	topBtn.hide();
    	//スクロールが200に達したらボタン表示
    	$(window).scroll(function () {
    		if ($(this).scrollTop() > 200) { //ここの数値の変更=ボタン表示のタイミング変更
    			topBtn.fadeIn();
    		} else {
    			topBtn.fadeOut();
    		}
    	});
    	//クリックでスクロールしながらトップに戻る動作設定
            topBtn.click(function () {
    		$('body,html').animate({
    			scrollTop: 0
    		}, 250); //スクロールのスピード設定値
    		return false;
        });
    });
    </script>
    
    /*-----------------------------------------------
    ページの先頭へ戻るボタン
    -----------------------------------------------*/
    #page-top { position:fixed; bottom:20px; right:20px; z-index:9999; text-indent:0}
    * html #page-top { position:absolute; bottom:20px; right:20px; z-index:9999; text-indent:0}
    #page-top a { text-decoration:none; width:90px /* 数値は適当に合わせてください */; display:block}
    #page-top a:hover { text-decoration:none}
    

    ☆☆パターン② (現在の)にゅるっと下から表示タイプ☆☆
    <script>
    $(function() {
    	var showFlug = false;
    	var topBtn = $('#page-top'); //要素に適用するidを設定→HTML内でこのidを指定しておく
    	//最初はボタンをページ表示範囲外に配置
    	topBtn.css('bottom', '-100px');
    	var showFlug = false;
    	//スクロールが200に達したらボタン表示
    	$(window).scroll(function () {
    		if ($(this).scrollTop() > 200) { //ここの数値の変更=ボタン表示のタイミング変更
    		     if (showFlug == false) {
    		           showFlug = true;
    		           topBtn.stop().animate({'bottom' : '20px'}, 200); //ボタンをbottomから20pxの位置に表示させる(200はスクロールスピード値)
    		     }
    		} else {
    		     if (showFlug) {
    		           showFlug = false;
    		           topBtn.stop().animate({'bottom' : '-100px'}, 200); //ボタンを最初の位置に戻す(200はスクロールスピード値)
    		     }
    		}
    	});
    	//クリックでスクロールしながらトップに戻る動作設定
     	topBtn.click(function () {
    		$('body,html').animate({
    			scrollTop: 0
    		}, 250); //スクロールのスピード設定値
    		return false;
     	});
    });
    </script>
    
    /*-----------------------------------------------
    ページの先頭へ戻るボタン
    -----------------------------------------------*/
    #page-top { position:fixed; right:20px; z-index:9999; text-indent:0}
    * html #page-top { position:absolute; right:20px; z-index:9999; text-indent:0}
    #page-top a { text-decoration:none; width:90px /* 数値は適当に合わせてください */; display:block}
    #page-top a:hover { text-decoration:none}
    

    (X)HTML内で、先頭へ戻るボタンを設置するブロック部分のソースは下記のとおりで、場所は</body>の上あたりや、その近辺にでも記述しておけば大丈夫ですよ!
    <p id="page-top"><a href="#top" title="ページの先頭へ戻る"><img src="ボタン画像をアップしているサーバーディレクトリーのパス/*****.png" alt="Button of Back to Top"></a></p>
    


    結局、前回と今回、ご紹介した関数の内容って、jQueryのメソッドっていう基本的な仕組みを使った動作の連鎖を、ある条件(トリガー)を設定して、その条件をクリアすれば発生させたり、元に戻したりさせてるんですねー。この“jQueryメソッド”、いろいろとありまして、連結して記述するとメソッドチェーンといって順番に動作処理してくれるという仕様や、2〜3個のメソッドを覚えれば、かなりjQueryだけで面白いアニメーションができたりと、工夫次第で、いろんなプラグインを読み込んでお腹がいっぱいになってページが重たく(表示が遅〜く)なるくらいなら、“jQueryメソッド”を使って自分なりに何とかしてしまった方がHTML自体の身が軽〜くなってダイエット成功!!なんてことにつながるかもですよー!!

    また、機会があれば次回は是非そのあたり、“jQueryメソッド”のお話を・・・
    0
       | 技術的なところ | | | pookmark

      SWFの前面に要素を配置したい!

      カテゴリー:技術的なところ
      必要に迫られてFlashアニメーションを作らなアカンようになったり、他者制作の『***.fla』ファイルを解らんなりに何とかいじりたおして修正してみたりと、私の場合はそんなことがきっかけでFlashを覚えはじめたんですが、最初の頃、リンクの設定でActionScriptを使わずに、何か簡単な方法はないかいなーと考えて思いついたものの、すぐにつまずいたことがありました。

      今、HTML5から覚えていってる人にしてみれば、あんまり役に立たへん情報かも知れませんが、もしかすると既存のぺージ修正や、ちょこっと改修が必要な箇所とかで参考になるかも??

      例えば『topani.swf』っていうFlashアニメーションのSWFファイルを読み込んで表示させてるページがあったとします。そして定形のメニューや案内とか、そのアニメーション上に最初から特定の場所にハイパーリンクを設定したい場合などです。
      まず最初に考えたのは、a要素をCSSで{display:block}とブロック要素指定しておいてから、レイヤー(CSSの{position},{left},{top}などの設定)配置してやれば解決!のはずでしたが、そうはうまくいかず・・{z-index}を指定しても全然反応なし・・・。

      そうなんです、そのままやと、読み込んだ『topani.swf』が常に最前面に表示されて、他の要素はSWFの背面に隠れてしまって、どこに配置されてるのかも判らないという悲しいブラウザーの宿命?やったんです。で、具体的な解決方法は、読み込んでるobject要素の中のparam要素と、おまけのembed要素に、あるパラメーターを指定してやると、見事にSWFが前面表示から背面表示になってくれて、ブロック要素として配置したa要素がSWFの前面に登場!!となるのでございました。
      ・・・
      ・・・
      <object ・・・ >
          <param name="movie" value="topani.swf"></param>
          <param name="wmode" value="opaque"></param> 
      </object>
      ・・・
      <embed ・・・ wmode="opaque" ・・・ /> 
      ・・・
      

      自分でコードを書いてて何ですが、object要素やembed要素を使って読み込むのって少し古い気がしますね・・別の方法で、SWFObjectっていうJavascriptを使ってSWFをHTMLに読み込むこともできるので、head要素に<script>〜</script>で下記ページを参照に、"paramsオブジェクト"の箇所に wmode="opaque"({wmode:"opaque"}) を指定すればO.K.やと思います!

      参照:Adobe Flash Platform * HTML への SWF コンテンツの埋め込み

      参照:Flashの読み込みを簡単にする「SWFObject」 by JavaScript Library Archive

      参照:SWFObject - Google Code

      これでa要素に限らず、他の要素も同様に、Flashアニメーションに重ねて前面配置することができますよ〜!!
      0
         | 技術的なところ | | | pookmark

        Not Found も閲覧者への大事なメッセージ

        カテゴリー:技術的なところ
        リンク先のページが見つからへん場合や、接続先のサーバーにファイルが無い場合に「404 File not found...」とか「Not Found」といった表示がブラウザーに表示される場合がありますが、これは単にサーバーからの応答をブラウザーがHTML表示しているだけで、この言わばエラー表示をカスタマイズする方法があります。いろんなところでいろんな方がよくご紹介、ご案内されてるので今更な気もしますが、サクッと申しますと、

        ① オリジナルの(Webサイトのデザインに合わせた)404 Not Found ページを、例えば「404.html」というファイル名で用意します。

        ② .htaccess(こういうファイル名なだけの実体はテキストファイルです)に、下記ソース例の呪文を書き込みます。

        ③ ドキュメントルートに、①で用意したHTMLファイルと②で作った.htaccessをアップします。

        以上!!

        参照:HTTP 404 by Wikipedia

        ※.htaccessについては、Windowsに付属してる「メモ帳」とかのテキストエディタでも簡単に作れます。ローカル環境で「.htaccess」というファイル名のファイルを保存することができない!ということはないんですが(既存の「.htaccess」をベースに利用すればO.K.だったりします)、難しいよ〜、そんなんできへんー!!という方は下記ページをご参照くださいまし。

        参照:.htaccessファイルの書き方と設置方法 by All About [ホームページ作成]

        ※ご利用になられてるサーバーによっては、.htaccessが設置できへんかったり、今回ご紹介する方法が使えない場合があるので予めご了承くだされ・・・

        あ、もちょっとだけ補足・・せっかく用意するオリジナルの【Not Found】なので、サイトのグローバルメニューや案内文&トップページへのリンクなんかも設置しておきませう!
        ErrorDocument 404 /404.html
        ※お約束事⇒1行だけで終わっても改行を入れて2行にしてね・・・
        
        ・・・
        ・・・
        <title>ページが見つかりませんでした。 :: ○○○○○</title>
        ・・・
        ・・・
        <h1>お探しのページが見つかりませんでした。</h1>
        <h2>HTTP 404 (ファイル未検出)</h2>
        ・・・
        <h3>ご確認ください</h3>
        <h4>アドレス(URL)が間違っている可能性があります。<br>
        アドレス(URL)を直接ご入力された場合は、ご確認の上、もう一度お試しください。</h4>
        ・・・
        <h4>お探しのページは、削除または移動されている可能性もあります。<br>
        また、一時的に閲覧できない可能性も考えられます。</h4>
        ・・・
        ・・・
        

        因みにこんなページもありましたのでご参考までに・・

        参考:いつか真似したい!ユニークで楽しい「404 Page Not Found」30選 by Find Job ! Startup
        0
           | 技術的なところ | | | pookmark

          疑わしき変数の罠!?

          カテゴリー:技術的なところ
          プログラマーさんじゃなくても、ちょいちょい「変数」とやらに触れる機会が出てきたりします。Webページの制作をやってると、どうしても【お問い合わせフォーム】なんていうフォームページを作ったり、誰かが作ったフォームをクライアントの依頼で内容を変更(更新)するために触らないといけないことも出てきます。
          そんな時には、小さな人手不足の会社やと必然的に、デザイナー自らフォームページのHTMLに連動してサーバー上で動作するプログラムもちょこっと作ってみたり、弄ってみたりすることになります。もちろん、社内に専門で「ワシに任しなはれ!」って仰ってくださる頼れる担当者がいるような会社やったら、最初からそんなことする必要は無いんですが・・

          まあ、サーバーサイドのプログラムっていっても【お問い合わせフォーム】の場合は、ほとんどが[Perl]か[PHP]で、たま〜にWindowsサーバーを利用されてるクライアントの場合、マイクロソフト謹製のIIS(Internet Information Services)っていうサーバーウェアが動いてて、これまたオリジナリティーあふれるASP(Active Server Pages)っていうほぼ[JavaScript]なフォームの時もあります。

          参照:IIS (Internet Information Services) by Wikipedia

          参照:ASP (Active Server Pages) by Wikipedia


          サーバーサイドな[Perl]や[PHP]もそうですが、特に触れる機会の多いクライアント(ブラウザー)サイドな[JavaScript]。代表的なライブラリーの一つ、jQuery(ジェイ・クエリー)が普及する以前から多くのブラウザーに実装されてた機能で、少しでもリッチなインターフェースやインタラクティブ性をページ内に持たせようと、多くのWebデザイナーたちも、そのプログラム言語の勉強に励んでました。多分・・

          参照:JavaScript by Wikipedia

          そして、私のような似非プログラマーということさえおこがましい、知識もないのに見様見真似で「えいやっ!」とスクリプトを仕込んでは「動かんなー・・・」「書いてるとおりにやってるのに全然そうなれへんやん!」と勝手に怒り出すやからも中にはいましてですなーこれが・・

          よく意味も解らずに、コレは使えん!なんて、有志の方が作ってくれたjQueryプラグインを無料でダウンロードしておきながら、勝手に吐き捨てるようなことをのたまうという我ながらあっぱれなバカさかげんを露呈しておりました。

          その多くの原因は、いわゆる“多重読込による変数カブリ”でございます。まぁ、今思えばチェックが足りなかっただけ、というか完全に利用する側の問題です。初心者にありがちっちゃあ、ありがちな・・

          CSSと同様、JavaScript(以下JS)も、ライブラリーやプラグインとか機能ごとに一つのファイルに分けて(というか、ダウンロードしたファイルは内容の改変をすることはあっても、ファイル自体は分割したり、他のファイルに結合したりせずにそのまま使うことが多い)外部JSとしてHTMLの<head>で読み込んで利用することがほとんどで、HTMLごとに設定が可能なオプション機能とかがある場合は、直接HTML内に<script>を使って設定するようになってたりします。
          そうです、最初のうちは大丈夫なんです。でも読み込ませる外部JSが増えていくうちに、だんだん動作しなくなるものとかが出てくるようになるんです!最初スライドショーだけやったんが、LightBox風なギャラリーを追加して、ズームエフェクトみたいなんもええな〜、マウスオーバーでドロップダウン式に展開するメニュー表示もええやんか〜!、あ、ついでにアレも!ってな具合にどんどんとてんこ盛りになってしまうと・・・あれっ!?おかしいなー?何か動かへんやん!ということが起こったりします。

          そこで、読み込ませる外部JSの順番を入れ替えてみたり、いろいろやってみる訳です。それでうまくいく場合も、たま〜にはあったりします。オブジェクト指向なので??

          でも大体は先ほど言いましたが、“変数カブリ”です。

          どれか読み込ませている複数のJSで、同じ文字列を使用した変数を宣言してしまってるという、そら〜おかしなことになるわなー的なことが原因です!例えば、

          var sample = 0;

          という変数の記述が、「aaa.js」というJSファイル内と「bbb.js」というJSファイル内にもあって、両方とも同じHTML内に読み込まれている場合です。コレってチェック大変です。でも調べて判ったときの爽快感はたまりませんよ〜! 因みによく使われる代表格 ⇒ [ var i = 0; ] 要チェック!! こんなよく登場する変数が、特定の関数内だけで機能するローカル変数やったら大丈夫なハズですが・・そんなフリをするグローバルなやつかも!!

          変数宣言の[ var ]って省略できたりするだけに、どうしてもグローバルスコープになりがち!!そこら辺も予備知識、というか本当は基本として知っておくべきことなんかも〜。

          参照:変数 by JavaScript超初心者によるJavaScript入門講座

          参照:JavaScript のスコープを理解する by tacamy.blog

          む、むずい・・・ぞ、と!
          0
             | 技術的なところ | | | pookmark

            h1要素の出現回数

            カテゴリー:技術的なところ
            以前、かな〜り前・・そうですね、まだこの業界でもXHTML1.0が標準になりつつあるものの、外注さんに制作依頼を出すとまだHTML4.0やHTML4.01が当たり前なそんな時期、よくWebページの[h1要素]の配置に疑問を感じたことがありました。さすがに今はあんまり見ることも少なくなってきましたが、全ページすべて同じ個所に[h1要素]が配置されてたことが多々あったんです!
            もうお気づきかと思いますが、サイト名が表示される部分をすべて<h1>サイト名</h1>なんてしてたんです!あ〜、なんてもったいない。大事なマークアップ要素を!

            みなさんもお勉強されたとおり、そもそも<h1>の「h」は、「heading」の略で「見出し」の意味があって、要素としては[h1要素]〜[h6要素]までが序列式に用意されてます。文書構造上、[p要素]や[div要素]よりも重要性は高く、HTML5になって[section要素]や[article要素]が文書構造に大きな影響を与える要素として追加されてもなお、[h1要素]〜[h6要素]の使い方、重要性に変化が生じる訳じゃなく、以前として大事なマークアップ要素であることには違いありません。

            参考:もう悩まない!HTML5の「section要素」と「article要素」の違いについて by Web制作 style

            そして多くのレンタルブログ(特に無料で利用できるサービス)なんかの場合、デフォルトで<h1>ブログ名</h1>なんてことになってることが未だにあったりするんですよねー。

            そこで・・ご提案!もしHTMLやCSSを編集できるレンタルブログ(ここ→JUGEMさんもそうです!)を利用してる方や、これからWebサイトの設計をはじめる方へ。もし、HTML4(4.01)もしくはXHTMLからHTML5へ切替えて制作をしようと思った時、そのタイミングで是非とも実践してくださいまし!
            ページのタイトルやコンテンツのタイトルこそが「見出し」なので、そこに[h1要素]を適用しませう!!

            あくまで私見やけど、ブログの場合やと、例えば記事ごとのタイトルに[h1要素]を適用させる!ってのはいかがかな? えっ!?そんなことしたら記事やコンテンツが何個も1ページ内にあったら<h1>が何個も出てきてマズいんちゃうのー??って?
            確かに、以前はそんな議論もありましたなー・・・あ、今もそう言われてる? しかしですね、「見出し」であって、「タイトル」を意味する[title要素]じゃないんで。本をめくっていってみて、同じページに「見出し」が複数あることってフツーにありませんか?内容が少ない、短い文章とかで終わるコンテンツとかやと自然にそーなってしまってますよね! まぁ、1ページ中にまったく「見出し」が登場しないページもありますが・・

            とにかく、<h1>が1ページ中に1回っていうルールなんて誰も規定してない(※)ので、ちゃんとした「見出し」としての使い方をしましょう!という話です。ただし!あくまで序列のある要素なので、[h1要素]〜[h6要素]の使い方だけはちゃんと守ってくださいねー。

            参考:h1タグって複数設置していいの悪いの?その位置や文字数を解説! by BELKA

            参考:H1を複数使うとSEOスパム|間違いだらけのSEO by SEO会社が作った検索エンジン対策読本


            ※マイクロソフトさんは誰の権限でこんなことを仰ってるんでしょ?もしかしてBingじゃ、そう解釈するからスパム扱いにならんよーに気を付けて!ってことか??

            参照:WEB1004 - <h1> タグは、1 ページに一度のみ宣言できます by Microsoft Developer Network
            0
               | 技術的なところ | | | pookmark

              要素とタグの違い

              カテゴリー:技術的なところ
              かな〜り初歩的な根本の話ですみません。長年Web制作の現場に携わっていながら、自らがごっちゃにして表記してたりしてる記事がありました。慣れていくことで曖昧に処理してしまう恐ろしさを知っている自分に対して、自戒の意味を込めて・・・。

              HTMLの書式は要素型という型を使用して、半角の「<」と「>」で必要な要素型を囲んだ[開始タグ]と、同じく半角の「</」と「>」で同じ要素型を囲んだ[終了タグ]までを、一つのマークアップ要素としてます。プログラムで言えば、一区切りの命令文です。
              ※img要素や、br要素、hr要素なんかは、以前は[終了タグ]は不要なんじゃなくて、省略できるだけやったハズやけど、HTML5やと[終了タグ]を付けるとエラーになったりするらしいんでお気をつけて!なんて説明は要らないですか・・??なので、[終了タグ]のないマークアップ要素は、それなりに解釈していただければ幸いです。


              そうそう、よく「インライン要素」とか、「ブロック要素」とかっていう言葉を聞いたりしたことはないでしょか?

              参照:ブロックレベル要素とインライン要素 by HTMLクイックリファレンス

              !HTML5からは、さらに要素の分類は細分化されて、より複雑に入り組んだモデルになる感じです。

              参照:HTML5における要素の分類(コンテンツ・モデル) by HTMLクイックリファレンス

              と、余談でしたが、つまり【要素】は、→[開始タグ]マークアップ内容[終了タグ]←までを意味してます。[終了タグ]のないから要素なんかは、それなりに解釈をば。
              一方、【タグ】は、[開始タグ]・[終了タグ]と言ってるとおり、単に“要素型”として使用されるマークアップ機能の名称で、「<」と「>」、または「</」と「>」の間に要素型として使用する文字列を含んだもののことです。

              ということで、いままでの記事中で、<img>要素とか、<a>要素とか書いてたりしたのは間違いです。申し訳ございましぇん・・。正確にはimg要素a要素と書くべきです!もしくは単にタグだけの記述で<img><a>とかってしてればまだ許容範囲内でございました。


              ・・猛省の極み・・詳しい図解などは下記ページなどをご覧くださいまし。

              参照:基礎用語:「タグ」と「要素」の違いとは? by All About

              参照:タグと要素(エレメント)の違いを説明してください by @IT
              0
                 | 技術的なところ | | | pookmark

                dfn要素を利用しよう!

                カテゴリー:技術的なところ
                言葉の意味や語句の内容を定義付けしたり、見出しを区切ったりする要素として、HTMLには結構いろんな要素が用意されてたりします。<h1>〜<h6>、<p>、<dt>、<dd>だけじゃありませぬよ〜。HTML5には<section>なんてタグも新たに追加されたりしてて、インタラクティブ性の充実度が増すとともに、ますます構造化を明確にしていくような、そんな傾向のあるXHTML→HTML5への流れですが、ずっと以前から各ブラウザーで対応済みの要素があります。

                dfn要素、ご存知でしょか? <dfn>○○○○○</dfn>って、使ったことありますかー?
                もし「あんまり知らんなー」とか、「そんなに使うもんじゃないっしょ!」とか言ってる人ー、思うひとー!!どんどん活用してくださいまし。
                ※因みに、dfnは、definition=「定義」の略です。

                既存のWebページに追加していっても良いと思います。強力な意味付け、定義付けを行えるので、それまで平坦やった文章や、何気ない言葉に力を与えることができたりするかもですよー!!

                何も、無理やり解説じみた文章を作る必要はなくて、そもそも「Webページに掲載する事柄」自体が、閲覧者からすれば何かしらの得ようとする物事に対する情報なので、「定義」というと、どことなく堅苦しいイメージがしますが、結局のところ、掲載している「タイトル」とその「内容」の関係のようなものと考えると、かなり身近で使いやすい要素な気がしてくるんじゃないでしょか!

                参照:<dfn> by HTMLクイックリファレンス(HTML5タグリファレンス)

                参照:dfn - テキストタグのサンプル by HTML5とCSS3の辞典

                参照:dfn 要素 by MDN(MOZILLA DEVELOPER NETWORK)


                参考:<section> by HTMLクイックリファレンス(HTML5タグリファレンス)


                単純に省略形などの略語の解説の場合とかやと、上記参照ページにもあるように<abbr>を内包させて使うと尚良し!といった感じですかな。

                参考:<abbr> by HTMLクイックリファレンス(HTML5タグリファレンス)


                視覚的に効果を付けなくても構わないんですが、dfn要素の[title属性]は、定義付けの内容という特別な意味合いを持つのでうまく利用して、CSSでアンダーラインやカーソルを工夫すると、ツールチップ的にこんなこともできて、見せ方のバリエーションも広がるので、いっちょやってみるかーってな気になりません??
                ↓PCで閲覧の方は、アンダーライン(破線)の文字部分にカーソルを乗せてみてください。

                ********* 参考例 *********
                CMS(Content Management System)
                最もよく知られているのが、ブログです。専門的な知識を持たなくても、自分でサイトを更新できるシステムです。ご要望に合わせて、デザインし構築していきます。
                ***********************

                ↓↓実際のソースはこんな感じです↓↓
                <dl>
                  <dt>■<dfn title="特殊なツールや技能を要さずにウェブページの更新を可能にする管理システム">CMS(Content Management System)</dfn></dt>
                  <dd>最もよく知られているのが、ブログです。専門的な知識を持たなくても、自分でサイトの主要な箇所を更新できるシステムです。ご要望に合わせてデザインして構築していきます。</dd>
                </dl>
                
                dfn { border-bottom:1px dashed #ccc; cursor:help; font-style:normal}
                

                もちろん、インライン要素なので[title属性]なんかは使わずに、そのまま文章中でフツーにツラ〜っと使っちゃっても全然問題なしですよ!

                参照:dfn要素・dfnタグとは by タグHTML

                どないでしょ?
                0
                   | 技術的なところ | | | pookmark

                  title属性を利用しよう!

                  カテゴリー:技術的なところ
                  すべてのHTML文書内の主要な構造をなす<body>要素内の各要素に設定が可能な属性として、以前【CSSの基本】と題したシリーズで紹介した、セレクターやアンカーポイントとして利用できる[id(属性)]があります。【CSSの基本】シリーズについて興味のある方は下記をどぞ。
                   →[CSSの基本1]
                   →[CSSの基本2]
                   →[CSSの基本3]
                   →[CSSの基本4]
                   →[CSSの基本5]

                  そして[id属性]以外にも、<body>要素内のすべての要素に設定可能な属性に、[class属性]や、[style属性]とかがあって、その中の一つに、[title属性]があります。みなさんは普段、どういう扱いで[title属性]を使うシーンに遭遇するでしょう?
                  結構よく目にするわりには、有っても無くても同じようなイメージでしょか? オーサリングツールとかで勝手に設定されるから意図的に仕込んだりはせんのでしょか? そうそう、『LightBox』や、いろんなjQueryプラグインとかで、キャプション表示のために[title属性]を設定したことがあるとか、そんな感じでしょうか??

                  と、まぁ今回はですね、[id属性]と同じようにいろんな要素に設定可能なこの[title属性]にスポットをあてて、その有用性を充分に活用しようじゃありませぬか! という話でございます。

                  参照:title属性 by W3G

                  参照:title属性 by W3 Watch Reference

                  !因みに・・少し古い文献やと、「HTML4が発表されてから1999年頃まではimg要素にtitle属性を用いる例がしばしば見られましたが、2000年頃からは使われなくなっているようだ」といったW3Cのドキュメントを引用した解説をしているページもありますのでご参考までに。

                  参考:img要素にtitle属性は使うべきではないのか(imgタグにおけるaltの使い方について) by ごく簡単なHTMLの説明


                  img要素においては、どうしても切っても切れない[alt属性]との関係があるんですが、そんなimg要素(imgタグ)に設定する[alt属性][title属性]について、かなり細かく考察していただいてるページがあるので、ぜひ下記をご覧あれ!

                  参照:IMGのalt属性・title属性について考える(後編) by HiGash.Net


                  重要なのは、マウスカーソルを乗せた時に表示されるツールチップ表示(※)のために[title属性]を使うんじゃなくて、それはあくまで副産物として。そうそう、HTML5やと、必須やったimg要素やarea要素の[alt属性]はある条件下の場合は省略できるとか!(※※)
                  となるとますます活躍の場が広がる[title属性]ですが、SEOに有利とか、そういうのでもありましぇん!!→そういうのは、まともにキッチリやってれば後からついてきますよー。
                  大事なのは、『いかに必要な情報を閲覧者に無駄なく届けられるか』なので、そのために用意されてる[title属性]という便利なHTMLの機能を使って工夫しましょうよー、ということです。

                  ※ここにカーソルを乗せてみてください。こんな感じで表示されるのがツールチップ表示です。


                  ※※ 参照:HTML5: img 要素の alt 属性 の仕様 by attosoft.info
                  0
                     | 技術的なところ | | | pookmark

                    jQueryだけでも!その1

                    カテゴリー:技術的なところ
                    JavaScriptの複雑な動作や設定をライブラリーという一つのファイルにまとめて、あとはHTML内で簡単な数値設定とかするだけでいろんな動作や、ユーザーとのやり取りがブラウザー上で表現できるようにしよう!という動きは随分と前からありました。ちょうど「Ajax(エイジャックス)」が広がりを見せ始めた頃、呼応するように専用のアプリケーションフレームワークが開発された経緯があります。その中に「Prototype(プロトタイプ)」や「jQuery(ジェイ・クエリー)」、Adobeアプリケーション利用者には馴染み深い「Spry(スプライ)」といった今でもよく利用されるライブラリー群が存在します。

                    参照:Ajax by Wikipedia

                    参照:JavaScriptライブラリ by Wikipedia

                    今では画像の拡大ポップアップ&ギャラリー表示とかで有名な『LightBox』や、メニュのアコーディオン表示で活躍する『Accordion』も、当初は「prototype.js」や「scriptaculous.js」、あるいは両方を一緒に読み込ませてから動作させるのが定番でしたが、やがて各ライブラリーのバージョンアップが進むと、動作が軽く使い勝手の良い「jQuery」や「Spry」を利用するように切り替えていくようになりました。
                    「jQuery」にも様々な種類の『LightBox』系プラグインが有志によって提供されるようになったからです。そして「Spry」では動作が機敏な『SpryAccordion.js』という単体で動作する(※)ライブラリーが用意されているんです。
                    ※JavaScriptファイル自体は単体ですが、実際はCSSとセットです。

                    本題の「jQuery」ですが、ライセンス形態は<MIT License>となってます。詳しくは下記をどぞ。

                    参照:jQueryとは? by jQuery入門道場 〜jQueryの使い方〜

                    まあ、詰まるところダウンロードした「jquery.js」or「jquery.min.js」の中に記述してある著作権表示を消したらアカンよーってことでしょう。そこを守れば、商用・非商用問わず誰でも利用可な感じですかな。ライブラリーやプラグイン系のほとんどの配布素材はこの形態をとってることが多いですが、一応は各人の手で、その目で、必ずご確認だけはお願いしますよー!
                    で、今は上記参照ページ中にもあるように、CDN(Contents Delivery Network)っちゅう便利なもんがございます。有名なのはYahoo!先輩やGoogle先生ですが、私はよく後者にお世話になります。

                    参照:Google Hosted Libraries - Developer's Guide by Make the Web Faster — Google Developers

                    例えば、このブログで利用しているのがそうですが、ソースは下記のとおりでございます。
                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <!-- <head>要素内に記述〜読み込ませるバージョンには注意が必要 -->
                    

                    ◎ちなみに本家サイトです・・・→参考:jQuery

                    本家サイトを見ると、ダウンロードできるバージョンが「v1.11.1」と「v2.1.1」となってます・・Google先生のCDNでもやっぱり最新のバーバョンに両方がリストアップされております・・・??はて?

                    とお思いのアナタ、「jQuery」のバージョンの違いについては詳しく説明してくれてるサイトがあるので一度ご覧あれ。もしかするともっと古いバージョンの「jQuery」を使った方がクライアント的には良いんではないのかな〜?

                    参照:jQuery本体のダウンロードと1.X系2.X系の違いと1.9系以降の注意点など by WPC

                    もひとつおまけに、上記参照のその前の参照のGoogle先生のCDN=Google Hosted Libraries のページ自体が、クロスブラウザーを考慮してか何なのか、読み込ませてる「jQuery」のバージョンがv1.6.1だったりします・・

                    **********

                    と、またいつもの悪いクセが・・前置きが長〜い!長過ぎて書きたいことが書けなくなってますよー!!

                    今回言いたかったこと、この動作が軽い「jQuery」というライブラリー、実は単体で多くの機能を備えてます。最近このブログのサブタイトル(ページ上部の中央より右側あたりのテキスト)にも適用させてる【タイプライター風なテキスト表示】も、「jQuery」単体の機能(必要に応じてHTML内で数値の設定は必要です)とCSSの設定だけで表現してます。
                    お手間でなければ、ページ上部へお戻りいただいて、リロード(再読込 or F5キー押下)の後しばらくそのまま・・・ちーん、というそんなにインパクトがあるもんでは無い??感じですかな?

                    もちろん、似非プログラマーな私が考案した訳じゃなく、お知恵拝借です!!と、偉そに言うことじゃないですが・・ネタバラし!!下記ペーシを参考にしましたー!

                    参照:jQuery テキストをタイピング風に by Stronghold

                    このページの2段落目あたりかな〜?「タイピング風 DEMO」とある箇所のソースを見ながら、スピードやCSSをカスタマイズ(というかほぼそのまま利用)して調整しました。実際のソースは次のよな感じです。
                    ※まず大前提ですが、<head>要素内で下記設定より先に「jQuery」本体を読み込ませておいてねー!
                    <script>
                    $(window).bind('load',function(){
                    $('.typing').children().andSelf().contents().each(function() {
                    if (this.nodeType == 3) {
                    $(this).replaceWith($(this).text().replace(/(¥S)/g, '<span>$1</span>'));
                    }
                    });
                    $('.typing').append('<span class="cur">_</span>');
                    setInterval(function(){$('.cur').toggle();},400); // 数値を小さくすればカーソルの移動スピードが速く、数値を大きくすれば遅くなりますぞー!
                    $('.typing').css({'opacity':1});
                    for (var i = 0; i <= $('.typing').children().size() - 1; i++) {
                    $('.typing').children('span:eq('+i+')').not('.cur').delay(150*i).fadeIn(50); // ここもdelay( )の数値やfadeIn( )の数値を変更して自分好みの動きに合わせてみよう!
                    };
                    });
                    </script>
                    
                    <p id="site_description" class="typing">Web制作の現場から・・ただいま少し一休み中</p>
                    
                    /*-----------------------------------------------
                    jQueryタイピング風テキスト表示
                    -----------------------------------------------*/
                    .typing {
                    filter:alpha(opacity=0); /* CSS3適用外IE用 */
                    -moz-opacity:0; /* CSS3適用外Firefox用 */
                    opacity:0 /* CSS3適用ブラウザー用 */
                    }
                    .typing span { display:none; float:left}
                    .typing span.cur { display:block}
                    }
                    


                    とまぁ、こんなことが出来たり、ほかにも、コレといった装飾の要らない画像のスライドショーくらいなら「jQuery」単体だけで、プラグインを使わなくでも実現できたりするんです! 何かと便利なプラグインやけど、ややこしい設定でつまづいたりして調べたりしてると、原点回帰じゃないんですが、「jQuery」単体だけでやった方が簡単で楽やん!!しかも軽くなるしー!ってことが今までよくありました。

                    「jQuery」単体でできる表現をいろいろと見様見真似でやっていくうちに、それはそれでまた「jQuery」の奥深さを知るきっかけになったり、iPhoneやiPadで表示できへんFlashの代替手法としての写真を使ったスライドアニメーションを「jQuery」だけでトップページに設置するなんていうことも実現できたりします!→また、機会があればつらつらと書いていきたいと思いますです。
                    0
                       | 技術的なところ | | | pookmark

                      Button of Go to Home

                      Button of Back to Top