レスポンシブWebデザインの実装

HTML5 マークアップはHTML5でおこなう IE8以前のバージョンは、対象外とします viewport それぞれのデバイス幅にあわせた表示を可能にする記述 <meta name="viewport" content="width=device-width, initial-scale=1.0"> width=device-width デバイスの表示領域の幅を指定しますこれを指定することで、デフォルトの状態で自動的に縮</meta>…

2016-08-30

プログラミング教育のMOZER | Webデザイン学習コース体験版

デイジーと秘密のメッセージ mozer.io

2016-08-28

Slider

SLIDERJS SlidesJS 3.0 <html lang="ja"> <head> <meta charset="utf-8"> <title>SlidesJS Standard Code Example</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/example.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> <style> body {…</link></link></meta></meta></head></html>

2016-08-27

フィルタリング

フィルタリング特定の要素のみまたは組み合わせで、該当するもののみを表示します MixItUp プラグインをダウンロードフィルタリング機能を実装追い込みのアニメーション <html lang="ja"> <head> <meta charset="UTF-8"> <title>MixItUp</title> <link rel="stylesheet" href="style.css"> <script src="jquery-2.2.4.min.js"></script> <script src="jquery.mixitup.min.js"></link></meta></head></html>

2016-08-25

メガドロップダウン

メガドロップダウン手順 HTMLの文章構造を構築 CSSを記述 hover時の設定を記述メガドロップダウンメニュー WORKS PRODUCT RECRUIT BLOG CONTACT WORKS DESIGN・HTML/CSS・SYSTEM 制作について紹介します。 DESIGN ＞コンセプトワーク＞受賞リスト＞実績…

2016-08-20

アコーディオンパネル

アコーディオンパネル <html lang="ja"> <head> <meta charset="UTF-8"> <title>アコーディオンパネル</title> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <style> body, div, dl, dt, dd { margin: 0; padding: 0; } #wrapMenu { width: 500px; margin: 50px auto; } .question { padding: 10px; f…</meta></head></html>

2016-08-11

セレクタの使い方

最低限、使うものだけ覚えるすべてを覚えようとしないこと JavaScriptの読み込み順序 HTMLをすべて読み込み後に、jQueryの処理を実行する <script> $(document).ready(function(){ //この中に処理を記述 }); </script> この記述であれば、bodyの終了タグの前でも、script内で…

2016-08-10

セレクタ

セレクタとは名前、属性、状態などによりドキュメント内の要素を選択する役割セレクタの書き方先頭に「$」を記述「$」は、jQueryオブジェクトのインスタンス $( '要素' ) セレクタを使用するときの注意点セレクタを使用する場合は、jQueryへのアクセス…

2016-08-09

jQueryの基本

よく使うJavaScriptを簡単に使えるようにしたもの JavaScriptのライブラリのひとつ HTMLやCSSを操作して、要素・属性・スタイルを追加・変更・削除できる要素に対してアニメーションできる主要なブラウザをサポート（ブラウザ依存を気にしなくてよい）記…

2016-08-08

DOM-実践演習

DOMによる書き換え DOMツリーでは、トップレベル要素は「document」オブジェクトです documentオブジェクトから、button（エレメントノード）をid属性を指定して参照しています <html lang="ja"> <head> <meta charset="UTF-8"> <title>背景色を書き換える</title> <style> body { background-color: #CAE4FF; } button { curso</style></meta></head></html>…

2016-08-07

イベントハンドラの設定

HTMLとJavaScriptの分離いままでの記述では、イベントハンドラはHTML内に記述していました定義とイベントが発生する位置がばらばらでわかりにくくなっています Webページを作成する際は、HTMLとスクリプトは分けて記述することが推奨されていますイベント…

2016-08-06

DocumentオブジェクトによるHTML要素の操作

DOM操作のメソッド HTMLドキュメントの階層構造 DOMを使用すると、HTMLドキュメント内のすべての要素を「html」を頂点とする階層構造でアクセスできますこの階層構造を「DOMツリー」と呼びます DOMツリー内の個々の要素を「ノード」と呼びますノードを取得…

2016-08-05

配列の添字を活用する

曜日を日本語で表示する曜日の文字列は、「days配列」に格納しておきます <script> var days = new Array('日', '月' ,'火', '水', '木', '金', '土'); </script> Dateオブジェクトを作成曜日は、getDayメソッドを利用する1 getDayメソッドの戻り値は「日曜日～土曜日」を「…

2016-08-04

配列はArrayオブジェクト

配列とはリストのこといくつかの情報を番号と一緒に保管するためのもの「配列」とは、添字（そえじ）と呼ばれる番号を用いて、１つの変数名で複数のデータをまとめて管理できるようにしたもの配列 - マンガで分かる JavaScriptプログラミング講座配列は…

2016-08-03

random関数

乱数の発生「random()」は、「0以上１未満の乱数を生成する」メソッド「floor()」は、「小数点以下を切り捨てる」メソッドランダムな「整数」を生成する rnd = Math.floor(Math.random() * MAX + 1); <html lang="ja"> <head> <meta charset="UTF-8"> <title>乱数の発生</title> </head> <body> <h1>乱数の発生</h1> <script> MAX = 10; var num; fo</body></html>…