2013-08-01から1ヶ月間の記事一覧

古いIEプラウザで透過PNGを適応させたい。

表示できない、レイアウトが崩れる、透過できないetc,etc... そんな困ったIEの対応策を書き綴っていきます。 PNGの透過部分が透き通らない。 DD_belatedPNG.jsを使用する。http://www.dillerdesign.com/experiment/DD_belatedPNG/よりDLした0.0.8a-min.jsフ…

ファビコン作成

作成手順 好きな画像を16×16pxにリサイズしてgif保存。 gifを再度開いてイメージ>色調補正>明るさ・コントラストでコントラストを最大値まであげる 続けてフィルタ>フィルター>シャープ>アンシャープマスクで 量:300%ぐらい 半径30前後px しきい値:60〜8…

HTML内にやが必要ない?

これってアリなのだろうか? googleの推奨コード記述では<html>や<body>がないらしい。好きなところに<head>が打てて、その中にスクリプトや外部ファイルの読み込みができるのはいいとして <div id="container">などを使用して指定範囲のレイアウトをセンター配置する際に、何をもってセンターに位</div></head></body></html>…

Canvasをちょっとやってみる

canvasに必要なツール・知識。 html css javaScript エディタソフト(さくらエディタでもDwでも) プラウザ(javaScriptを使うのでChromeを推奨) とりあえず四角形から描画してみる。 html <html lang="ja"> <head> <meta charset="UTF-8"> <title>Canvasの練習</title> </head> <body> <h1>Canvasの練習</h1> <canvas id="mycanvas" width="400" height="200"> canvasに対応したプラウザ…</canvas></body></html>

Math関数など

Math関数 Mathとは「数学(Mathematics)」の意味 数値演算に便利なメソッドやプロパティが利用できるオブジェクト まえもってインスタンスを生成する必要はありません スタティックメソッド(インスタンスを生成しないで関数のように使用できる) 記述方法…

エスケープシーケンス

htmlなどで""を文字として扱うとタグとして認識して出力してしまうため &lt; (変換されるので大文字で表記しています。) という風にアンパサンド記号(&)の後ろに名前、セミコロンを指定するという形式で出力します。 javascript*1のエスケープシーケ…

各種ダイアログ

警告ダイアログ 確認ダイアログ 任意データ入力ダイアログ 警告ダイアログ[alert(〜);] javascript message = "こんにちは" alert ( message ); 出力結果 こんにちは ユーザーに確認を求めるダイアログ[confirm(〜);] javascript var man man = confirm('男…

いろいろな演算子

演算種別 演算子 説明 使用例 結果子 論理演算子 && 左辺と右辺のどちらも trueの場合はtrue 1 == 1 && 2 == 2 true || 左辺と右辺のどちらかが trueの場合はtrue 1 == 2 || 2 == 2 true ! 真偽値を反転させる !a aがfalseの場合はtrue、 aがtrueの場合はfal…

ライブペイント

異なる2つの図形AとBの重なりあう部分Cの領域を色づけする場合、通常だとバスファインダの「分割」の後、グループ解除かダイレクト選択ツールで塗り直す手順がありますが、ライブペイントツールを使えばもっと早く塗り直せます。 まず、二つのオブジェク…

PHPで等差数列を書いてみた。

PHP

初項、公差、項数をフォーム入力してその等差数列の和と表を作ってみました。 入力送信側のファイル:arithmetical.php <h1>等差数列</h1> <form action="arithmeticalAnswer.php" method="get"> <p>初項:<input type="text" size="5" maxlength="5" name="firstTerm"><span>(3桁まで)</span></p> <p>公差:<input type="text" size="5" maxlength="5" name="tolerance"><span>(3桁まで)</span></p></form>

googleMapをページ内に表示

API

head内に下記のスクリプトを記述する。 緯度と軽度はhttp://www.geocoding.jp/より取得して 4行目の”var myLatlng = new google.maps.LatLng(緯度,経度)”に入れる。 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script> function initialize() { var myLatlng = new google.maps.LatLng(緯度,経度); var myOpt…

jQueryを使用したテーブルレイアウト

基本となるhtml <table> <tr> <th>th00</th> <th>th01</th> <th>th02</th> <th>th03</th> <th>th04</th> </tr> <tr> <td>0</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr></table>

サイト制作で利用するwebサービス

プログラミング関係 jsdo.it http://jsdo.it/ ドットインストール http://dotinstall.com/ Qiita[キータ] http://qiita.com/ 学習ログサイト Studylus http://studyplus.jp

Photoshop小ネタ、ちょいテク

環境設定ダイアログの「一般」で「スクロールホイールでズーム」というチェックボックスがあります。 これは文字通りスクロールホイールで拡大縮小ツールを使わずに表示倍率を変えるものです。 ツールの方だと(1)ツールを選択、(2)縮小の場合はaltキーを押す…

「ATOK」が勝手に「ことえり」になるのを防ぐ方法

タイプの多い作業上、必然と入力ミスを防ぐ+効率化を図るためATOKを利用しています。使い慣れていくと偶に「せんが」→「線画」とスムーズに変換できていたのが「せんが」→「線が」や「千が」など以前覚えた変換学習を忘れてしまってる状態に気がつきました…

Photoshop環境設定について

ツールのカスタマイズやウィンドウ位置ずらしなどで作業環境が悪くなった状態をCtrl + Alt + Shift(Windows)/Command + Option + Shift(Macintosh)を押したまま起動することで、環境設定をリセットできます。※当然、それ以前に作成したブラシやグラデーシ…

Photoshop効率化:02

ショートカットレイヤー ショートカットキー 処理内容 ctr+] アクティブレイヤーを一つ上のレイヤーに移動 ctr+[ アクティブレイヤーを一つ下のレイヤーに移動 ctr+shift+[ アクティブレイヤーを一番上のレイヤーに移動 ctr+shift+] アクティブレイヤーを一…

Photoshop効率化:01

良く使うショートカットツール カテゴリー ツール名 アイコン ショートカットキー 備考 選択範囲指定 長方形選択 M shift + Mで切替 楕円形選択 M なげなわ L shift + Lで切替 多角形選択 L マグネット選択 L 自動選択 W トリミング 切り抜き C shift +C…

異なる変数の型の連結・変換

「文字列」+「数値」の連結 javascript a='cloud'; b=9; c=a+b; d=typeof(c); document.write('typeof関数では'+d+'と出る。'); document.write(c); プラウザ出力:「数値」は「文字列(string)」扱いとなる。 a論理型boolean関数ではstringと出る。cloud9 …

only-child疑似クラス

親要素内に指定した子要素が1つしか無いものだけを選択できる."親要素 子要素:only-child"で記述 jQuery $(function(){ $("li span:only-child").css("color","red"); }); 出力結果 テキスト てきすと text TEXTTEXT

否定疑似クラス

指定要素以外の要素を選択できる。"not(指定要素) "で記述。 jQuery $(function(){ $("li:not(.second)").css("color","red"); }); 出力結果 テキスト てきすと text TEXTTEXT

間接セレクター

指定要素の後にある要素全てを選択できる。"指定要素 ~その後の要素"で記述。 jQuery $(function(){ $(".second~ li").css("color","red"); }); 出力結果 テキスト てきすと text TEXTTEXT

隣接セレクター

指定要素の次にある要素を選択できる。"指定要素+その次の要素"で記述。 jQuery $(function(){ $(".second+ li").css("color","red"); }); 出力結果 テキスト てきすと text TEXTTEXT

子セレクター

親要素の直下にある子要素を選択できる。"親要素>子要素"で記述。 jQuery $(function(){ $("li>strong").css("color","red"); }); 出力結果 テキスト てきすと text TEXTTEXT

グループセレクター

複数のセレクターをカンマ区切りで指定できる。"選択要素+選択要素+..." jQuery $(function(){ $("#first,.fouth").css("color","red"); }); 出力結果 テキスト てきすと text TEXTTEXT

ユニバーサルセレクター

指定した要素内に含まれる子要素を*(アスタリクス)で全て指定出来る。 jQuery $(function(){ $("ul *").css("color","red"); }); 出力結果 テキスト てきすと text TEXTTEXT

基本となるhtml

<ul> <li id="first"><strong>テキスト</strong></li> <li class="second"><em>てきすと</em></li> <li id="third"><span>text</span></li> <li class="fourth"><span>TEXT</span>TEXT</span></li> </ul> jQueryなしの出力結果 テキスト てきすと text TEXTTEXT

jQuery:セレクターについて、その②

Web初心者実践演習課題:H15・C15より

制作時間4時間ぐらい html <html lang="ja"> <head> <meta charset="utf-8"> <title>テンプレート</title> <link rel="stylesheet" href="css/temp_rest.css"> </head> <body> <div id="container"> <header> <a href="#"> <img src="img/logo.gif" alt="rogo"><img src="img/print.gif" alt="print" align="right" ></a> …</header></div></body></html>

jQuery:セレクターについて

jQueryを記述するにあたって、特定のHTMLやCSSに対し命令を実行するにはそれぞれのセレクターを指定します。 HTML <ul> <li id="first">テキスト</li> <li class="second">テキスト</li> <li id="third">テキスト</li> <li class="fouth">テキスト</li> <li id="fifth">テキスト</li> </ul> HTMLのみの出力結果(cssは未記入状態) テキスト テキスト テキスト テキスト テキスト jQue…