nicepaper @ ウィキ
nicepaper @ ウィキ

nicepaper @ ウィキ内検索 / 「Javascript入門2」で検索した結果

検索 :
  • JavaScript入門1
    ...していきました。次はJavascript入門2です。
  • JavaScriptについて
    ...pt入門1 Javascript入門2 JavaScript入門3 JavaScript入門4 JavaScript入門5 JavaScript入門6 JavaScript入門7 JavaScript入門8
  • JavaScript入門4
    前回記事、JavaScript入門3の続きです。JavaScript内では様々な関数の表現があります。 他人のコードを見ると色々な書き方があると悩まされますが主に以下の通りです。10月24日記事 目次 基本表現 コード まとめ 基本表現 function 関数名(あれば引数){ //処理を記述 } 呼び出しや実行; コード !DOCTYPE HTML html head meta charset="utf-8" title JavaScript入門。関数 /title /head body script //ただ単に関数を定義 function hello(){ console.log("hello"+"...
  • JavaScript入門7
    前回記事JavaScript入門6ではオブジェクトとメソッドの書き方について学びました。今回は用意されているオブジェクトとメソッドについて考えていきます。10月27日記事 目次 基本オブジェクト メソッド コード（stringオブジェクトの例） まとめ 基本オブジェクト 配列を扱うArrayオブジェクト、文字列を扱うStringオブジェクト、日付を扱うDateオブジェクト 数学的な計算処理を扱うMathオブジェクト、dateオブジェクトの一部 1の方はメソッドを使う時に、 new演算子を使ってオブジェクトを作ってあげる必要があります。 2の方はメソッド記述時に new演算子を使わずに、そしてオブジェクトを宣言しなくても使えるものがあります。 具体的な例を見ていきたいと思います。 ...
  • JavaScript入門5
    前回記事JavaScript入門4では関数の書き方について学びました。今回は配列について考えていきます。10月25日記事 目次 配列 コード まとめ 配列 配列の表現について、連想配列は今後学ぶオブジェクトと似ています。連想配列はオブジェクトの一種だと考えていいです。最後の方はオブジェクトとしての書き方も少しふれておきます。 コード !DOCTYPE HTML html head meta charset="utf-8" title 配列 /title /head body script //基本的な使い方 var testscore = [98,30,100]; console.log(testscore[0]);//0から開始さ...
  • JavaScript入門8
    前回記事JavaScript入門7ではStringオブジェクトとメソッドの使い方について学びました。今回はオブジェクトを作らずに使えるMathオブジェクトについて考えていきます。10月28日記事 目次 数学的な表現 コード まとめ 数学的な表現 一番使うのはランダムに数字を出しそれによって処理を変えるMath.floor(Math.random)だと思います。その他にも使えるメソッドを適当に書いていきます。 MDNはこちらです。 コード !DOCTYPE HTML html head meta charset="utf-8" title 用意されているオブジェクトを使う～組み込みオブジェクト～ /title /head body sc...
  • JavaScript入門6
    前回記事JavaScript入門5では配列の書き方について学びました。今回はオブジェクトとメソッドについて考えていきます。10月26日記事 目次 オブジェクト メソッド コード まとめ オブジェクト 実際に操作する「もの」を作っていきたいと思います。プロパティのように静的なものを扱うものも作ることができれば、メソッドと呼ばれるものも作ることができます。 メソッド メソッドとはオブジェクトにくっついてる関数です。「手続き」と呼ばれ、オブジェクトにくっつけて使います。当然オブジェクトが定義されていないと使えません。 コード !DOCTYPE HTML html head meta charset="utf-8" titl...
  • JavaScript入門3
    真偽値について考えていきます。10月23日記事 目次 真偽値 コード 実行結果 まとめ 真偽値 0以外の場合は真、0の場合偽、文字列が何かはいっていれば真、文字がから文字かnullだったら偽、等の結果をまとめていきます。 コード !DOCTYPE HTML html head meta charset="utf-8" title Javascript入門3 /title /head body script var a = 0; var b = 1; var c = ""; var d = ; var e = "hoge"; var f = true; var g = false; ...
  • Javascript入門2
    if文、for文、switch文について考えていきます。10月22日記事 目次 主に使うのは3つ if if(変数の条件式){ 　処理; } for for(変数の初期値; 繰り返し条件 ; 繰り返し後の処理){ 処理; } switch swicth(変数){ case 値 処理; break; case 値 処理; break; default 処理; break; } コード !DOCTYPE HTML html head meta charset="utf-8" title 無題ドキュメント /title /head body script //if文 var num = 80...
  • Java ScriptのOnclick
    今日はOnclickについて勉強していこうと思います。 ボタン(htmlのINPUTタグ)がクリックされた時にJavaScriptを実行したい 場合があります。 INPUTタグのOnClick属性にJavaScriptを記述することで、ボタンクリック時にJavaScriptを実行する事が可能になります。 実際にコードを書いていきます。 コード head meta charset="utf-8" title onclick /title script language="javascript" type="text/javascript" function OnButtonClick() { target = document.getElementByI...
  • HTMLタグをデバイスごとに、javascriptとjQueryで振り分け
    MediaクエリでブラウザごとにCSSでデザインを変更することはできるが、HTMLのタグの構造自体をデバイス毎に分けたい場合があります。 グローバルメニューなど、ブラウザとスマートフォンでHTMLの構造を変更したいという場合について考えていきます。10月12日記事 目次 振り分けしたいタグは全部js部分に記述 HTMLタグ Javascript及び、jQueryのコード iPhone,iPad,Android,PCの4つに分ける。 （iPhone,iPad,Android）と（PC）の2つに分ける。 まとめ 振り分けしたいタグは全部js部分に記述 全部同じブラウザで表示したい部分に関しては、そのままでいいですが、振り分けたい場合は div id="deviceAr...
  • PHPでajax通信入門1
    PHPでajax通信するための基本の流れについて説明していきます。10月20日記事 目次 順序 コード index.php ajax.php まとめ 順序 jQueryを読み込む フォームでidを指定する。(name属性は記述しない） 実行したときのidも記述し、それをscriptコードを書いていく。 ajaxメソッドを使って記述する。 記述する方法はurl,type,dataType,dataを記述 dataのところにname属性の名前とそのデータのvalueを記述する。 成功したときと失敗したときの対応を記述 コード index.php !DOCTYPE HTML html hea...
  • jQueryで日付入力フォームを作る
    jQueryで当日がセレクトされている状態の日付フォームを作っていきたいと思います。6月2日記事 HTMLでセレクトボックスのプルダウンメニューを書くことはできるのですが、今日の日付の部分があらかじめセレクトされているような状況だと、やはりjQueryやphpなどのプログラムを使わなければなりません。。。。うむ・・・HTMLでもできればいいのに・・・と思ったりしますが、ダメなようです。jQueryで書いていきます。 目次 jQueryとCSSの読み込み HTML記述 結果 jQueryとCSSの読み込み jQueryとCSSはダウンロードしてもよいのですが、Googleから読み込みます。 http //jqueryui.com/datepicker/にサンプルソースコードが乗っかってるので、それを...
  • クロスサイトスクリプティング
    今回はクロスサイトスクリプティングについて学んでいきます。クロスサイトスクリプティングは他人のWEBサイトに悪意のあるプログラムコードを埋め込む攻撃手法です。どんなことが起きる可能性があるのか、何を対策しなければならないのかを学んでいきたいと思います。6月6日記事 目次 自分で自分を攻撃してみる。 コード 注入 どんなことが起きるのか。 何をすればよいのか。 対策方法 自分で自分を攻撃してみる。 コード form.php !DOCTYPE HTML html lang="ja" head meta charset="utf-8" title フォーム /title /head body form...
  • bootstrap概要
    bootstrapの概要を記述。レスポンシブデザインができるCSSフレームワーク。3月20日記述。 目次 メインページ サンプルページ アイコン コンテンツ内デザイン JavaScriptコンポーネント bootstrapカスタマイズ メインページ http //getbootstrap.com/ サンプルページ http //getbootstrap.com/getting-started/#examples アイコン http //getbootstrap.com/components/ コンテンツ内デザイン http //getbootstrap.com/components/#dropdowns Jav...
  • bootstrapのHTMLひな形
    bootstrapのHTML整形。3月21日記事 目次 ひな形 CDN CSS CSS JavaScript ひな形 !DOCTYPE html html lang="ja" head meta charset="utf-8" meta http-equiv="X-UA-Compatible" content="IE=edge" meta name="viewport" content="width=device-width, initial-scale=1" !-- The above 3 meta tags *...
  • phpでMySQLへフォームを使って挿入
    前回記事MySQLでテーブル作成2ではフィールドの挿入等の確認をしました。次にPHP側でコードを書いてデータベースへ挿入です。色々とセキュリティに関する事項がでてくるので、執筆が長くなるかもしれませんが、ご了承ください。6月2日記事 目次 掟 ユーザが入力したJavaScriptを実行させないhtmlspecialchars関数 MySQLへデータを正確に処理させ、データベースの内容を改ざん削除させないSQLインジェクション対策 PDOの利用 フォームを作ってみる 確認ページ 完了ページ 現在の風潮 感想 掟 phpでMySQLとの連携プログラムを書く際に、注意しなければならない点がいくつかあります。その中で、2つに絞ってまずは話していきたいと思います。非常に最初は混同し...
  • jQueryの読み込み
    WEB閲覧時に、画像が切り替わったり、マウスを載せるとウインドウがでてきたり、と様々な表現ができるjQuery。今回はそのjQueryについてまとめていきます。2015年5月27日記事 目次 jQueryのダウンロード Version１とVersion２の違い HTMLのheadに記述 記述方法 読み込み（設置方法） 何かテストしてみる。 コード 結果 まとめ jQueryのダウンロード 本家サイトよりダウンロードしてください。minのタイプがオススメです。 バージョンがころころ変わりますので、マウスを載せるとファイル名が表示されるので1.XX.X.min.jsか2.XX.X.min.jsというファイルをダウンロードするようにしてください。 ...
  • 再編集ボタンからきた編集ページを作る
    前記事、PHPとMySQLを使って更新情報の再編集ページを作るの続きです。 今度は編集ボタンを押した際に、データベースから記事を読み込み編集できるよう設置していきます。8月6日記事 目次 データベースから取得した内容をvalueなどに埋め込む コード まとめ データベースから取得した内容をvalueなどに埋め込む データベースから取得した値をvalueに埋め込んだり、if文を用いて、selectタグのselectedを追加したりを実装していきます。 また、再びjQueryを読み込ませて、再選択をできるような状況にしておきます。 コード ?php require( config.php ); $dsn = mysql dbname= .DB_NAME. ;host= .DB_HOS...
  • PDOとajaxでリアルタイム検索機能を作る～ajax入門1～
    https //www.ibm.com/developerworks/jp/opensource/library/os-php-jquery-ajax/ここの記事はmysql_real_escape_stringを使った書き方をしているので、PDOバージョンで書いてみます。まだ完璧なものではないので、流れだけ解釈してもらえればと思います。10月4日記事 目次 ajaxとは サンプルコード（英単語を検索する仕組み） table作成 データ登録 index.php post.php まとめ ajaxとは IT用語辞典によれば Ajaxとは、Webブラウザに実装されているJavaScriptのHTTP通信機能を使って、Webページのリロードを伴わずにサーバとX...
  • headに入れる要素について
    今回はheadに入れる要素について説明していきます。 headはとても重要性が高いにも関わらず目に見える形でページに反映されないのでとてもわかりづらいです。そこで少しずつわかりやすく解説していきたいと思います。 headとはtitleやmeta要素などで構成されており、基本的にはtitleは必須です。また、メタデータ(文字コードや検索結果と同時に表示される文章説明、キーワードなどのそのページに関する情報)の集合です。 head meta charset="utf-8" title サンブル /title link rel="stylesheet" href="○○.css" /head これが最も簡単な形のheadでしょう。二行目の部分、meta charsetは文字コードを指定しています。 ...
  • メニュー
    トップページ HTMLとCSS PHP JavaScript データベース 画像処理 サーバ設定と設定ファイル 開発お役立ちグッズやサイト wiki編集お役立ちページ 勉強系参考サイト リンク @wiki @wikiご利用ガイド wikiの編集方法についてはこちら 左メニューの編集方法についてはこちら   ここを編集
  • jQueryで画像のスライドショーを実装する
    このページではjQueryを使って簡単なスライドショーを作る方法を解説していきます。 この方法では、何かファイルをダウンロードしたりする必要もないのでかなり楽にできます。 下のような感じで変化していきます。 HTML div id="top_image" ul li img src="images/futta0847.jpg" class="reflect"/ /li li img src="images/futta2812.jpg" class="reflect"/ /li li img src="images/IMG_1935.jpg" class="reflect"/ ...
  • jQueryで横方向に画像をスライドさせる
    横にスライドさせるスクロールについて考えていきます。11月17日記事 イメージ 目次 とってくる コード 詳細設定 とってくる MITライセンスで公開されているものをとってきて試してみました。 http //www.coolwebwindow.com/jquery-plugin/plugins/slidewide/index.html コード 今回、試しにsvg画像を使ってみました。結論から話すと、svgは読み込みに時間がかかりあまり使い物にならないことがわかりました。 jpgやpngを使ってやっていくことをお勧めします。 !DOCTYPE HTML html lang="ja" head meta charset="utf-8&...
  • bootstrapでメニュー、ナビゲーション
    bootstrapでメニューやナビゲーションを作る。3月23日記事 目次 概要 コード 概要 スマートフォン用のメニューとPC用のメニューを作る。スマートフォンの場合は、メニューボタンを押すと、下にドロップダウンする感じでメニューがあらわれる。 コード !DOCTYPE html html lang="ja" head /head meta charset="utf-8" meta http-equiv="X-UA-Compatible" content="IE=edge" meta name="viewport" content="...
  • CSSでメニューなどのスクロールしたらついてくるエリアを作る1
    スクロールしても上のバーが残っている状態のCSSの設定方法です。12月1日記事 イメージ 最初はこんな感じスクロールしてもこんな感じに上のバーが残る 目次 スクロールしたらついてくるものの実装方法 コード まとめ スクロールしたらついてくるものの実装方法 スクロールしたらついてくるエリアの設定はJavaScriptでもありますし、CSSでもあります。まずは今回CSSのみで実装していく方法について考えていきます。 コード HTML !DOCTYPE HTML html head meta charset="utf-8" link rel="stylesheet" type="text/css"...
  • トップページ
    ページデザイン変更しました。2015年8月7日 html5+css3やプログラミング、PC関連についてまとめています。 時々、編集途中のページもあることをご了承ください。その場合は但し書きをしております。 間違いの指摘や感想、意見など、皆様のご協力もお願いしたく思っております。 よろしくお願いします。ご意見ございましたら jubilo917 at gmail.comまでご連絡ください。 目次 HTMLとCSS PHP JavaScript データベース 画像処理 サーバ設定と設定ファイル 開発お役立ちグッズやサイト wiki編集お役立ちページ 勉強系参考サイト 編集途中記事まとめ
  • 編集お役立ちページ
    編集に役立つtipsを記述していく。 目次 検索技法 文法集 表組み 画像貼り付け関係 コードを綺麗にする PHP編 JavaScript編 行頭に半角スペースを入れる。 文字を赤文字にする。 改行を入れる 引用を入れる。 目次ページ更新状況 更新の掟 ０，タイトルの設定 １，あるなら前回のおさらいをする ２，目次をつくる ３．文字だけの解説は避ける ４，画像は作れるのなら、関連性のあるキーワードを入れて作る ５，たくさん改行を入れよう ６，コピペ用と学習用のソースコードがあると尚良し 検索技法 Googleの検索技法を学ぶ 文法集 http //...
  • jQueryを使って、windowの横幅サイズに応じてタグを追加したり内容を変更したりする。
    ウインドウの幅に応じてタグを追加したり内容を変更したりする方法について考えていきます。12月10日記事 目次 横幅で表示内容を変えたい 参考になりそうなnicepaper記事 ウインドウの幅を取得 コード 解説 横幅で表示内容を変えたい PC画面ではたくさんの情報を表示したいのに対し、スマートフォンではそんなに情報を表示したくない時があります。 そんなとき、状況応じて色々と処理を変えていく場合を考えていきます。 参考になりそうなnicepaper記事 HTMLタグをデバイスごとに、javascriptとjQueryで振り分け jQueryとCSSでメニューなどのスクロールしたらついてくるエリアを作る2 ウインドウの幅を取得 ウイン...
  • HTMLとCSS
    HTMLとCSSについての記事一覧です。 目次 HTML5とCSS3とは HTML5の宣言文 html5+css3で基本的なページをつくってみよう！① html5+css3で基本的なページをつくってみよう！② headに入れる要素について HTML５で登場する新タグ(新要素) header margin、border、paddingの違いについて CSSのリセット 擬似要素before,afterの使い方 各ブラウザにおけるcss内のfont-familyの挙動 文中の文字の一部のみを指定する場合 HTML5でのタグ使用の注意点 インライン要素とブロックレベル要素（ブロック要素） CSSでmarginプロパティが効かない時の対策 boxの配置方法 ...
  • jQueryで横並びメニューのドロップダウン型メニューを作る
    メニュー項目が多すぎるとメニューのものをグループ分けし、そのグループを横並びリンクとして作っている場合があります。さらに、そのリストにカーソルを載せるとそれぞれから下にサブメニューがでてくることがあります。今日はそんなドロップダウン型メニューを作っていきたいと思います。7月21日記事 イメージ 大きなカテゴリにあてると下側にサブメニューがあらわれる さらにサブメニューにカーソルを合わせると色も変わる 目次 作る上で注意したいこと HTML記述 CSS記述 jQuery まとめ 作る上で注意したいこと デザイン決めとく。 メインメニュー、サブメニューのそれぞれの背景色と文字色） メインメニュー、サブメニューのhover時のそれぞれの背景色と文字色） 4種類...
  • jQueryを学ぶ3
    今回はちょこっと休憩しjQueryのcdnおよびプラグインについて執筆していきたいと思います。7月13日記事 目次 GoogleにホストされているCDN プラグインの一例 入力フォームのチェックプラグイン タブやページネーションを使えるプラグイン 日付入力をカレンダーから簡単に入力できるプラグイン GoogleにホストされているCDN GoogleにホストされているCDN一覧はhttps //developers.google.com/speed/libraries/にあります。 jQuery jQuery Mobile jQuery UI この3つです。そして3つとも色々なバージョンがあります。これらは代表的で簡易的なJavaScriptしか使えません...
  • CSSで縦書き開発1
    CSSで縦書き開発をしていきたいと思います。11月4日記事 イメージ 目次 概要 Javascriptで実装する。 CSSで実装する。 コード 結果 まとめ 概要 縦書きを実現する際、レスポンシブデザインのことも考えないといけないですし、PHPやRUBYとのプログラム言語の兼ね合いも考えないといけません。 また、プリントアウトする際の調整も考えなければならないかと思います。 Javascriptで実装する。 h2v.jsや竹取.jsやnehan.jsなどのライブラリを使って実現することもできます。メリットやデメリットはこちらをご参照ください。 CSSで実装する。 CSS3ではwriting-modeというものが実装されています（ただ...
  • jQueryとCSSでメニューなどのスクロールしたらついてくるエリアを作る2
    前回記事CSSでメニューなどのスクロールしたらついてくるエリアを作る1では一番上にある部分をスクロールしてもついてくる状態にしました。 今度は途中にあるメニュー部分などをスクロールしてもついてくる方法について考えていきたいと思います。12月3日記事 イメージ スクロールする前スクロールしてnav部分をすぎると？こんな感じでナビ部分だけが残る 目次 コード まとめ コード HTML !DOCTYPE HTML html head meta charset="utf-8" link rel="stylesheet" type="text/css" href="reset.css" link rel=&...
  • jQueryを学ぶ2
    前回記事jQueryを学ぶ1では基本的な書き方を学んだと思います。今日は指定したセレクタについて、CSS以外の動かす方法について執筆していきたいと思います。7月12日記事 目次 jQueryの基本構文 代表的な関数（メソッド）を使ってみる fadeOut #mainのpにmouseoverしたときに、赤字に変える。 もう一つ遊んでみる。 まとめ jQueryの基本構文 !DOCTYPE HTML html lang="ja" head meta charset="utf-8" title jQueryでCSS /title link rel="stylesheet" type="te...
  • jQueryでWEBページ全体をフェードインさせる。
    前回記事CSS3で画像をフェードインさせたりする。のことをjQueryで作ってみる。6月10日記事 イメージとしてはこんな感じです。 1（こんな感じから） 2（こんな感じになっていく。） 目次 jQueryの読み込み サンプルとして、まずは作ってみる 色々と試してみる ページ全体 jQueryの読み込み コードの head /head タグ内に script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" /script を記述。googleのCDN使いましょう。 サンプルとして、まずは作ってみる HTM...
  • カレンダーから日付を入力する方法
    フォームを作る際に日付をカレンダーから選ぶことが出来れば便利ですね。 今回はjQueryを利用してカレンダーから日付を選択出来るようにしたいと思います。 jQueryを導入する まずはjQueryを使えるようにします。 今回は最も簡単な方法を使います。 htmlのhead内に以下のコードを記述します。 script src="https //ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" /script これでファイルを置かなくてもjQueryを利用する事が可能になりました。 jQuery UIを導入する 上と同じ要領で、head内に以下の記述をしてみます。 script src="http //ajax.googleapis....
  • vagrantでバーチャルホストの設定とローカルのhostsの設定
    vagrantでバーチャルホストを複数立ち上げ、開発を楽にする方法を記述していきたいと思います。 また、環境としては、仮想化＋linuxインストールを参照してください。 メイン用URI http //www.nicepapermain.net/ バーチャルホスト用 http //www.nicepapervir01.net/ http //www.nicepapervir02.net/ http //www.nicepapervir03.net/ http //www.nicepapervir04.net/ とします。 前提記事　vagrantのマウントした状態から始めていきます。 目次 ヴァーチャルホストのディレクトリ作成(centOS環境) 適当にファイルを作っておく。 設定ファイル編集と再起動 ...
  • jQueryを学ぶ1
    Photoshopの記事を書こうとしたのですが、編集後の画像があまりかっこよくなかったので少し後回しにし、jQueryについて執筆していきたいと思います。前回記事jQueryの読み込みからさらに進めていきたいと思います。読む人の対象は HTML+CSSがある程度わかっており、WEB上にあるjQueryのサンプルコードをいじって設定してみたものの、もう少し深く知りたいや、自分で実装してみたいという方向け です。7月11日記事 目次 jQueryを学ぶ手順 jQueryでCSS記述をしてみる jQueryを実行させる環境を整備する。 jQueryを呼び出す基本構文を作成する jQueryでCSSのなにか記述をしてみる。 pを赤字 #mainの中のpを赤字 まとめ jQuer...
  • jQueryを学ぶ4
    今回はjQueryで様々なコンテンツを作っていきたいと思います。マウスを載せた時に画像を拡大したり縮小したりするものを書いていきたいと思います。7月15日記事 イメージ（マウスをのせる前） イメージ（マウスを載せた後） 目次 nicepaper内にあるjQuery一覧（2015年7月15日現在） その他のコンテンツを作ってみる。 mouseover、mouseout（マウスオーバー、マウスアウト）したときのCSSデザインを変更する。その1 mouseover、mouseout（マウスオーバー、マウスアウト）したときのCSSデザインを変更する。その2 nicepaper内にあるjQuery一覧（2015年7月15日現在） 2015年7月15日（執筆時）時点で、こ...
  • 文字列関係
    目次 文字列の長さをはかる。 文字をエスケープ処理する。htmlspecialchars GETメソッドのフィルター（要編集） 文字列の長さをはかる。 入力フォームのタイトルに例えば、「タイトルを入力してください。50バイトまで」と表記したところで、初心者はバイトって何？と思われてしまう。 UTF-8な環境が主流になりつつ現在、入力された文字の長さを測ることは困難であるが、それでもエラー対応をするためにある程度は文字入力の制限をしなければならない。 http //yanok.net/2012/08/post-226.html を見ると、文字数制限のやっかいさについて書かれているが今回はphpで実装されている文字のカウントについてまとめてみる。 strlen（バイト数） mb_strlen（文字数） m...
  • 付箋のようにクリックORタップしたら透過する仕組みを作る2
    前回記事付箋のようにマウスを載せたら剥がされる仕組みを作る1ではCSSのみで実装していましたが、今回はjQueryも使って実装していきます。11月13日記事 イメージ クリックする前クリックした後 目次 概要 コード まとめ 概要 今度はjQueryのclickイベントを使って行っていきます。 コード HTML !DOCTYPE HTML html head meta charset="utf-8" link rel="stylesheet" type="text/css" href="reset.css" link rel="stylesheet&qu...
  • jQueryとCSSで上へ戻るボタンを作る
    jQueryやスマートフォンが流行るようになってきてからスクロールしたあとに「上へ戻る」ボタンが作られるようになってきました。今回はそれを作っていきたいと思います。7月19日記事 イメージ 全体はこんな感じ 最初はボタンがあらわれないが 下の方にいくとあらわれる 目次 まずは全体の枠組み作り ボタン作り ボタン配置のHTML+CSS+jQuery まとめ まずは全体の枠組み作り HTML部 !DOCTYPE HTML html lang="ja" head meta charset="utf-8" link rel="stylesheet" type="text/css&qu...
  • jQueryでタブコンテンツを作ってみる。
    見せたいコンテンツやテキストが縦方向にずらっと並んでいるとうんざりすることがありますよね？そんな中で、クリックさせたときにのみその部分を表示させるためにはタブのコンテンツをよく使用します。今日はjQueryでタブ型のコンテンツを作っていきたいと思います。7月10日記事 目次 用意するもの HTMLとCSS まとめ 用意するもの jquery.min.js本体（今回はgoogleのcdnを利用） reset.css（paddingやmargin等をリセットするCSSをどこからかとってきてください。） HTMLとCSS HTML部（reset.cssを読み込んでいます。resetするCSSを読み込んでください。） !DOCTYPE HTML html hea...
  • jQueryですべて表示（全部表示）と個別表示のタブ的なメニューを作る
    メニューを選択するリストがあり、そのリストのコンテンツをすべて表示と個別表示とで表示内容に分けるタブ的な機能をもつプログラムをjQuery作っていきたいと思います。2015年7月16日記事 イメージ1（はじめはすべて表示） イメージ2（個別をクリックすると、個別のものがあらわれる） イメージ3（すべて表示を再び押すともう一度すべて表示に戻る。） 目次 設計思想 コード まとめ 設計思想 初期状態はすべて表示（すべて表示のボタンのclassに.selectedをつけておく） 個別のものを押すと個別のものだけのコンテンツがあらわれ、以前につけられていたCSSのselectedを削除し、選択したものにCSSのselected付け加える 再びすべて表...
  • jqueryで要素の移動～直前の要素、親要素、子要素～
    jQueryでボタンが押された時にその近くにある要素に対して表示を操作する方法について考えていきたいと思います。 お題は以下のイメージ図にあるように、あいうえお等が書いてある要素に対して表示、非表示を考えていきます。12月6日記事 イメージ※わかりやすいように背景を色付けしてあります。 目次 要素の指定 コード（親要素のひとつ前の要素の子要素を指定したい場合の例） まとめ 要素の指定 要素の要素の指定をまとめると、 prev()1つ前の要素 next()1つ次の要素 children()すべて子要素 parent()すべての親要素 siblings()すべて兄弟の要素 となります。 コード（親要素のひとつ前の要素の子要素を指定したい場合の例） HTML ...
  • ボタンを押したら付箋が非表示・表示になる仕組みを作る3
    前回記事付箋のようにクリックORタップしたら透過する仕組みを作る2ではクリックしたら非表示になる機能を作っていきました。 今回はボタンを押したら、付箋が非表示になり、再び押したら表示される仕組みを作っていきます。11月14日記事 イメージ ボタンを押す前や2回押したときボタンを押した後 目次 toggleメソッドを使っていきます。 コード まとめ toggleメソッドを使っていきます。 toggleメソッドにはjqueryのバージョン毎に挙動が違うので、バージョンをよく確認して使ってください。 コード HTML !DOCTYPE HTML html head meta charset="utf-8" link rel=&quo...
  • コメント欄にURLを入れられた場合に、リンクを張ってあげてなおかつXSS対策を施す～aタグの許可～
    エンドユーザがコメント欄にコメントを入れた際に、scriptタグはエスケープ処理し、URLが張られた場合はリンクを作ってあげる方法について考えていきます。12月5日記事 目次 エスケープ処理したいけど、URLだけはリンクを張ってあげたい。 コード 実行結果 まとめ エスケープ処理したいけど、URLだけはリンクを張ってあげたい。 XSS対策のためにhtmlspecialchars関数を利用しますが、リンクのためのaタグのみは許可させたい場合はhtmlspecialchars関数を利用したあとに、URLの形をしていればpreg_replace関数を使ってaタグを作ってあげる必要があります。 コード index.php !DOCTYPE HTML html he...
  • タブレットスマートフォン解像度一覧
    現時点での解像度一覧です。11月29日記事 目次 iPhone,iPad,iPadmini解像度一覧 スマートフォン devicePixcelRatioの把握方法 まとめ iPhone,iPad,iPadmini解像度一覧 デバイス 解像度 インチ pixel比 iPhone3G/3GS 320×480px ? 1 iPhone4/4S 640×960px ? 2 iPhone5/5S/5c 640×1136px ? 2 iPhone6/iPhone6s 750x1334px ? 2 iPhone6 Plus/ iPhone...
  • インライン要素とブロックレベル要素（ブロック要素）
    ここでは、インライン要素とブロックレベル要素についてまとめていきます。 HTML5で廃止？ ブロックレベル要素とインライン要素 ブロックレベル要素とインライン要素一覧 ブロックレベル要素 インライン要素 ブロックレベル要素の特徴 インライン要素の特徴 HTML5で廃止？ 　いきなりですが、HTML5からインライン要素、ブロックレベル要素という概念はなくなりました。（ややこしいですが、概念はなくなりましたが、一応存在としては残っています。）「コンテンツ・モデル」という考え方になり、各要素の内包できるものや内包されるものが決められており、それ以外の要素は入れてはいけない。という概念に移りつつあります。 よくCSSで display inline; display block; など...
  • @wiki全体から「Javascript入門2」で調べる

更新順にページ一覧表示 | 作成順にページ一覧表示 | ページ名順にページ一覧表示 | wiki内検索