動くJavaScript

Time 2020-09-29 20:03:47

Web Name: 動くJavaScript

WebSite: http://oekakirenn.webcrow.jp

ID:64360

Keywords:

JavaScript,

Description:

コロナ禍により、東京で住まいを失う人が相談できる窓口紹介北畠拓也@tkita_sharin・7月22日■【拡散希望】東京にいるけどコロナで仕事がなくなった。現金尽きてネカフェにもいられない。泊まるところがない。こういう状態の方は、公的な支援利用できる可能性あり。民間団体が相談に乗ってくれたり、道が開けることがあります。相談窓口まとめてみました。公的窓口と拡散OKの民間支援団体の相談窓口をまとめます。https://note.com/ddsharinnouta/n/n83863ea29199「死を認めて」が奪う生きたい意欲 舩後靖彦さんの懸念https://twitter.com/asahi_tokyo/status/1286253065507491840■死ぬ権利よりも、生きる権利を守る社会にしていくことが何よりも大切です。どんなに障害が重くても、重篤な病でも、自らの人生を生きたいと思える社会をつくることが、ALSの国会議員としての使命と確信しています。■事件の報道を受けての見解：https://yasuhiko-funago.jp/page-200723-2/（略）報道を受け、インターネット上などで、「自分だったら同じように考える」「安楽死を法的に認めて欲しい」「苦しみながら生かされるのは本当につらいと思う」というような反応が出ていますが、人工呼吸器をつけ、ALSという進行性難病とともに生きている当事者の立場から、強い懸念を抱いております。なぜなら、こうした考え方が、難病患者や重度障害者に「生きたい」と言いにくくさせ、当事者を生きづらくさせる社会的圧力を形成していくことを危惧するからです。私も、ALSを宣告された当初は、出来ないことが段々と増えていき、全介助で生きるということがどうしても受け入れられず、「死にたい、死にたい」と２年もの間、思っていました。しかし、患者同士が支えあうピアサポートなどを通じ、自分の経験が他の患者さんたちの役に立つことを知りました。死に直面して自分の使命を知り、人工呼吸器をつけて生きることを決心したのです。その時、呼吸器装着を選ばなければ、今の私はなかったのです。（略）迦具土涼：池上さん、国の借金ではありません。政府の債務です。国が借りているのは国民の預金ではありません。日銀当座預金です。ウソはいけません。本当は知ってるくせにww2019/11/05 放映のテレ東「ガイアの夜明け」のデタラメ報道ぶりに驚きました。消費税が社会保障に使われているなど真っ赤な大嘘です。日本の大手マスコミは昔も今もアメリカの奴隷です。経団連の株主は外資ですから。日本は小泉、安倍と、アメリカの売国奴だけが政権を握れる国です。そうでなかった田中角栄も小沢一郎も潰されました。マスコミが在日に支配されてるといいますが、そうさせているのはアメリカです。タグもスタイルシートもよくわからなくて、htmlもcssもほとんど解説用のサイトのコピペですませている方。でも、ちょっとだけ画像を動かしてみたい方。マウスを動かすとキラキラ星が降ったり、春には桜、秋には枯葉、冬には雪なんか降らせたり、写真やイラストをスライドショーさせたり、ひらひら蝶々を飛ばしてみたい方。そんなふうに画像を動かすのはJavaScript（ジャバスクリプト）だっていうのはわかったけれど、jQuery(ジェイ・クエリー)って……？ダウンロードとかプラグインとか、jQuery ってわけわからん。コピペじゃだめかな……？ コピペだけで動くJavaScriptはないのか？……、そんなふうに思っている方。そんな方のために、いままで集めたフリーの動くJavaScript（ジャバスクリプト）のサンプルを公開します。スライドショーやマウスストーカー、雪が降ったり泡が上ったり、画像がふわふわ浮いたりするJavaScriptで、インパクトのある楽しいページが作れます。使用可能なら、どうぞお使い下さい。by ディブ・アラジン・千田jQueryは、JavaScriptファイル全部をダウンロードさせてるわけではありません。もしもGoogleがダウンしたらどうするんだろって思う私は、心配性かもしれません。↑↑以上、使いこなせない人間の負け惜しみ★JavaScriptの変数には、グローバル変数とローカル変数がありますたとえば複数のJavaScriptを同じページで動作させる時、同じグローバル変数を使用すると、変数が上書きされて、１個のJavaScriptしか動作しません。そのため同じ場合は、片方のグローバル変数を書き直したりするわけですが、いちいちチェックするのは大変です。解決法の一つに、即時関数を使用して即時関数でJavaScriptを囲むことで、グローバル変数をローカル変数に変更する方法があります。しかし、私がその方法を知ったのはつい最近で、現在少しずつ修正しています。修正済みの分については、他のJavaScriptの邪魔をしたり邪魔をされたりせずに、動作すると思います。もちろん同じグローバル変数以外にも、同じ id を使用すると、JavaScript は動作しません。 それぞれのコーナーごとに、全件修正済みの場合は 全件グローバル変数を削除済み：2016/XX/XX 個別の場合は、メニューのタイトルの前に それぞれのページには、●2016/XX/XX：即時関数で囲んで、グローバル変数を消しました。と記述して、修正済みかどうかがわかるようにしています。 記：2016/01/24「グローバル変数のみの修正分」は量が多いので、最終更新日のコーナーには掲載しません。現在のブラウザのバージョン ＆フォント最小サイズ自分で確認できるブラウザは下記の通りです。これ以上でも以下でも、きちんと見えるかどうかは不明ですが、これらのブラウザなら見えます。（2014年4月現在） ●InternetExplorer 11 ●Chrome 34.0 → 43.0 (2015年6月現在) ●Firefox 28.0 → 38.0 (2015年6月現在) ●Opera 20.0 → 30.0 (2015年6月現在)■FirefoxではGIFアニメが正常に動作しないことがあります。(2014/09/24 付記)■■ChromeとOperaには、「最小フォントサイズ」という設定項目があって、10px未満のフォントサイズは CSS で指定しても表示不能です。CreativeStyle を参考に設定を変更しても6pxまで。(2015/05/25 付記)■■2019/10/04 以降のUP分と修正分は、ブラウザ「Microsoft Edge」でも動作確認済みです。■HTMLのドキュメントタイプHTMLのタグのコピペ（笑）…もとい、記述でサイトを作る時、最初にするのがドキュメント宣言です。なぜだか、上記のブラウザで動いて見えたものが、ドキュメント宣言を変えたことで動かなくなることもよくあります。自分で確認した動くドキュメント宣言は下記の通りです。（2014年2月現在） ● !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ● !DOCTYPE html しかし今回 !DOCTYPE html はHTML5の宣言であり、まだ完全普及でないこともあって、こっちだけ動作しない分に対しては、HTML5と表記して載せてあります。ドキュメント宣言についての説明は、こちらの二つのサイトの説明をどうぞ。TAG indexとHTMLクイックリファレンス。■動作確認のドキュメントタイプは、HTML4ではせず、 !DOCTYPE html のHTML5でのみ行うように変更しました。(2018/09/13 付記)■CSS(スタイルシート)の記述・接頭語(ベンダープレフィックス)についてCSS3を利用するために、-webkit-や -moz-等の接頭語(ベンダープレフィックス)の面倒な記述が必要になり、当サイトでもprefixfree.jsを使用したりアレコレ対応策をやっていました。しかしさすがにもう接頭語(ベンダープレフィックス)は不要だろうというほんっとにはじめての HTML5の記事を発見。これ以後はすっぱりと止め、標準記述のみにします。古いブラウザでは動作しないかもしれませんが、セキュリティの面からもバージョンアップをお勧めします。(2015年6月23日現在)JavaScriptのコピペの方法ソースエリアには２種類あります。『すべて選択』の出し方だけ違いますが、その後は同じです。■ボタンで開閉するソースエリアの場合（新）■ソースエリアの中をどこでも左クリックすると、青いハイライト画面の『すべて選択』になります。 ←これはボタンの見本です。■オレンジ色のソースエリアの場合（旧）■使いたいJavaScriptのページ上に、ソースのエリアがあります。そのソースの中ならどこでもいいので、マウスを置いて右クリック。すると、いろいろ表示がでます。その中の『すべて選択』を選んで左クリック。青いハイライト画面になります。◆◇◆ ブラウザによっては上記↑の方法では『すべて選択』が出ない時があります。その場合は、ソースの上で一度左クリックしてから、キーボードの「Ctrl」と「A」を同時押下して下さい。青いハイライト画面になります。◆◇◆■その後のコピー、貼り付けの方法■青いハイライト画面になったら、右クリックして『コピー』。そのソースを、自分のパソコンのメモ帳に貼り付けます。そのメモ帳に好きなファイル名を付けて、拡張子txtをhtmlに変更して保存。その後、画像ファイル名を自分の画像と変えて、動作するかどうかを確認して下さい。JavaScriptの記述は、 script type="text/javascript" !--から// -- /script までです。この表示は、 /title ～ /head の位置に書かれていたり、 body ～ /body の位置に書かれていたりします。メモ帳から自分のサイトのhtmlにコピペしなおす時には、貼り付ける位置を間違わないこと。位置が違うと、動かない時があります。そして body の中に body onload="●●" とある時は、onload="●●"も必ず記述して下さい。付記：最近では、できるだけ最後の方で記述する方が読み込みが速いとのデータがあります。 もし動作可能なら、最後の方で。 /body 直前で。 特に当サイトでは document.write を多用してます。 この document.write は読み込み完了まで、その記述から以降の読み込みをしません。 だから一番下の /body 直前に配置することで、全体のページ表示が少しでも遅くなるのを防止して下さい。付記：最近(2014/09/29現在)の記述では、 script ～～ /script と記述されることも多いようです。 詳細はHTMLクイックリファレンスから。付記 : 2015/02/05 ボタンクリックで開閉する、大きなテキストエリアで、全ソースを表示するようにしました。付記 : 2015/09/12 開閉式を止め、最初から大きなテキストエリアで表示するようにしました。 JavaScriptを、外部ファイルで指定する方法があります。その外部ファイルを「外部js」といいます。その簡単な作成方法を説明をします。詳しいことは、それぞれご自分で調べて下さい。は不要になります。上記の外側部分を除いた、中身部分だけを記述します。そしてその中身を、拡張子jsで保管します。「●●.js」という形式です。その「外部js」を「html」で呼び出します。「html」の「body」の中に script type="text/javascript" src="●●.js" /script と記述して、JavaScriptを呼び出します。●●の部分は、お好みで名前を付けて下さい。見本として、下記を参考にして下さい。■通常の「html」の中に、全部のJavaScriptを記述した例 → マウスストーカー１-２■文字■虹色のキラキラ星 -2013年版改造■別に「外部js」を作成して、それを「html」で呼び出した例 → マウスストーカー１-２■文字■外部js用虹色のキラキラ星 -2013年版改造外部jsのメリットは、複数の「html」で簡単にJavaScriptを呼び出すことができる点です。そして「html」をアップロードする時は、使用する「外部js」も、必ずアップロードして下さい。（2017/05/16：記）画像の指定方法質問が多かったので、JavaScriptのソースの中での画像の指定方法を説明します。（2016/03/31：記）基本として、var ga=new Array();ga[0]="a.jpg";ga[1]="bb.gif";ga[2]="cc1.png";を簡略化した指定方法が、下記になります。上も下も同じ意味です。var ga=["a.jpg","bb.gif","cc1.png"]; または var ga=['a.jpg','bb.gif','cc1.png'];それでは、画像がhtmlとは別のディレクトリにあったり、別のフォルダーに入っていたりする時の記述方法を説明します。JavaScriptとは無関係に、その画像を表示する時はどうしますか？画像のある場所によって、 img src="a.jpg" とか img src="image/bb.gif" とか img src="../image/hana/cc1.png" とか記述して表示すると思います。JavaScriptでの画像指定も、上記と全く同じです。 img src="●" の赤字の部分を記述をします。var ga=["a.jpg","image/bb.gif","../image/hana/cc1.png"];さて、JavaScriptのソースの中には、下記のように画像指定の下に「myurl」が付いているモノもあります。「var myurl=""; //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分」この項目は、画像指定が簡単にできるように付けたものです。JavaScriptのソースの中で指定する複数の画像が、全部同じディレクトリやフォルダーに入っている時、その共通部分を記述します。たとえば全部の画像が「htmlより上のディレクトリのimageというフォルダー」に入っていたらvar ga=["a.jpg","bb.gif","cc1.png"];var myurl="../image/"; //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分と記述します。もちろんvar ga=["../image/a.jpg","../image/bb.gif","../image/cc1.png"];var myurl=""; //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分と記述してもかまいません。「var myurl="";」を利用しない時は、「var myurl="";」のまま残してください。削除するとエラーになります。どうしても画像のディレクトリの位置がよく把握できない場合は、「http://～～」を使用した絶対位置指定で指定することもできます。var ga=["http://～～/a.jpg","http://～～/bb.gif","http://～～/cc1.png"];その時も、画像の共通部分だけ「var myurl="http://～～/";」に記述し、違う部分だけvar ga=[～～]に記述することもできます。著作権と再配布についてJavaScriptの記述の中には、//の後や、/*と*/の間にコメントが書いてあります。実はこの部分は、JavaScriptを動かすためには全く必要のない部分です。削除しても動きます。しかし！！！この部分には、そのJavaScriptの著作権のある作成者の名前やサイトが書いてあります。英語でようわからんと思っても、英語でアレンジの方法が書いてあったりもします。自分がわからんでも、アレンジ方法を理解できる人もいます。作成者のサイトに行って、もっと素敵なJavaScriptを見つけることも可能です。残念ながら、記載のサイトが閉鎖されてることも多いですが…。中には、著作権のリンク部分を載せるのが必須というモノもあります。苦労して作って下さったJavaScriptです。コメント部分は削除されませんよう。よくわからないうちは、変更するのは、画像部分と色と数値だけにしましょう。でもでも、、私の書いてる★ここからコピペ などの文は、慣れたら消して下さいね！■再配布に付いて■お問い合わせをいただきましたので、再配布に付いて。当サイトの JavaScript は、再配布されてもかまいません。修正、改造なども自由です。ただし、その場合は、JavaScript のソースの中に記述されているオリジナル原本作成者のサイト名等を、削除せずに再配布して下さい。JavaScriptの著作権については、そもそもネットスケープ以外に存在するのか？という疑問もありますが、余人には作成不可能なユニークな素晴らしいJavaScriptを作成された「Kurt Grigg」や「Gerard Ferrandez」のような方もおられます。どうか、オリジナル原本作成サイト名等は記述を残して下さい。説明 ◆Gerard Ferrandez作品について◆当サイトで紹介しているJavaScriptの中に、GF作品と書いてあるモノがあります。これはGerard Ferrandez作品という意味です。Gerard Ferrandezさんのサイトでは、アニメーションのような不思議な作品を、ソースとともに公開されています。ベルギーの方らしいですが、DHTEUMEULEU（URL:http://www.dhteumeuleu.com ★2019年10月4日現在、サイト消滅）という英語サイトです。現在公開されている作品(2014年2月現在)は、ブラウザIEでは、IE11でも見ることはできないので、それ以外のブラウザで御覧下さい。不思議な世界にビックリします。IEでも動作する、この方の古い作品は爺のホームページ（URL:http://www.geocities.jp/kawaida_1167/ ★2019年3月31日付けでサイト消滅）で閲覧できます。しかしこちらのサイトでは、Outlook Expressのメール専用の雛形として使用するためにアレンジされていて、原本そのものではありません。雛形用にアレンジされたものから、普通にサイトで使用できるように私が勝手に改造したものを、当サイトで公開しています。それが、GF作品です。動作がおかしければ、それは原作者のせいでもアレンジされている方のせいでもありません。JavaScriptをよく知らないのに、勝手に改造している私の責任です。でも、とってもユニークで面白い作品なんですよ！説明 ◆全ページ内参考リンク◆各JavaScriptの紹介ページの中に、役に立つ参考サイトのページへのリンクがあります。あのリンクはどこのページにあったっけ？と思うこともあるので、このコーナーでまとめています。うっかりもれているリンクもあるので、随時更新予定。すたら日記 各ブラウザのバージョンごとの、JavaScriptによる、bodyのwidthとheightとtopとleftの値の指定方法の説明。ただこのサイトの結論は、HTML5ではそのまま使用できません。0から目指すWebマスター 上記では記述の無かったoffsetTopとoffsetHeightの説明。ホームページの素 上記関連でオブジェクトの位置と大きさの取得説明。かえラボ JavaScriptで画面サイズを取得するプロパティの、それぞれの違い。数値表示がしてあるので、把握しやすいです。2010年10月25日の記事。いろいろ備忘録 要素サイズの横幅と高さのoffsetWidthとoffsetHeight、clientWidthとclientHeight、scrollWidthとscrollHeightの違いの説明。MDN 悩みまくった「clientTop 」とは何か？…の回答。「borderの幅」ですってさ。目が点になりました。おかげで範囲指定ができるようになりましたけど（笑）Seamew（シーミュー） 大きめのサイズの写真や画像を、縦横がつながったシームレス素材に加工できるフリーソフト。ダウンロードサイトVectorのページです。彩々畑 小さなシームレス(継ぎ目無し)の背景画像を作成できるフリーソフト。ファビコン(拡張子ico)やマウスカーソル(拡張子cur)も作成可能です。CSS Lecture CSSでの、background-size以外のbackgroundプロパティについてのまとめ。サンプル付きで位置等の指定方法を解説。ただブラウザIE6対応については、もう不要だと思います。PurpleEyes 背景画像の位置指定だけの、CSSの記述見本ページ。HTMLクイックリファレンス 背景画像を自由なサイズで指定できる、background-sizeプロパティの説明。WebCreator Note CSS3から一つのCSSで複数の背景画像が設定可能になりました。その設定方法の説明。HTMLクイックリファレンス CSSで背景色だけを透過する指定方法の説明。背景画像の上に記述した文章の背景色に使用すると、背景画像が薄く透けて見えます。ほんっとにはじめてのHTML5 CSSで作成する、円形グラデーションの指定方法。2014年9月2日現在使用可能。to-R CSS3グラデーションの指定方法を対応ブラウザごとに説明。2014年9月2日現在使用可能。BINARY CSS3での線形グラデーションの作成方法を、詳しく説明。MDN CSSのグラデーションの詳細なサンプル見本。atmarkIT 「5分でわかるCSS3のグラフィックス機能」サンプル。CSSの影やグラデーション、アニメーションのサンプル集。動くJavaScript 当サイトのページの下に、文字に影を付けるCSSのtext-shadowの見本の参考サイトへのリンクが３個有り。ホームページを小粋に 文字や画像を流れるようにするmarquee(マーキー)タグはIE独自のタグですが、いまのところ(2014年9月現在)他ブラウザでもたいてい見られるので使用。その説明ページです。――しかしHTML5からは非推奨（廃止予定？）タグ。逆にCSSでの指定ではIE以外のブラウザで動作するという、ほんとうは???なタグ。そのあたりは留意が必要。遊びで使用するなら、問題ないと思います。TAG index インラインフレーム(iframe)でのリンクのターゲットの指定方法の解説。親と子の関係がわかりやすいです。ほんっとにはじめてのHTML5 HTML5でのインラインフレームの解説です。新しいタグ、廃止されたタグ、対応ブラウザ等。JavaScript超初心者によるJavaScript入門 JavaScriptの変数の説明。JavaC JavaScriptに関する初心者～中級者向けのFAQを兼ねた基礎知識集。古いですが、"(ダブルクォート)と'(シングルクォート)の違いや、複数のonload記述方法とか、役立ちます。とほほのWWW入門 JavaScriptで使用する「"(ダブルクォート)」と「'(シングルクォート)」の「\」との併用方法。AIDREAM 上記以外の、JavaScriptの複数のonload記述方法。MDN getElementByIdとgetElementsByClassNameの、併用した記述方法。Ajaxを勉強しよう(openspc2) JavaScriptでは、なぜbgcolorではなくbackground-colorを使用した方がいいのかの解説と、JavaScriptでCSSのタグを記述する方法。デザイン五輪書 画像の中央寄せの説明。うまくいかない時の原因が詳しい。BarktoImagine なかなか難しい画像や複数テキストの水平垂直中央配置の、CSS指定方法をパターン別に解説。バシャログ。 絶対位置指定(position: absolute;)での左右上下中央配置の、とても簡単な方法。幅を２等分とかしなくてもできます。AllAbout 画像上の自由な位置に、他の画像や文字を重ねる方法です。tableを使わずに、CSSの位置指定で実現。TAG index HTML5で廃止された要素一覧と属性一覧です。廃止要素の動作保障について、HTML5はユーザーエージェントに対してはサポートし続けることを要求しているそうです。参考:HTML5 differences from HTML4 TAG index カーソルの種類の説明と、オリジナルカーソルのCSSでの設定法。PC全体の変更設定ではありません。creative memomemo alt属性とtitle属性の違いについての説明。HOW TO みんなのビジネスオンライン 自分のサイトにGoogleの検索窓やYAHOOの検索窓を付ける方法。ネット検索だけと、自分のサイト内検索も併用できる方法と、各２通り。Codaholic jQueryのプラグイン等を使用せずに作成した、ドラッグ可能な要素のJavaScript。マウスドラッグによるオブジェクト移動のサンプル 元は着せ替え人形用のJavaScriptですが、複数画像のドラッグ移動に使用。KAYAC DESIGNER'S BLOG CSSで絵を描く方法。■●▲×の基本的な描き方。SRE BLOG CSSで絵を描く方法。:before / :after擬似要素、グラデーション、要素を回転させるtransform: rotate()、box-shadowの説明。Taneppa!たねっぱ！ CSSの display:inline、display:block、display:inline-block のそれぞれの特徴のわかりやすい説明。要素を縦並び、横並びさせる時に役立ちます。delaymania 上記display:inline-blockを使って横並びさせる時に発生する隙間を、なくす方法。delaymania 要素を横並びさせるのに、display:inline-block よりもさらに使いやすいという、display:tableの説明。CodeGrid display:table の活用。その特性の解説。WEBLOG display:table-cellは、display:tableと同時使用ではなく、display: blockとも組み合わせ可能という、メリットの解説。クリエイターボックス CSSを一行プラスするだけで横並びにできる display: flex の解説。display:tableよりも簡単にいろいろなレイアウト可能で、ブラウザIEは11から正式対応。MDN box-sizingの解説と対応ブラウザの実装状況。ボーダーやパッディングやマージンの幅を考えなくていい、便利なCSSです。coliss フォントのサイズの単位に何を使うか、それぞれの解説と、新単位remの解説。YAHOO!知恵袋 document.getElementByIdを省略しても動作するけど、省略してはダメですかという質問に対する回答。私はHTML5が仕様を認めたのなら省略してもいいと思うのですが、グローバル変数をまき散らすからダメだそう。動作しない時だけdocument.getElementByIdを使えばいいのでは…？ 例に出してあるinnerHTMLとかalertとか topとかハイフンありの ID とか。OK Wave グローバル変数を使わない方がいい理由。複数のスクリプトの変数が同じ場合、動作しなくなる……のはわかるんだけど。ううむ。AjaxTower JavaScriptで配列した要素をさらに配列する、多次元配列をわかりやすく説明。＠IT 表形式の２次元配列に連番を付ける方法。人力検索はてな JavaScriptでidではなくclassを指定する方法。いろいろな指定例があります。YAHOO知恵袋 JavaScriptでclass指定の、１個指定と全部指定の方法。NEVER★EVER JavaScriptでtableの行を消したり出したりする方法。t87r divはドラッグ移動できるのに、divの中のimgはうまくドラッグ移動できない。その原因説明と対処法として、Javascriptで特定の要素のクリック・マウス関連イベントをごっそり無効にする方法。point of view point textarea（テキストエリア）を全ブラウザで『すべて選択』にする、簡単な方法。ysklog textarea（テキストエリア）以外を『すべて選択』にする方法。time_reapのブログ 置換（replace）で改行する場合、文章に「置換前の文字」を代入しなくてもできる方法。テキストエリア用。AllAbout JavaScriptで１回クリックすると無効になるボタンを作成する方法。ガチムチの杜 テキストをHTMLに変換する方式。いろいろ応用して簡易エディタっぽくできるJavaScript。MDN CSSの transition のプロパティは、接頭辞なしで使用可になったという 2014/02/07 時の記事。Webpark CSSのtransitionの指定方法を、サンプル表示でわかりやすく解説。HTMLクイックリファレンス CSSのtransformプロパティの値に、transform関数を指定することで、 要素にマトリクス変形、移動、縮尺、回転、傾斜などの変形が適用可。このページからそれぞれの解説ページへ。transformで、何ができるのかがわかります。9ineBB box-sizing:border-box; を使用せずに、枠線（border）を領域（div）の内側に引く簡単な方法と img の内側に影を指定する方法。動くJavaScript セルの隙間を消したtableに角丸指定をする方法。border-collapse:collapse;は使用せず、border-spacing:0px;で隙間を消せば、tableの角丸指定が有効になる。当サイトの見本。Webクリエイターボックス テキスト周りで使えるCSSの小技いろいろの紹介。3.長いテキストを「…」で省略する とか、9.長いURLを途中で折返すとか、知らないCSSがいっぱい。Webクリエイターボックス かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技。スライドパネルとかアコーディオンメニューとか、いろいろあります。CreativeStyle ブラウザ Google Chrome には「最小フォントサイズ」という設定項目があって、10px未満のフォントサイズは CSS で指定しても表示不能という説明。設定変更方法も掲載されてますが、6pxまでしか小さくできないし、閲覧者の設定を変更できるわけでもありません。調べたら Opera も同様設定。MSDN JavaScriptのソース中に時々見かける @cc_on の説明。IE11ではサポートされていないということで、最新ブラウザでは不要だと思います。CSS3 Patterns Gallery CSSのみで作成する様々な形状の模様パターンを紹介する英語サイト。模様をクリックすると、CSSの記述が表示されます。BlackFragで日本語説明有り。coliss こちらも画像を使用せずに、背景をストライプやチェック柄にするCSSの紹介。JavaScriptスタイルシートサンプル集 CSSでの角丸指定の詳細な解説。サンプルが載っているのでわかりやすいです。Web’Notes CSSのボックス要素に影を付けることができる box-shadow のサンプル付きの記述解説。わかりやすいです。せかいや HTML4では問題ない。でもHTML5でdivではなくbodyに背景グラデーションを入れようとすると、要素が無いと画面全面にグラデが入らない。その解決方法は、CSSで「html{height:100%;}」と記述すること。――悩んでいたので助かりました！→別の方法として、background-attachment:fixed;指定をいれても解決しました。サルワカ CSSのグラデーション（linear-gradient）の使い方を総まとめ！ 2018/12/14日付分。あちゃー、私、相当間違っていました。修正が…大変だ。ほんっとにはじめての HTML5 CSS3を各ブラウザで対応させるための「ベンダープレフィックス」についての説明。2015年2月に「最新ブラウザではほとんどサポートするようになったので不要では」の追記有り。ヨッセンス CSSの擬似要素「before」「after」の基本から使い方までを徹底紹介!! ユーモアにあふれてて、とてもわかりやすいサイトです。小粋空間 :target擬似クラスはCSS3で追加されたセレクタです。実例付きでわかりやすい説明。W3G CSS のスタイルを適用する対象であるセレクタ（selector）の記述説明。基本的なことが大事です。body > p{～} とか h1 + h2 {～} の意味がよくわかりました。WP-E 上記のさらに詳しいCSS3のセレクタ全42種 まとめておさらい使い方リファレンス。サンプル付き。bitWave 「document.writeがイベントタイミングによって挙動が違う」という 2015年3月9日付けの記事。「onloadの前はいいが後はダメ」だそうで、innerHTMLに修正した方がいいのかな…。document.createElement だけは使用する気はないですが。YAHOO!知恵袋 position:absoluteで値が指定されていない時は「0」ではなく「auto」になるという説明。ずっと「0」だと信じていました。positionはわかったようでいて、わかっていない…。範囲指定の時、よく使うのに。Cappee Design 「1つの要素にCSSだけで二重ボーダーをつける3つの方法」の中に、borderとoutlineを利用する方法あり。「降る上る」の範囲指定に便利。にししふぁくとりー 上記 outline の説明。レイアウトに影響しない、角丸ができない等、borderとの比較が詳しい。YAHOO!知恵袋 JavaScriptの i++と++i の違いについての説明。同じことだと思っていたので、これはビックリでした。「++i」と記述してある原本を、勝手に「i++」と改造したJavaScriptがあります。直さねば！ だから原本は大事です。しかしその動作上の違いというのが、私の頭ではよくわからなかった…（泣）2015/11/05現在PHP & JavaScript Room font の一括指定の方法。フォントの書体を指定する font-family について、フォント名で指定したフォントが全てユーザーのPCにインストールされていない場合に備えて、「一般フォント名」指定が必要とのこと。「一般フォント名って何ですかぁ？」というレベルの自分の無知さが恥ずかしい。 たねっぱ！ margin を使用して右寄せする方法の、わかりやすい説明。もっと専門的な説明は KOJIKA17 から。Qiita margin,border,background 等を一括指定する時は、入力しなかったプロパティには勝手に初期値を補完してくれます。その初期値の指定はどうなっているのかの、説明。基本を知らないと応用できないから大切なことです。eWeb JavaScript の演算子のとても見やすい説明。「=」「++」「x+=y」のような算数に似ているけど微妙に違う演算子や「x&&y ： xかつy」「x||y ： xまたはy」「x!y ： xはyではない」等、演算子の意味がわかります。 2018年10月3日現在、サイト消滅。忘れがちなJavaScriptの基礎中の基礎 JavaScriptの体系的なレファレンス。サンプル付きのわかりやすいまとめ。WebProgrammingPrimer あまりに初歩的な自分の勘違いにビックリ。setTimeoutの正しい記述方法は「setTimeout(hoge, 3000);」。ずっと「setTimeout("hoge()", 3000);」と思ってました（←しかもこの記述方法だと、即時関数が機能しない。2016/01/14★）。そしてreturn文の使い方のページで「JavaScriptでは『;』が省略できる」という一文を発見。そんなソースを見つけて、記述ミスだと思い込んでいました。このサイトは時間のある時熟読する予定。いろいろと自分の勘違いを発見できそうです。TAG index 「target="_blank"」等の「target属性」は使用しない方がいいという説明。インラインフレームで使用する以外は、サイト訪問者に強制的な方向付けは止める方がいいということで、JavaScriptのリンク指定のソースで、どうしようかと悩んでいたのがウソのよう。当サイト内も削除せねば。2015/12/22現在affiliate.ks-product Firefox（とSafari）でブラウザバック（戻るボタン）を押した際、前のページの画面効果残っている件ついてを解説とその防止策。「タブ切替」の JavaScriptで同じ現象が起きて悩んでいたのが、すっきり解決。affiliate.ks-product プログラムの実行のタイミングについて、window.onloadは、「画像を含めた全てのコンテンツを読み込んだ後に実行される」とありました。それはスライドショーでの画像のプリロード記述は不要という意味なのか、まだ不明。←１番目の画像のみ読み込むのでプリロードは必要らしい。rcmdnk's blog window.onloadとjQueryの$(document).ready等の比較。jQueryを使用しなくても、jQueryと似たようなプログラムの読み込み方法があるという2015年11月の記述。三等兵 即時関数「(function(){...})()」がなぜ、括弧お化けなのかの、わかりやすくも面白い解説。「(function(){...}())」という記述でもいいそうです。ANALOGIC（アナロジック） 即時関数のメリットと主な用途として、具体的に記述の変更方法を解説。グローバル変数だと複数のJavaScriptを動作させるのに変数がぶつかることがあるので、即時関数はグローバル変数を無くすための有効手段です。IT-Walker on hatena HTML5のscript要素でasync, deferを使ってパフォーマンスアップ。HTML5になってからの、DTD、METAタグのcharset指定、type属性、script要素のasync,defer属性の書き方など。でも自分がなかなか省略形を使用する踏ん切りが付かないのは、古いソースをコピペすることが多いからでしょうか。POSTD 上記 async, defer 使用時の注意点。JavaScriptの読み込みにおける非同期スクリプト注入の悪影響もあるそうです。Qiita 「width:100%;」は画面横幅一杯になるのに、「height:100%:」の要素が画面の高さ100%にならない場合の対応方法です。htmlとbodyにも「height:100%:」指定をすればいいとのこと。バシャログ JavaScriptでいつも書いてるな～という処理や、知っていると便利なTipsを簡潔に集めた抜粋。自分の方法と違うものもあるので、後で勉強せねば。NxWorld jQueryでの画像や要素をランダム出力する方法の備忘録。JavaScriptのランダムがうまく動作しなかったので、参考にしたい。WebProgrammingPrimer CSSセレクタの記法で要素取得も可能な『document.querySelector()』と『document.querySelectorAll()』の解説。処理速度が遅く、ブラウザIE8では使用不可とかありますが、便利そうです。DQNEO起業日記 jQueryのeachを使うと、要素１個ずつに対して順繰りに処理を行うことができます。そのjQueryのeachの仕組みを徹底的にわかりやすく解説。jQueryは使わず、自分でeachを実装する方法も公開。Qiita JavaScript Array.forEachとjQuery.eachの違いの解説。inamenaiの日記 elements=document.getElementsByTagName("p")のelementsは、prototype.jsの$$("p")やjQueryの$("p")では配列のように扱えるのに、JavaScriptでは不可。elements.splice(i,1);が動作しない。そのelementsを普通の配列に置き換える方法。おかげでランダム表示ができました！ 感謝！Qiita JavaScriptの配列である、Arrayの基本的な使い方をまとめ。主な内容としては、要素の追加、結合、取得、削除。見やすいです。OpenSpace 2006.1.17の古い記述ですが、ブラウザごとのマウスの座標の取得の違いの説明です。最新ブラウザでは該当しない記述ですが、古いJavaScriptの改造に役立ちます。三等兵 JavaScriptにおけるマウスなどの座標を取得するプロパティのそれぞれの違いの説明。「event.clientX」 はCSSでいう固定位置（fixed）みたいな取得。「event.pageX」はスクロール分も合計した数値で、CSSでいう絶対位置（absolute）みたいな取得――と理解しました。最新ブラウザでは「event.pageX」（当サイトでは、e.pageX）で問題無し。KOJIKA17 CSSのmarginの詳しい説明。図解付きなのでわかりやすい。Qiita 子要素の上下marginが効かなかったり親要素marginに影響するのは困るので、阻止する方法。overflow:hiddenとの関係がわかりました。Qiita 旧石器時代のJavaScriptを現代的なJavaScriptに書き替える方法です。「window.onload」は、やはり使用しない方がいいらしい。即時関数で囲めばいいと思っていたのですが、囲んでも上書きしてしまいます。しかし現代版は、なんでこうも記述が面倒なのか。「window.addEventListener～～」を使用しなくても、「a();b();」で上書きせずに動作するけどダメなの？document.writeは遅いから使用するなっても、いくら画面表示が速くてもマウスが使用できなきゃ意味無いっしょ。画面がフリーズしたと勘違いして、何度PCの電源を切ったことか…。とか聞いてみたいことが山ほど。でも自分の無知を晒して笑われそうなので聞けません。もっと勉強しなきゃですね。Qiita 即時関数を使用した時の「マウスのオンクリック（onclick）」の指定方法。サムネイルスライドショー使用時にとても役に立ちました。yanor JavaScriptの記述方法の解説。初心者の私には難しいです。「onclickで割り当てるハンドラ関数に引数を渡す」記述方法が、上記と少し違います。Qiita 著者のCam Songさんの「jQueryは必要ない（You Don't Need jQuery）」の日本語訳（2016/04/12：現在）です。「jQuery」の記述方法を普通のJavaScriptではどう記述するのかの参考になります。STAND4U CSS3で複数の背景画像指定して重ねる方法。複数枚の背景画像を指定した時の、background-positionやbackground-repeatやbackground-sizeの指定方法。グラデーション背景との組み合わせも有り。HTMLタグボード 文字のエンコードを指定する見本有り。これが正しくないと文字化けします。当サイトでは昔から『Shift-JIS』を使用していますが、現代の主流は『UTF-8』です。下記はCSSサイト--------------------------------------------------------------------------mCPブログ 基礎から学ぶCSS3で作るギミック、アニメーション transform transition animation編。説明口調が漫画チックで、面白くてわかりやすいです。mCPブログ-魚拓 上記ページが消滅していたので魚拓保存。魚拓なので画像は動作しないので記述のみ参考。Lopan.jp 上記よりも詳細な、サンプル付きのtransitionプロパティとanimationプロパティの解説。具体的なので勉強になります。AllAbout 条件に外れた場合だけ装飾するCSS3「:not()」の使い方の説明。「.クラス名:not(:hover)」で、マウスオーバー時に動作を停止することができます。mororeco 「CSSのみで星の輝く夜空を背景にする方法」という 2014年6月26日付けの記事。でも画像を使用するので、画像だけ参考にしてJavaScriptで作成してみました。→全背景と部分の複数移動iwb.jp 意外と知られていないCSSの色々な回転アニメーションの作成方法。CSSアニメーションの記述と画像見本があるのでわかりやすいです。CMANインターネットサービス ホームページのパーツ作成のコーナーにCSSで作成するアニメーションのメニュー有り。

TAGS:JavaScript 

<<< Thank you for your visit >>>

マウスでも自動でも画像が動くJavaScript

Hot Websites