-
カテゴリ:JavaScript
/ 作成日 :2011年5月27日
-
以前の記事はこちら。
以前作った1.0はJavaScriptに環境依存的なコードを書かなければならなかった。これは運用上きついと思ったので、この依存から脱却するためにバージョン2.0を作ってみた。
Loader2.0.jsはこちらから。
問題なのは本番と制作環境のパスが1段違ってたりとか、そもそもドメインが違ってたりとかするから、読み込むパスが変わってしまうということ。 ...
-
カテゴリ:JavaScript
/ 作成日 :2011年2月03日
- ...
とりあえず、ソース。
Loader 1.0
ひとまず、JavaScriptとCSSをデフォルトで読み込んでみます。というか、それも上記スクリプトにすでに実装されているのですがカスタマイズできないと辛いですよね。なので、そのスクリプトを参考にしてみます。
まずはJavaScript
/**
* Write script tag
...
-
カテゴリ:How to JavaScript
/ 作成日 :2012年7月31日
- ...
.jsファイルの問題
JavaScriptライブラリやプラグインを多用すると自然と読み込むjsファイルやCSSファイルは多くなります。これはウェブサーバーへの問い合わせを増やすだけなので、統合したほうがいいというのもO'REILLYのJavaScriptパターンの受け売りです。
これも特に問題がなければ統合したほうがいいでしょう。
そのほうがHTMLもスッキリします。まずJavaScriptやCSSファイルでサーバーのボトルネックになることは少ないでしょうが、、、 ...
-
カテゴリ:My Web Development
/ 作成日 :2012年3月21日
- ... 86400 540"
SetEnvIf Request_URI "\.(css)|(js)|(gif)|(jpg)|(png)$" no_log
CustomLog "|/usr/sbin/rotatelogs /home/www/localhost/logs/httpd/access_log.%m%d 86400 540" combined ...
-
カテゴリ:Uncategorised
/ 作成日 :2011年1月23日
-
概要
コンピュータ日本学院専門学校CGデザイン学科ウェブクリエータ専攻（3年制）、トライデントコンピュータ専門学校シニア情報システム学科卒業。
大阪在住の会社員エンジニア（本人はウェブ系を望んでます）。
EC、ブログ、その他ウェブ系サイトシステムから、サーバーの保守、運用、管理まで行う。
主な使用言語PHP、JavaScript、HTML、CSS、SQL。 ...
-
カテゴリ:JavaScript
/ 作成日 :2010年10月13日
-
同じレイアウトだけど、英語サイトでは違うクラスを設定して、独自のCSSをつけたいとかって時に使います。
実際に私もそんな状況があり、JavaScriptでなんとか自動化できないかと思っていました。なので、綺麗に書いたやつを紹介します。
実際のところそんなにコード量は多く無いんで、ライブラリやフレームワーク使うのは微妙と思いましたが、クソッタレIEがquerySelectorAll()をサポートしていなかったので、フレームワークで対応します。ちなみに私のはIE8で、対応してるってことらしいですが、使えませんでした。（なぜ？） ...
-
カテゴリ:WEB、WEBシステム関連
/ 作成日 :2010年2月26日
- ...
ということもあり、問題はブラウザの依存関係ではなく、リッチコンテンツの制作にも大きく響きそうです。
前置きが長くなりましたが、IEでHTML5を使えるようにする方法です。
一番の問題は新たに追加された要素がIEでは認識されず、CSSのレイアウトや一部で表示できないものがあるということです。これの解決方法は単純でJavaScriptでcreateElementしてやればいいだけなのです。 ...
-
カテゴリ:Nucleus
/ 作成日 :2010年1月25日
-
CKEditorをNucleusで使いやすいように設定を変更してみた。
使ってて思い出したのですが、私がなぜTinyMCEを押していたのかというと、TinyMCEはCSSの編集をできる機能がついている。
インターフェースはDreamweaverと同じ。
これは、記述法を知っている人なら自由に編集できるなと思ったのだ。
問題のCKEditorですが、今回もCSS編集機能は実装されていない。 ...
-
カテゴリ:WEB、WEBシステム関連
/ 作成日 :2010年1月23日
-
仕事上いろんなHTMLを扱うが、一番いやなケースがテーブルレイアウトされたHTML。
特にtdタグの中にtableタグを入れ子し、さらにtdとspacer.gifで隣の要素のマージンを調整しているケースは最悪だ。
この手の手法は、テーブルレイアウトが主流だった（今も使っている人もいると思うが）数年前では当たり前だった。
タグにwidth属性やheight属性を記述しており、CSSは色や線など装飾程度にしか使っていないという考えのサイト。 ...
-
カテゴリ:Nucleus
/ 作成日 :2010年1月18日
-
前回の記事の続編です。
Nucleusの次期バージョンはおそらくPHP5完全対応になるだろうから、プラグインの作り方も変わってくると思うんですよね。
だからというのは理由になりませんが、面倒くさかったので超いい加減なプラグインを作ってしまいました。
その作り方です（笑）。
ちなみに私が使っているのはNucleusCMS 3.41です。
まずnucleus/plugins/にNP_CK.phpというファイルを作りました。 ...
-
カテゴリ:JavaScript
/ 作成日 :2009年11月27日
- AutoAIP（オートエイプ）はリンクが設定されている画像にCSSの擬似クラスセレクタのようなイベントごとに画像を切り替える仕組みを提供するJavaScriptプラグインです。
具体的にはCSS擬似クラスセレクタの:link、:visited、:hover、:activeと同等の機能を実装し、さらにリンクであることから現在表示しているページへのリンクを別の画像で表示するSelf-realizer機能を実装しました。 ...
-
カテゴリ:JavaScript
/ 作成日 :2009年8月02日
- ...
prototype.js、jQuery、MooToolsそれぞれに対応したスクリプトを用意。
指定どおりに画像を配置するとロールオーバーを自動作成できる。
HTMLのコード量が少なくなり、HTMLコード自体が見やすくなる。
画像をクリックした時に、その画像を変えることができる。（CSS擬似セレクタの:activeに相当）
デメリットは以下の通りでしょうかね。。。
単独では動作しない（コアライブラリが必要）。 ...
-
カテゴリ:JavaScript
/ 作成日 :2009年6月02日
- ... たりはしないはず。
上記のような理由で配列にデータを保持しているわけだが、配列のインデックスは画像のファイル名でつけている。
元々MooToolsベースで作っていたため、若干それっぽい形のスクリプトになっている。
ライブラリを使ったので、思いのほかコードが短くなった。（100行も書いてない）
大きなサイトでの使用実績はないので、そこでの挙動がわからない。
今後の課題
CSSの擬似セレクタみたいにリンクのvisitedや開いているページへのリンクが付いている画像のとき ...
-
カテゴリ:BLOG
/ 作成日 :2009年2月13日
- ... このサイトとMooToolsのTipsのコードを少し読めばすぐわかります。後はいつものようにFirebugとかで動的に作成されるエレメントを探ってCSSを設定です。
ということでサンプルコード。
// Wait for the content ...
window.addEvent("domready", function() {
// Create tooltips ...
-
カテゴリ:JavaScript
/ 作成日 :2009年1月13日
- サイトのリニューアルを画策しているのですが、忘れていたコンタクトフォームに手をつけました。どうしようかとも思いましたが、今回はMooToolsとSqueezeBoxを利用して、モーダル式で処理することにしました。 何はともあれ、コンタクトフォームのデザインとコーディングをして、HTMLを完成させておきましょう。その時点で、モーダルのタテ、ヨコのサイズも決めておきます。 まずSqueezeBoxのサイトからJSファイルとCSSファイルをダウンロード。MooToolsのサイトからSqueezeBoxのサイトで指定されているオプションでダウンロードします。すべてのオプションをダウンロードしてもいい気もしますが。 ...
-
カテゴリ:コンピュータ
/ 作成日 :2008年12月25日
- ... 結論から言うと、CSSの醍醐味でもあるpositionプロパティを使って、ズレた分をピクセル単位で修正していきます。
ラジオボタンやチェックボックスの場合、labelを対応する文字につけると思いますので、それを利用します。ここでは簡易的にlabelタグそのものに対してスタイルをつけていくことにします。図と照らし合わせご覧ください。 まずいかのようなコードを用意しました。
ラジオボタンの項目 ...
-
カテゴリ:コンピュータ
/ 作成日 :2008年9月08日
- インターネットとPCの普及は平行線をたどり、新技術が発表されるたびに新しいカタカナ語や英語を目にするが、HTMLやCSS、その他技術の中で明確にそのキーワードの意味と読み方を説明されているものが果たしていくつあるのだろうか。間違って覚えている人も多いと思うので、読み方を調べて記載することとする。
align ［読み方］アライン ［意味］整列させる、一直線に並べる
名詞形もあります。alignment（アライメント、アラインメント）といいます。「一直線に整列させる」の意味ですが、「一直線」というところがミソのようです。 ...
-
カテゴリ:コンピュータ
/ 作成日 :2008年9月04日
- ...
ところで、遷移時のページ表示速度がなんか速いと思いませんか？ これは回線速度でも何でもないようです。何でもDNSプリフェッチ（あってるかな？）という技術を利用して、表示速度を上げているようです。プリフェッチとは、簡単に言うと先にデータを読み込むことだそうです。だからページの表示速度も速くなると言うわけです。
ブラウザで気になるのが、CSSやJavaScriptで処理する部分のこと。左の表は、DOMの書籍を参考に作成したJavaScriptでGoogle ...
-
カテゴリ:コンピュータ
/ 作成日 :2008年9月03日
- ...
基本的にIE以外のブラウザにあわせてサイトを作っておけばひとまず大丈夫なようだ。CSSもJavaScriptも。Safariぐらいの位置づけがいいかもしれない。
だがBeta版だからだろうか、若干機能が弱い気がする。というのもメニューバーやツールバーのカスタマイズがあまりできないのと、最大化時のタブバーの位置が若干気になるということだ。
まぁGoogleが作るのだから、IEのような一匹狼的なブラウザになることはないと思う。ま、これからの進化が楽しみだ。 ...
-
カテゴリ:JavaScript
/ 作成日 :2008年8月26日
- jQueryを使ってみているのだが、中々の優れものです。「独自のセレクタを使用して豊富なDOM操作を可能にする」という触れ込みはうそではない。 基本的にDOM、つまりHTML中のオブジェクト（タグなど）への参照は基本的なCSSセレクタとXpathが利用できる。これはすごくありがたい。JavaScriptではIDで参照する場合、document.getElementById("ID名")で参照する。これと同じ書き方をprototype.jsで行うと$("ID名")となる。これはこれでコードが節約できていいが、「document.getElementById」を「$」に置き換えただけな感じがす ...