マンガで分かる JavaScriptプログラミング講座
はじめに 「マンガでわかるJavaScript」は、難しそうに思えるプログラムを、簡単そうに見えるマンガで解説するという初心者向けの入門講座です。 架空の高校生たちに教える形式で、プログラムの基礎から応用を、解説していきます。一通りのマンガを読めば、かなり実践的なところまで、プログラムを書けるようにしていきます。 （マンガは、左上から右下へと読みます） プログラムというと、けっこう大変そうに思えますが、この講座のテーマは「面倒くさいことを楽にする」です。面倒臭がりで、手抜き大好きの女子高生を主人公にして、楽しくプログラムを学んでいくことにします。 主な対象読者は「これからプログラムを学んでみたい人」「Webの世界に関わっていてJavaScriptを学んでみたい人」「昔JavaScriptを触っていたけど最新のトレンドが分からないので改めて学んでみたい人」などです。初心者だけでなく、Webデ
JavaScript Primer - 迷わないための入門書 #jsprimer
JavaScript Primer 迷わないための入門書 Tweet Watch Star Xのハッシュタグ: #jsprimer これからJavaScriptを学びたい人が、ECMAScript 2015以降をベースにして一からJavaScriptを学べる書籍です。 プログラミングをやったことはあるが、今のJavaScriptがよくわからないという人が、 今のJavaScriptアプリケーションを読み書きできるように書かれています。 初めてのプログラミング言語としてJavaScriptを学ぶ人は、まずは「はじめに」から読んでみてください。 JavaScript Primerを読み始める 書籍版 このウェブサイトの内容はアスキードワンゴから書籍として出版されています。 書籍版の内容はウェブサイト版と同一ですが、本として読めるように最適化されています。 書籍版は次のサイトから購入できます。
読んだ内容まとめてLT会「インクルーシブHTML+CSS&JavaScript」
2018.10.11の「読んだ内容まとめてLT会」の発表資料です。
JavaScript（ジャバスクリプト）とは
姉妹サイト Woman玉手箱（08.03.03-OPEN） 全ての女性を応援します。 HAPPYサイト-Woman玉手箱。 WEB・デザイン制作 WEB制作を作成しております。 詳細はこちらを御覧下さい。 お問い合わせ・ご質問 お問い合わせやご質問等は こちらからお気軽にご連絡下さい。 ご掲載・リンク希望者様へ ご掲載やリンクをご希望の方は、こちらからご連絡下さい。 JavaScript（ジャバスクリプト）とは WEB（ホーム）ページを作成する上で、主に使用するのは、下図の3つです。 「HTML」ではWEBページの「構造」を、「CSS」ではWEBページの「デザイン」を、「JavaScript」ではWEBページの 「動き」を作ります。 このページでは、JavaScript（ジャバスクリプト）について解説いたします。 ＞ HTML （エイチティーエムエル）についての詳細を知りたい方はこちら・・
WordPress：ページや記事ごとに個別のCSSやJavaScriptを追加する方法 - NxWorld
WordPressでページや記事ごとに個別のCSSやJavaScriptを追加したいときに役立つカスタマイズを紹介します。 他のページでも使うような共通のスタイルだったり、かなり長くなってしまうような場合はもちろん外部で読み込む方が良いと思いますが、何かちょっとしたスタイルを指定するぐらいであれば結構便利なカスタマイズだと思います。 （例えば特定のページのみ文字の色を赤にするとか、強調したいから太字指定するとか...） 以下で紹介する方法はfunctions.phpを使用しますので、テーマ内にない場合は作成してください。 CSSを追加できるようにする CSSを追加できるようにする場合は、下記をfunctions.phpに記述します。 //Custom CSS Widget add_action( 'admin_menu', 'custom_css_hooks' ); add_action(
初心者脱却！JavaScriptおすすめ学習本中級、上級厳選5冊 | 侍エンジニアブログ
こんにちは！侍ブログ編集部（@samuraijuku）です。プログラミング学習者にとって、「今の自分に合ったレベルの学習書籍」を探し出すのって意外と面倒で、難しかったりしますよね。 すでにある程度使いこなせるけど実務の上でもう一歩ステップしたいというのに、本当に基礎的な説明で知りたいことが説明されてなくて役に立たないなんてこともあります。 そこで今回は、「JavaScript」の学習本を「中級者」「上級者」でレベル分けし、それぞれのレベルに応じたオススメ書籍をご紹介します。
【JavaScript】（基礎）親要素・子要素の取得・追加まとめ③ | unitopi - ユニトピ -
こんにちは！ unitopi新米ライターの、ケインでございます。 このシリーズも最終回。今回も、JavaScriptにおいて基本的だけど忘れがちな、JavaScript（jQuery）における「親要素・子要素の取得・追加（削除）」について、今回は「要素の追加と削除」のお話をさせていただきます！ ちなみに今回は、説明の仕方がこれまでの２回と異なるアプローチになっているので、その点ご承知おきください！（※なぜなら紹介する量が多そうだからです…） ※サンプルコードは、「JS」タブや「HTML」タブなどを交互に見ていってくださいね！ ※このシリーズのこれまでの記事は「その①」及びその②になります。まだご覧になっていない方で、合わせて勉強したい方はぜひご覧くださいね！ 【JavaScriptの場合】 jQueryに比べると少ないですが、それなりに表現方法の数がありますので、どんなものがあるか、一覧を
手軽に実装！Webサイトにアニメーションを加えられるCSS＆JavaScriptライブラリー
手軽に実装！Webサイトにアニメーションを加えられるCSS＆JavaScriptライブラリー人間の目は動きを感知すると反射的に目が動き、意識をそちらに向けるそうです。そのため、アニメーションは要素をほんの少し動かすだけで注目を集められるという強い力を持っています。今回はそんなアニメーションを手軽に実装できるCSSやJavaScriptのライブラリーをいくつか紹介します。 アニメーションを使う時に気をつけたい事アニメーションを使えば、前後の画面に繋がりを持たせたり、ユーザーに次の動きを予測させ、安心感を与えることができます。よく使われるものが、ふんわりと画面や要素を移り変えるフェードという効果です。目の前の物が一瞬で消え、パッと新しい物が現れる…なんて、現実世界ではありえませんよね。もちろん、単純に見ていて楽しい、かっこいい、なんていう刺激を与えられます。 しかし、ユーザーの注意をひこうとす
[JS]最近のウェブサイトで見かける面白い仕掛けを実装するスクリプトのまとめ
fullPage.js ポートフォリオや企業のプロモーションでもよく見かける1ページで構成されたサイトで、フルスクリーンの垂直スクロール、そして水平のスライドにも対応したウェブサイトを作るためのスクリプト。 こういう作りは特にタブレットで操作がしやすいですね。 FancyScroll.js スマフォやタブレットのようにページの終わりまでスクロールした際にバウンドするのをはじめ、ちょっと面白いさまざまなエフェクトをスクロールに与えるスクリプト。
スマフォだと電話リンクになるhtml | スマタブファイブ
ページ内に書かれた電話番号を、スマフォでの閲覧時には電話リンクにして、スマフォ以外だったら電話リンクしない・・・という機能を、非常に簡単ではありますがJSで書いてみました。 <!DOCTYPE HTML> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=EUC-JP”> <title>電話テスト</title> </head> <body> <script type=”text/javascript”> function smtel(telno){ if((navigator.userAgent.indexOf(‘iPhone’) > 0 ) || navigator.userAgent.indexOf(‘Android’) > 0 ){ document.write(‘<a
HTML5でテキストのシャッフル演出ができるJSライブラリ「ShuffleText.js」 | ClockMaker Blog
Flashでよく見かけるテキストシャッフル演出(文字列がランダムで切り替わる演出、正しい呼び名はわかりませんｗ)をHTML5で作ってみました。HTMLのタグ(pタグとか)に使うバージョンと、HTML5の新要素Canvasを使うバージョンの二種類を用意しました。 【2017年4月26日 追記】 【重要】JSライブラリーはGitHubで更新しています。使用したい方は次のGitHubのリポジトリを御覧ください。 Canvas版はCreateJS 2015年版でも動作するよう更新しました。 デモ demo (HTMLエレメント版) demo (Canvas版) ソースコードはMITライセンスで公開してしますので、個人・商用問わずご自由にお使いください。 ShuffleText.js (HTMLエレメント版) ShuffleEaselText.js (Canvas版) それでは以下で使い方を紹介して
div要素をリンクに変えるjavascript 『jquery.biggerlink』
こんにちは、デザイナーの川本です。 今回は、aタグを設定した親要素にもaタグとhover要素を設定する『jquery.biggerlink』というjavascriptを紹介します。 方法は、javascriptを導入し、div要素にid名を追加するだけです。 Biggerlinkのダウンロードはこちら jQueryのダウンロードはこちら まず、内にダウンロードした必要なjavascriptの場所を記述します。 あとはhtml内のdiv要素にid名を追加します。
scottjehl/Respond: A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)
Some notes to keep in mind: This script's focus is purposely very narrow: only min-width and max-width media queries and all media types (screen, print, etc) are translated to non-supporting browsers. I wanted to keep things simple for filesize, maintenance, and performance, so I've intentionally limited support to queries that are essential to building a (mobile-first) responsive design. In the f
パララックスサイトの作り方の初歩
最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー
JSタブ切替え応用編 —他ページから直接タブにアクセスする— - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 他ページからそれぞれのタブにリンクすることってできますか？ —タブ切替をサクッと実装, くりはらさんのコメント 確かに便利そうなので、やってみました。ページ内リンクと同じように「なんたら.html#Contents」とかってURLでアクセスできます。意外と簡単～。サンプルは以下の画像から。 考え方 tab.dive = function(){ var hash = window.location.hash; hash = hash.split("?"); hash = hash[0].split("#"); if(hash[1] == 'page2') tab.sho
スマートフォン（iPhone/Android）のページ内振り分け - JavaScriptテックラボ - [SMART]
ページ内でスマートフォンかどうかを判別し、表示を切り替えたい場合のスクリプトを紹介します。 JavaScriptでiPhone、Androidを識別してそれぞれの端末へメッセージを表示には、ユーザエージェントを使います。 navigator.userAgent で取得したユーザエージェント情報から「iPhone」という文字が合った場合の処理をする場合は、 indexOf を使って以下のようにします。 /* iPhoneという文字が見つかった場合 */ if ( navigator.userAgent.indexOf('iPhone') > 0 ){ } indexOf()メソッドは、指定したキーワードの発見位置を返します。発見できなければ-1の数値を返すので、値が0より上であればキーワードが発見できたと分かります。 iPhone/iPad/iPod/Android毎に処理を分けるには次のよ
![スマートフォン（iPhone/Android）のページ内振り分け - JavaScriptテックラボ - [SMART]](https://cdn-ak-scissors.b.st-hatena.com/image/square/65c6bca6dac61f3d6c28d2414c8e9796815cfbae/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Frfs.jp%2Fwp-content%2Fthemes%2Fsmart%2Fogpimage.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://blog.mismithportfolio.com/web/20150826ios841failure
Flash使いのためのAdobe Animate CC でCanvas作成 JavaScript記述の備忘録 - Qiita
GitHub - js-cookie/js-cookie: A simple, lightweight JavaScript API for handling browser cookies
株式会社ルート・シー | webサイト制作 | マーケティング×UXで「ヒト」から答えを見つけ出す。
