2013-01-01から1ヶ月間の記事一覧
リテラルによる連想配列の生成 配列と同じように、リテラルとして連想配列を生成する 全体を「{ }」で囲む/li> {キー1 : '値１', キー２ : '値２', キー３ : '値３', .... } Objectコンストラクタを使って生成した連想配列をリテラルで生成する ソースコード…
連想配列の利用 キーで要素を指定する、連想配列 連想配列は、Objectコンストラクタで生成する 連想配列の要素を順に処理するには、for〜in文を使用する
PNG Portable Network Graphic 拡張子「.png」 透過PNG 透過PNG形式の画像は、重なり合ったレイアウトをするときには必須。 IE6では「透過png画像が透過されない。」という不具合がある。 データー量は「JPEG」の1.5倍程度になるため、使いすぎには注意。 透…
簡単なグラデーションを作る 1pxを切り抜いて画像を引き伸ばす Photoshopの表示 一行選択ツールを選択 [ イメージ ]⇒[ 切り抜き ] Photoshopの表示[ イメージ ]⇒[ 画像解像度 ]
お気に入りの登録 任意の画像を登録してパターンとして使う Photoshopの表示 [ 編集 ]⇒[ パターンを定義 ]⇒[ パターンを登録 ] [ 編集 ]⇒[ 塗りつぶし ] カスタムパターンを選択（パターンで塗りつぶす） 選択範囲を決めて塗りつぶしてもよい Photoshopの表示
html5.js と IE9.jshtml5.js Internet Explorer 8以前のように、HTML5の新要素に対応していないブラウザにも一部の新要素を対応させることがメインのJavascript IE9.js CSS3に対応していないInternet Explorerの5.5〜8にも一部のセレクタやプロパティを対応…
アイコン（favicon.ico）を設定 管理画面の「設定 > ブログの設定」と進み、「そのほかのブログの設定」項目から「お気に入りアイコン（favicon.ico）」に画像をアップロードすることで、簡単にお気に入りアイコンを設定できる 自分の日記専用のお気に入りア…
黄金比率計算機 黄金比率計算機
手元にあるFlashコンテンツを簡単に「はてなダイアリー」に貼るためのサービス 手元にあるFlashをサーバーにアップロードして、データのＵＲＬを取得して変換するとHTMLの埋め込みコードを取得できます。 swf変換
フランス語のアクサン cafeのeの上に点[ é ]がつく フランス語のアクセント記号ショートカット HTMLアクサン表記方法
ジェネレーター Striped Backgrounds Tartan Background pattern generator backgrounds and Photoshop patterns Generate NoisePNG Subtle Patterns
素材 Seamless Paper Patterns 25 Seamless Polka Dot Pattern Swatches Random 2 - PS Patterns Back To School Textured Stripes- 6 patterns Handmade paper pattern set Grungy Abstract Squares Patter Tiles Pattern
背景パターンジェネレーターと素材 写真に影をつけて立体感をだす (PSD) Gradient Image Maker Background Image Maker リーフ（葉っぱ）の無料背景イラスト素材 Create a Burberry Style Plaid Part II: Applying a Twill Pattern Striped background gener…
![はてなブックマーク - [フリー]背景パターンジェネレーターと素材０３](https://b.hatena.ne.jp/entry/image/https://webry.hatenadiary.org/entry/20130124/p7)
Illustratorでの作業 ペンツールの詳細は「Web画像の勉強」で慣れるためには「漢字の練習」です（どこから描き始まりどこで描き終わるかの空間把握こそが上達のカギ） 《例》以下の図をトレース Illustratorの表示 本体を別レイヤーにコピーする。 下地（コ…
要素をsortメソッドで並び替える この記述では、文字列として昇順に並び替えられます ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Arrayオブジェクトのメソッド</title> </head> <body> <p> <script> var ages = new Array(8, 6, 10, 24, 1, 11, 40, 2); ages = ages.sort(compare); document.write(ages.joi</p></body></html>…
要素をreverseメソッドで逆から並べ替える ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>reverseメソッド</title> </head> <body> <script> var theArray = new Array('one','two','three','four','five'); theArray.reverse(); var len = theArray.length; for(i = 0;i < len;i++){ document.write(…</body></html>
大小を比較する関数 compareを作成 compareは、２つの値を比較する「比較関数」 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Arrayオブジェクトのメソッド</title> <script> function compare(a,b){ return a - b; } </script> </head> <body> <p> <script> var ages = new Array(8,6,10,24,1,11,40,2); ages = ages.sor…</p></body></html>
Arrayオブジェクトのメソッド sortメソッドと比較関数 「sortメソッド」は、要素を文字列として昇順に並べ替える 引数に「比較関数」を指定すると、内部で比較関数を呼び出して、その結果をもとに数字として並び替えをおこなう 判定 戻り値 引数１が大きい …
配列を操作する 配列には、Arrayオブジェクトのメソッドを実行できる 要素を接続した文字列を戻す「joinメソッド」 要素を並び替える「sortメソッド」
☆★データーでの確認★☆表示内容を置換 onMouseOver="this.src='images/◎◎.jpg'"onMouseOut="this.src='images/◎◎.jpg'" ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>imageオブジェクト</title> <link rel="stylesheet" href="css/style.css" media="screen,print"> </head> <body> </body></html>
☆★データーでの確認★☆サムネールで画像置換 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ソファーにあるインテリア</title> <link rel="stylesheet" href="css/style2.css" media="screen,print"> </head> <body> <div id="container"> <noscript> <p>このWebページはJavaScriptを使用しています。<br> お使いのブラウザがJavaScriptに未…</p></noscript></div></body></html>
配列の添字を活用する 配列の添字は、「0」から始める点に注意 配列をリテラルとして記述するには、要素をカンマで区切り「ブラケット（角括弧）」で囲む
Arrayオブジェクトのメソッド 配列は、Arrayオブジェクトのインスタンス 配列をオブジェクトとして扱うと、あらかじめ用意された便利なメソッドを利用できる 要素を joinメソッドで連結 要素の増減にかかわらず、そのまま連結して表示する 引数「 > 」を指定…
要素を joinメソッドで連結 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>toStringメソッド</title> </head> <body> <script> var seasonStr; var season = new Array('春','夏','秋','冬'); seasonStr = season.join(' ');// [ join('空白スペース') ]文字間隔を確保する document.write(seasonStr); </script> <…</body></html>
Arrayコンストラクタ ソースコード【 JavaScript 】 var names = new Array(4); これで４つの空の要素をもつ配列が生成される 空といっても何もないわけではなく、各要素には「undefined」という特別な値が格納されている undefinedは、「未定義」という意味…
lengthプロパティとfor文 配列の要素数は、lengthプロパティに格納されている ソースコード【 JavaScript 】 var len = names.length; ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>曜日</title> </head> <body> <script> var i; var dayOfWeek = new Array(7); var len = dayOfWeek.length; dayOfWeek[0] </body></html>…
表品数×価格の表 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>繰り返し処理</title> <style> body { width: 860px; } #container { width: 400px; margin: 20px auto; } table { border-collapse: collapse; } th { background-color: #eee; width: 80px; padding: 5px; } td { width: 80px</meta></head></html>…
配列の基礎 配列とは、Arrayオブジェクト 配列の長さは、lengthプロパティに入れられる 配列の各要素を順に処理するには、for文を使用する
曜日を日本語で表示する 曜日の文字列は、「days配列」に格納しておく ソースコード【 JavaScript 】 <script> var days = new Array('日', '月' ,'火', '水', '木', '金', '土'); </script> Dateオブジェクトを作成 曜日は、getDayメソッドを利用する getDayメソッドの戻り値…
１年後の曜日を表示 変数dateの日時を１年後に設定し、getDayメソッドの戻り値を配列daysに与えて曜日を表示する ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>曜日を日本語で表示する</title> </head> <body> <script> var days = new Array('日','月','火','水','木','金','土'); var date = new Date();</body></html>…
