ネットで検索をすると CSS のテクニックが山ほど公開されていますが、実際に商用サイトの制作をしていて個人的に利用する頻度が高いテクニックの BEST 5 をご紹介します。 ちょっと凝ったデザインのサイトをコーディングする時に、これらのテクニックに助けられることが多いです。どれも覚えておいて損はないものばかりです! IE6 でも min-height を使う 例えば、異なる高さのブロックを float しつつ底辺のラインを揃えたい時などに、「IE6 が min-height に対応していたら楽なのに!」と思うことがありますが、以下のテクニックを使えば IE6 でも min-height(相当)の適用が可能になります。 [CREAMU]CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 IE6 に mi
Web Performance Best Practices 下記、ウェブページのパフォーマンスを最適化するポイントをまとめたものです。 キャッシュの最適化 往復遅延時間を減らす HTTPリクエストを減らす ロードサイズを減らす レンダリングの最適化 関連書籍 1. Optimize caching キャッシュの最適化 ブラウザのキャッシュを活用 JavaScriptやCSSファイルや画像などのスタティックなリソースは、HTTPヘッダを使用してキャッシュをロードするようにします。 アドバイス スタティックなリソースは全て、積極的にキャッシュにセットします。 時々更新するリソースのキャッシュには、ファイルパスにフィンガープリントを埋め込みます。 IEでも確実にキャッシュされるように、Varyヘッダは削除します。 URLを自動生成している場合は、Fxのディスクキャッシュで使用している8文字のラ
今日は、Webサイトを作ったらまずやるべきことのチェックリストを紹介しましょう。サイトは作るまでも大切だけど、作ってからのアクションも同じかそれ以上に大切。 すでにサイトを運営している人は、やってないものがないか確認してみましょう。 サイト運営日記をスタートする(変更点を日付と一緒にメモしていく)XMLサイトマップを作って更新内容が含まれるようにするGoogleウェブマスターツールにサイトを登録する → https://www.google.com/webmasters/sitemaps/XMLサイトマップを登録するURLのwwwあり/なしの統一を指定するサイトリンクの表示をチェックして調整(以降随時)Yahoo!サイトエクスプローラーにサイトを登録してXMLサイトマップを登録する → http://siteexplorer.search.yahoo.co.jp/live Webmaste
2009年04月19日 知っておくと便利なYouTubeの隠しパラメータ10個まとめ カテゴリ:画像・動画 YouTubeのタグはそのまま使う場合、あまり機能的ではありません。しかしこれから紹介するパラメータを指定すると更に使い勝手が広がります。 ◆1:ハイクオリティ(以下HQ)動画を指定する 動画の語尾に以下をつけることにより、よりクオリティの高い動画を見ることが出来ます ‘&fmt=18′(stereo, 480 x 270 ) ‘&fmt=22′(stereo, 1280 x 720 ) 例:http://www.youtube.com/watch?v=v-dO8RP5M4E&fmt=18 http://www.youtube.com/watch?v=v-dO8RP5M4E&fmt=18 ※勿論、HQ動画そのものが存在しない動画はHQになりません。上記動画はHQ非対応 ◆2:サイト
Fun With CSS Shapes - Nettuts これは驚き!CSSだけで作れる吹き出しボックス。 次のような吹き出しが、画像を一切使わずにCSSだけで実現できてしまうようです。 HTMLコードをちょっと分かりやすいようにダイエットしてみたものが以下。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> blockquote {
When creating a web form you have to make a functional and visually aligned layout. The simplest way to do this is to place elements in a table or by fixing width of labels. Tables stretch its cells according to width of largest element in a column. That way you can have aligned form. Fixing label width will also also allow you to have a hard-coded but aligned form. But… But what if you don't want
8のjQueryのすごいTIPS 原文:8 awesome JQuery tips and tricks 微妙なTIPSもあるのですが、役に立つのもあるのでご紹介。 target="_blank" のリンクの作成 XHTML 1.0 Strict ではtarget=blank属性が利用できない。そこでjQueryを利用して別ウィンドウを開く方法を紹介しよう。 $('a[@rel$='external']').click(function(){ this.target = "_blank"; }); <a href="http://www.lepinskidesign.com.br/" rel="external">lepinskidesign.com.br</a> [to-R補足] 実際に利用する際はjavascript部分を$(function(){...})などで包む必要があります。[
最終更新日 Wed, 29 Apr 2009 01:29:41 +0900 最後のコメント Sun, 25 Jan 2015 19:08:17 +0900 最後のトラックバック Wed, 11 Mar 2009 15:49:00 +0900 ブックマーク 遅くなりましたが、先日に開催された、Kanasan.JS Greasemonkey チュートリアル読書会のレポートです。 せっかくなので、読書会の内容を元にGreasemonkeyスクリプト作成の「入門」「実践」「Tips」の3本立てでまとめてみたいと思います。 今回の開催はKanasan.JSの主催をkanasanから引き継いで、初めての開催ということもあり、とても緊張しました。 途中までは無難に進んでいたのですが、後半は段取り不足が出てきた感じでした。参加者の方々にはご迷惑をお掛けしました。 Greasemonkey チュートリアル読
独習PHP 第3版 手を動かしながら学ぶPHP7。基本構文から、クラス、DB連携、セキュリティ対策まで。解説、例題、練習問題の3ステップでよくわかる。基礎からオブジェクト指向まで学べる定番入門書。 PHP逆引きレシピ 第2版 (PROGRAMMER’S RECiPE) 第2版では、最新のPHP(5.4/5.5)に対応したほか、レシピ全体の大幅な見直しを行い、データベースやテスト関連のレシピ拡充など、さらに内容充実・より便利になりました。サンプルプログラムのスマートフォン対応も行っています。実践で即役立つテクニックと開発ノウハウ、つまづきやすい・ハマりやすいポイントを徹底解説した「PHPユーザー必携の1冊」です。 PHPの絵本 第2版 Webアプリ作りが楽しくなる新しい9つの扉 HPは、さまざまなWebアプリケーションが簡単に作れそうなので、興味のある人は多いのではないでしょうか。本書は、イ
こんにちは。ブログと検索を担当している河野です。 突然ですが、皆さんは404という数字を見て何を思い浮かべるでしょうか。 この数字からWebブラウザで時折見かける「404 Not Found」を思い出す人は多いのではないかと思います。ということで、ちょっと強引ですが、今回はこの404などのHTTPステータスコードについて、ディレクターの視点で知っていた方がいいことを書いてみたいと思います。 【1】HTTPステータスコードの定義と確認方法 まずはHTTPステータスコードについて一通り説明をしたいと思います。 HTTP ステータスコードとは、「HTTPにおいてWebサーバからのレスポンスの意味を表現する3桁の数字からなるコード」とWikipediaには定義されています。 冒頭であげた404は、このステータスコードの1つで、リクエストに対応するページやファイルを見つけられなかった時にサーバが返し
引用元:web制作板 545 名前:Name_Not_Found[sage]投稿日:03/10/20 20:13 ID:??? 初心者向け ■はじめてのWEBドキュメント作り http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ ■初めてのホームページ講座 http://www.hajimeteno.ne.jp/index.html ■30分間HTML入門 http://kanzaki.com/docs/html/lesson1.html ■ISMT HOME 〜 メモ帳で作る超初心者のHP作成講座 〜 http://ismt.cside.com/ ■趣味のWebデザイン http://deztec.jp/design/index.html HTML/WWW解説 ■好ましいHTML文書を書くための方法と考え方 http://www.asahi-net.
みたいなタイトルの記事を Digg 経由で発見。チートシート代わりにと思い超訳。*1 A Software Architect PHP 最適化 ベストプラクティス! 01. static にできるメソッドは static として宣言しよう。(4倍速い) 02. echo の方が print より速い。 03. echo '文','字'; (カンマ区切り)の方が、'文'.'字' (ドット連結)より速い。 04. ループの最大値は、ループ「内」ではなく「前」にセットしておこう。 05. 大きい配列のような変数は unset() してメモリを解放しよう。 06. マジックメソッド(例: __get, __set, __autoload)は使用を避けよう。 07. require_once はハイコストなのです。 08. include や require でファイルはフルパスで指定しよう。 09
「a href」を使用したリンク箇所のアイコンを、リンク先やmailtoやPDF・画像などそれぞれごとにアイコンを変更するスタイルシートのサンプル紹介です。 外部リンクでアイコンを変更する場合 a[href^="http://"]{ background:transparent url(../images/external.png) center rightright no-repeat; display:inline-block; padding-right:15px; } 判別する箇所のサンプル -mailto a[href^="mailto:"] 判別する箇所のサンプル -PDF a[href$='.pdf'] 判別する箇所のサンプル -圧縮ファイル a[href$='.zip'], a[href$='.rar'], a[href$='.gzip'] 判別する箇所のサンプル -画像
毎度おなじみ Google Operating System さんがまたまた便利そうな Tips を掲載していたので、本日はそれをご紹介します。 Gmail で MP3 が添付されていた際に使われる Flash ベースの MP3 プレイヤーを自分のサイトでも使ってしまおうというものです。 http://googlesystem.blogspot.com/2007/07/listen-to-mp3-files-online-using.html どうやらこの MP3 プレイヤーは単体で動作するようになっているらしく、再生したい MP3 ファイルの URL をパラメータに指定してページに埋め込むだけでバッチリ動作してしまいます。実際の利用方法は以下。 組み込み方法はとても簡単。以下の HTML をページに挿入するだけです。 <embed type="application/x-shockwav
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く