Scriptはhtmlソース内に書くべきでない
前回の、サイトの保守(?)に関する記事。
タイトルの通り、Scriptはhtmlソース内に書くべきでない。
具体的な例をあげると、
-
- bodyタグのonload
- onclick、onmouseover、onmouseoutなど
など。
なぜかというと、
修正するときに大変だから。
同じ理由で、タグにstyle属性で直書きされるcssもダメ。
なんらかのエディタにて、複数ファイルの一括置換操作が完璧にできるならいいが。
もちろんグローバルナビやサイドバーなどの共用部分は、phpのincludeでまとめておけば多少作業は緩和される。
やっぱり何にでも言えるけど、
「パーツは細切れにして色んなところで使う」べき。プログラミングの基本です。
(極端な例)
自作パソコン作るときに、
製品として最初からマザーボードにCPUがくっついてたら、組み合わせの自由が損なわれてしまう。→使い勝手が悪い
具体的にどう書くべきか
onloadの場合
window.onload = function(){ onloadしたい処理 }
これをhead内にエンベッドするもよし。
.jsファイルを作成して読み込むもよし。
onclickの場合
jQueryを読み込んだ上で…
$function() { $('onclickイベントを追加したいタグのid(class)名').click(function() { onclick時の処理 }); });
同じく、これをhead内にエンベッドするもよし。
.jsファイルを作成して読み込むもよし。
htmlのbodyタグ内は、なるべくhtmlソースのみにしましょう
ページ数が多い場合、修正が本当に面倒です。
Web制作も人も中身からきれいに
ここ最近、とある既存サイトのリニューアル(サイト構成ファイル群なし)を行っております。かなり巨大なサイトです。cssやjsは3000超えのものがいくつもあります。
それに携わっている中で一つ、非常に言いたい事が。
「ブラウザでの見た目だけじゃなくて、とにかくソースもプログラムも見やすく解りやすく作れ!あkljdrせcvb0−thなdrbっにyhん@いんzf...」
サイト自体はとても作り込まれていてすごいのですが、これを修正等するとなると...。
headerとかfooterとかのブロック毎にcssを分けて作ってあり、そこで細々指定をしています。
ただ、変更作業している時に、CSS一か所だけ修正すればOKという訳でなく、また別の所で指定されちゃったりしているので困ります。
つまり何ヵ所かで多重指定されているという訳です。後から継ぎ足した感丸出しですね。規則性なんかほぼありませんから。
4000行超えのold.cssなるものがインポートされてますからすごいですよねw
外してもいいのか悪いのか...
人間のカラダと一緒で、外見をきれいにする為には、
まず“中身”からきれいにするよう心がけましょう。
Flashにもつかえそうな光の表現
Flashでの演出に使えそうな、光の表現の素材。
輝く幻想の光をつくるPhotoshopブラシ55個【無料素材】
Flashはやっぱ仕事でも普通にあります。
確率でいうと、ランディングページとケータイサイト以外ならほぼ100%でしょうか。ただしフルフラサイトでなければScriptはほぼ使わないです。
Webで使用する画像の大半を占める静止画像と違い、動きで魅せるというのは、より製作者の感性が必要になってくることだと思います。
タイムラインをつかった演出のバリエーションを増やすため、いろんな演出を見て、それを再現してみる練習も必要だと思います。
javascriptを使った演出01
ふと思いついたイメージを演出したくて、いろんなjavascriptを探してみました。それを改造しておもしろいライブラリを作ってみたいと思います。
画像をゆっくり表示
ザ・演出。
趣味での演出以外は必要なさそうな...そんなScriptです。
htmlソースのbodyタグで初期読み込みを行う。
<body onLoad="showDsp()">
メイン部分
<div> <img src="img01.jpg" /> <div id="curtain"><img src="black.jpg" /></div> </div>
-
- エフェクトをかけたい外枠のdivは「position:relative;」指定する。
- その中に同じサイズの画像を
position:relative;
z-index:1
top:0;
left:0;で配置。
-
- div id="curtain"の部分も
position:relative;
z-index:2
top:0;
left:0;で配置。
こちらの中には同じサイズの真っ黒な画像が入っています。
- div id="curtain"の部分も
次に下記jsファイルを読み込む
slowDsp.js(すみません勝手に命名しましたw)
var yy=300; function slowDsp(){ if(yy>0){ yy=yy-1; document.getElementById('curtain').style.top=300-yy; document.getElementById('curtain').style.height=yy; setTimeout('slowDsp()',20); } }
【解説】
↓1行目から。画像を隠すための真っ黒画像の高さを記入。
(画像サイズは300*300)
slowDsp関数へ入って、
↓隠す画像サイズの高さが「0」以上の場合
↓その画像の高さを「1」小さくする
↓positionのtop指定に「1」を足す(表示上下に1pxズレる)
↓表示上の画像サイズを「1px」小さくする
※最後の部分。自分と同じ関数をもう一度呼び出しています。
ループと同じような処理になります。
こういった処理をおこなう関数を「再帰関数」と呼びます。
※「setTimeout('slowDsp()',20);」の20の部分は、20ミリ秒後に左の処理を行うという指定。
※画像サイズと書いてますが、本当は画像が置かれているdivのサイズを変換しています。
※ちなみに表示の仕方を変えることも可能。
例えば下から表示していく場合。
「document.getElementById('curtain').style.top=300-yy;」の1行を削除します。
スマートフォンサイトについて|メモ
メモ
jQuery Mobileデザイン入門
サンプル
http://webdesign.iinaa.net/study/practice/smartphone_site/
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1">
<div data-role="page" id="index" data-theme="b"> <div data-role="header"> <h1>ページタイトル</h1> </div> <div data-role="content"> <p>コンテンツ内容が入ります</p> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">Menu</li> <li><a href="#book8"><h3>ページリンク08</h3><p>ページ内容について</p></a></li> <li><a href="#book7"><h3>ページリンク07</h3><p>ページ内容について</p></a></li> <li><a href="#book6"><h3>ページリンク06</h3><p>ページ内容について</p></a></li> <li><a href="#book5"><h3>ページリンク05</h3><p>ページ内容について</p></a></li> <li><a href="#book4"><h3>ページリンク04</h3><p>ページ内容について</p></a></li> <li><a href="#book3"><h3>ページリンク03</h3><p>ページ内容について</p></a></li> <li><a href="#book2"><h3>ページリンク02</h3><p>ページ内容について</p></a></li> <li><a href="#book1"><h3>ページリンク01</h3><p>ページ内容について</p></a></li> </ul> </div> <div data-role="footer"> <h4>フッター表記</h4> </div> </div><!-- ▲page index end --> <div data-role="page" id="page08" data-theme="b"> <div data-role="header">…</div> <div data-role="content">…</div> <div data-role="footer">…</div> </div><!-- ▲page page08 end --> : :
おまけ1|Dreamweaver CS5.5 とスマートフォン
jQueryを活用したモバイル向けデザインの効率化(和訳付き)
※こちらのサイトで紹介されています。
http://all-web-blog.blogspot.com/2011/04/dreamweaver-cs55-adobetv.html
ブログを新規開設しました
現行ブログからこちらに移行できるまでの間、
こちらでは、
「WEBデザイン関係で気になったサイトや、画像、素材などを書き記すためのブログ」
にしようかなと考えています。たぶんデザインメモ的な扱いになると思います。
どうぞ、よろしくお願いいたします(^^)