http://w.atwiki.jp/designmemo/ design-memo ja 2008-01-08T19:13:54+09:00 1199787234 https://w.atwiki.jp/designmemo/pages/29.html *無料ソフト/eclipse（エクリプス） #ls(無料ソフト/eclipse) **eclipseとは JAVA開発に長けたオープンソース（つまり無料！）の開発環境。 まずはeclipse本体をダウンロードして、eclipseに対応した「プラグイン」というものを 好みに合わせてどんどん追加していくことが出来ます。 [[html]]エディタプラグインをいれるとhtml作成環境のできあがり。 インストールの仕方とかはそのうち～。 参考リンク： -[[eclipse@Wiki>http://www10.atwiki.jp/eclipse/]] 2008-01-08T19:13:54+09:00 1199787234 https://w.atwiki.jp/designmemo/pages/28.html &topicpath(top=トップ) *無料ソフト #ls(無料ソフト) 2008-01-08T19:07:57+09:00 1199786877 https://w.atwiki.jp/designmemo/pages/27.html *テーブルレイアウトと[[スタイルシート]]を利用したレイアウトの違い #ls(テーブルレイアウトと[[スタイルシート]]を利用したレイアウトの違い) 数年前までは主流だったテーブルレイアウト。 本来”&bold(){表}”などを記載するための<table>タグをレイアウトするために使用する方法。 -[[html]]本来の仕様には逆らった使い方であること -[[html]]が複雑になるため、管理に向かないこと より、&bold(){構造はhtml、装飾（レイアウト）はcssへ分離する}[[スタイルシート]]を利用したレイアウト方法が主流になってきた。 #html2(){{{{{{ <table> <thead> <tr> <th>テーブルレイアウト</th> <th>スタイルシートを利用したレイアウト</th> </tr> </thead> <tbody> <tr> <td><img src="http://www29.atwiki.jp/designmemo?cmd=upload&act=open&pageid=20&file=table.gif" /></td> <td><img src="http://www29.atwiki.jp/designmemo?cmd=upload&act=open&pageid=20&file=css.gif" /></td> </tr> </tbody> </table> }}}}}} 上記のような記述で、同じレイアウトが表現できる。 #image(http://www29.atwiki.jp/designmemo?cmd=upload&act=open&pageid=20&file=tableLayout.gif) （点線はテーブルレイアウトの際の構造） 2007-12-10T06:47:18+09:00 1197236838 https://w.atwiki.jp/designmemo/pages/26.html *JavaScript/IEでpngを表示 #navi(JavaScript/IEでpngを表示) 透過png未対応ブラウザ（IE）で透過表現する。 *ダウンロード -[[http://www.isella.com/aod2/js/iepngfix.js]] *参考記事 -[[透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる>http://www.designwalker.com/2006/12/transparent-png2.html]] 　CSS（[[スタイルシート]]）でPNGファイルをバックグラウンド指定してるクラスやIDに以下の一行を追加。 　* html &color(red){&bold(){.iepngfix}} { behavior: expression(IEPNGFIX.fix(this)); } 　（&color(red){&bold(){赤字}}の部分はPNG画像を指定したクラス名、もしくはID名を） 2007-12-10T06:48:06+09:00 1197236886 https://w.atwiki.jp/designmemo/pages/25.html *Lightbox #navi(Lightbox) 複数の写真をサムネイルから詳細表示するライブラリ。 スライドショーも可。 -[[http://www.huddletogether.com/projects/lightbox2/]] 2007-12-10T06:47:51+09:00 1197236871 https://w.atwiki.jp/designmemo/pages/24.html &topicpath(top=トップ) *スタイルシート/Q&A #ls(スタイルシート/Q&A) 2007-11-14T14:08:52+09:00 1195016932 https://w.atwiki.jp/designmemo/pages/23.html &topicpath(top=トップ) *Q&A-ブラウザごとに表示が違う時は？ **全ての余白をリセットしてみる。 *{padding:0;margin:0;} 「*」で全ての要素に対して、余白、マージンを0にリセットする方法。「padding:0;margin:0;」 ブラウザごとに違うデフォルトの余白をリセットするのに使います。 ただ、上記の方法だと、余白があった方が便利な要素の余白まで消えてしまいます。 それが気になる場合は、 body,[[html]],ul,ol{padding:0;margin:0;} のように要素ごとに設定します。 **paddingとmarginを同時に指定しないようにする。 よく言われるもので、１つの要素にpaddingとmarginを同時に指定した場合 -「要素の内側に余白がつく解釈のブラウザ」･･･firefoxなど -「余白分要素が大きくなってしまう解釈のブラウザ」･･･IE6,IE7など があります。 &bold(){paddingとmarginを同時に指定しないようにする}のが簡単な回避方法。 どうしても同時に指定したい場合は、IE系のみに動作するような[[cssハック>スタイルシート/ハック]]を使うことでも表示の違いを避けられます。 2007-11-14T14:24:36+09:00 1195017876 https://w.atwiki.jp/designmemo/pages/22.html *無料ソフト/ウェブサイト作成支援ツール #ls(無料ソフト/ウェブサイト作成支援ツール) **htmlが編集しやすいテキストエディタ windows付属の「メモ帳」だと文字コードとか改行コードの不自由さから 文字化けが起こったりして使いにくいので、下にあるようなエディタを入れておくと便利っす。 -[[ez-HTML>http://www.vector.co.jp/magazine/softnews/010725/n0107252.html]] >予約語やコメントの色分け表示で、Perl、C、Java、Delphiなどの言語の編集に対応するMDI形式のテキストエディタ。テキストエディタとしての充実した機能に加え、ソフト名の通り、HTMLの編集に適した機能を数多く備えているのが特徴だ。 -[[K2Editor>http://www.forest.impress.co.jp/lib/offc/document/txteditor/k2editor.html]] >正規表現を用いてテキストの色分け表示ができるフリーのテキストエディター。正規表現を用いることで、HTMLのタグなど複雑なパターンをもつ文字列でも自由に色分け表示できるようになる。文字列の検索や置換にも正規表現を利用できるため、“プレイヤー”“プレーヤー”など、厳密には異なる文字列を同時に検索・置換することも可能だ。 2008-01-08T19:07:23+09:00 1199786843 https://w.atwiki.jp/designmemo/pages/21.html *無料素材 #ls(無料素材) -[[広告戦隊アドレンジャー(http://www.adranger.net/)>http://www.adranger.net/]] 2007-12-10T06:48:23+09:00 1197236903 https://w.atwiki.jp/designmemo/pages/20.html *スタイルシート入門 #ls(スタイルシート/スタイルシート入門) 2007-12-10T06:47:27+09:00 1197236847