ものづくり筆耕ものづくり筆耕ものづくりを楽しむ。皇帝ダリアの栽培からオリジナルシステムの構築まで。当ブログの近頃の記事で秋の七草を取り上げています。今回も下から上にスクロールする画像を載せています。そこで万葉集から秋の七草を参照します。万葉集に山上憶良の「秋の七草にまつわる歌」を2首、掲載されています。最後の七草に朝顔を取り上げていますが、今では桔梗を挙げる場合が多いようです。薄(ススキ)は別名の尾花(オバナ)と表現されています。栄枯盛衰いつの世も栄枯盛衰は付いて回ります。未来永劫に一人勝ちはあり得ません。勝ち続けると慢心が生まれます。放ておいてもトップ交代は起きます。この辺りを平家物語が突いています。平清盛は武家政権を確立したことで、歴史的にはもっと評価されて然るべきなのに低いのは平家物語の冒頭の文言がその理由でしょうか。画像や文字をスクロールする機能であるmarqueeの歴史は深く、利用度も高いのに鬼っ子的な扱いは気の毒です。HTML5の正式な仕様からも排除され、低評価です。何か平清盛に似ているように感じられます。テコ入れ正式仕様から外されてもすぐに使えなくなるわけではありませんが、いずれ問題は起きそうです。<markquee>〇〇〇〇</marquee>とするだけで左にスクロールする機能は重宝です。これに代替する先進的なテクニックはまだ見ていません。そこでマーキー要素(marqueeタグ)を使わずに、全ブラウザ対応を目指してCSSだけでスクロール機能を実装してマーキーをテコ入れしました。前回の《秋の七草と赤とんぼ》で多用した<marquee>要素はひとつも使っていません。JavaScriptライブラリのデファクトスタンダード管理機関からjQueryライブラリとgithubからダウンロードしたjquery.marquee.jsを利用しています。実装方法1ソフトウェア開発プロジェクトのためのソースコード管理サービスを司るgithubからプラグインソースコード一式jQuery.Marquee-master.zipをダウンロードします。2jQuery.Marquee.jsをインクルードする前に、新しいjquery.min.jsをインクルードします。公開サーバーのアドレスにリンクします。3jQuery.Marquee.jsを自分のフォルダに確保し、ソースコードを参照できるようにインクルード指定します。自分のローカルアドレス、または自分のリモートサーバーアドレスにリンクします。JS)からひな形のソースコードを作ります。5スクロールするコードが確認できれば、実装の玄関口にたどり着いたことになります。タイニー版マーキーコードと実行例タイニー版コード上で示したgithubのサイトからHTML,CSS,JSを一つのファイルにまとめてあります。jquery.marquee.min.jsのファイルは適切な場所に格納し、正しいアドレスを設定します。worldおわりに下から上にスクロールする画像を載せる予定でしたが、都合により次回にしたいと思います。前回の「秋の七草と赤とんぼ」はChromeでしか、思ったような動作になりませんでした。今回の方式に焼き直してこそ、鬼っ子「marquee」へのアシスタントと言えるので宿題ということになります。コメントをキャンセル下記項目は必須ですがメールアドレスは公開されません。名前はニックネームをお使いください。コメント名前メールアドレス上に表示された文字を入力してください。コメントデータの処理方法の詳細はこちらをご覧ください。