General General hints and tips that don't fall in to any category.
Secrets of the Browser Developer Tools
General General hints and tips that don't fall in to any category.
IEの古いバージョンをサポートしつつ、モダンブラウザ用のサイトを制作する時の20のアドバイス
Microsoft公式のIEのデベロッパサイト「modern.IE」から、古いブラウザをサポートしつつモダンブラウザ用のサイトを制作する時に役立つアドバイスをクロスブラウザの観点や、HTML, CSS, JavaScriptの実装時ごとに紹介します。 20 tips for building modern sites while supporting old versions of IE 下記は、各ポイントを意訳したものです。 クロスブラウザ HTML CSS JavaScript クロスブラウザ ウェブサイトはすべてのブラウザで同じように見える必要はありません。 例えば、最新のブラウザではよりリッチなUIを提供し、古いブラウザではソリッドに機能させます。 開発をシンプルにするために、堅実なテンプレートを利用しましょう。 動作が安定しているスタンダードにフォーカスを合わせて制作する。 スタ
Frontend rescue: how to keep up to date on frontend technologies | frontendrescue.org
This it gets much easier to stay updated through regular consumption provided by trusted sources. Some of the ways to do this are reading blogs, following industry experts through social media platforms, and newsletter subscriptions. In such a way, the more experienced developers share their view on what is happening with new emerging tools and thus help others to filter the information. These pla
今更ながらみんな大好き（？）「lightbox」プラグインを集めてみました - Webデザイン初心者向けのあれこれ
風邪引いてしんどい…僕です。 登場から数年、すっかりお馴染みとなった「lightbox」。 この数年の間に様々な派生プラグインが出ました。 今回は、そのいくつかを紹介していきたいと思います。 1.ColorBox 2.fancyBox 3.prettyPhoto 4.jQuery.popeye 2.1 5.Shadowbox.js（商用利用は有料） http://www.tripwiremagazine.com/2012/07/jquery-lightbox-plugins.html 他にも、こちらのサイト（英語）で沢山のlightboxライブラリが紹介されていますので、気になった方はこちらもどうぞ。 それでは、体調がすぐれないのでこの辺で…m(_ _)m
Tell CSS that JavaScript is available ASAP | 456 Berea Street
When you’re styling parts of a web page that will look and work differently depending on whether JavaScript is available or not, it can be very useful to use JavaScript to change or add a class name to the html element. By doing this you can create CSS rules that will only be applied when JS is available and vice versa. The trick is to make sure the class names are switched as early as possible du
レスポンシブWebデザインのウェブサイトを半年運営してみて思ったこと
昨年2011年10月に仕事で運営に携わっている大学ウェブサイトでレスポンシブWebデザイン (しかもフル可変グリッドレイアウト) を導入して、はや半年。約6ヶ月間、レスポンシブWebデザイン（RWD）で制作したウェブサイトを運営してみて思ったことをまとめてみました。これからレスポンシブWebデザインを導入したいと考えている方の参考になれば幸いです。 プロジェクトの概要 大学のウェブサイトをリニューアルするにあたり、さまざまな状況や制限などを考慮、また、今後3〜5年を見据えて、レスポンシブWebデザインを取り入れた制作を行いました。大学公式ブログでもリニューアルについて紹介しているので、ぜひそちらもご覧ください。そこで書いたように、以下のような思いもあり、このリニューアルを行いました： 今回、新しい試みを行った背景には、このウェブサイトが「大学のウェブサイト」であることが大きな要因の一つとし
2130703450443574201?keyword=HTML5
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
HTML5やCSS3などの大まかな概要を1ページ内に詰め込んだHTML5 Poster - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 地味に便利かなと思ったのでシェア。 HTML5やCSS3の概要、このタグで 何が出来るのか、等の情報を1ページ に詰め込んであり、mozillaのドキュメント ページにサクッと飛べるようにしてあり ますので、大雑把ですけどチートシート 的に使えそうです。 その場でデモも確認出来るものもあるので今まで興味がなかった方も興味が出るかも。 mozillaのデモの1つでHTML5の概要を簡単に教えてくれるコンテンツです。 大まかですけど主要な情報が詰まってる印象なのでHTML5やCSS3の簡易的なチートシートになりそう。 マウスを乗せるとHTML5製のビデオが出てきたり。 CSS3もあります。 JavaScriptはHTML5では必須になりそうですね・・ githubで公開
踏まえておきたい、ウェブ制作・開発にフレームワークを使う際の長所と短所
現在、JavaScript, CSS, PHPなど数多くのフレームワークがリリースされており、ウェブ制作・開発に利用している人もたくさんいると思います。 それらのフレームワークを実際に利用するときに、踏まえておきたい長所と短所を紹介します。 Pros And Cons Of Using Frameworks [ad#ad-2] 下記は各ポイント意訳したものです。 はじめに ウェブ制作にフレームワークを使う長所 ウェブ制作にフレームワークを使う短所 ウェブ制作に役立つフレームワーク集 はじめに 近道があるのに、なぜ毎日同じことをする必要があるのか問いただすべきです。フレームワークはあなたの作業をより速く、より簡単に助ける近道である、と考えてください。ここで「より良く」というキーワードを含めなかったのは、より速くより簡単ということが常に良いことを意味するものではないといことです。 まず、フレー
PCはもちろん、iPhone、Androidにも対応しているスライドショーのライブラリ「PhotoSwipe」 - 強火で進め
1つのHTMLでPC、iPhone、Android、BlackBerryに対応するスライドショーを作成出来るライブラリ。 PhotoSwipe from Computerlovers on Vimeo. PhotoSwipe http://www.photoswipe.com/ 読み込むファイルは以下の3つ。 <script type="text/javascript" src="simple-inheritance.min.js"></script> <script type="text/javascript" src="code-photoswipe-1.0.9.min.js"></script> <link rel="stylesheet" type="text/css" href="photoswipe.css" /> HTMLの記述は以下。 <div id="Gallery">
XRAY :: for web developers
These materials are copyright Western Civilisation Pty Ltd. www.westciv.com They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses. Please see our website for detailed copyright information or contact us [email protected]. XRAY: look beneath the skin XRAY is a bookmarklet for Internet Explorer 6+, and Webkit and Mozilla based browsers (inc
コーダーが気にしちゃうことバトン | Takazudo Clipping*
前回のエントリをバトンにしない？と言われたので、答えられそうな話題にしぼってバトンってことにしてみました。 エディタは何使ってますか？ 高さ揃えるとか、なりで広がるとかいうところに関してtableを使いますか？JavaScriptを使いますか？ ブラウザごとのCSSバグ対処方法はどうしてますか？ 画像置換についてどう思いますか？ 印刷についてどうしてますか？ スクリーンリーダーにて確認などはしますか？ IE7のズーム機能について、対応させていますか？ JavaScriptライブラリのライセンスについてクライアントに説明しますか？ JavaScriptのフレームワークを使いますか？使っている場合は何を使っていますか？ CSSやJavaScriptの圧縮をしていますか？ コーディングにかける時間はどのくらいでしょうか？ あなたのコーディングのこだわりはコレ！みたいなものがあれば。 「コーディン
WEBデザイナ/開発者が覚えておくと便利なブックマークレット集:phpspot開発日誌
15 Must-Have Bookmarklets For Web Designers And Developers WEBデザイナ/開発者が覚えておくと便利なブックマークレット集。 起動すると、その場で画像などの要素をドラッグ＆ドロップでデザインできたりする便利なブックマークレット集です。 ReCSS - Reloads The CSS 起動すると、サイトのＣＳＳが再読込みされ、リロードすることなく見栄えの更新ができる Edit Any Website - ブックマークレット XRAY - See Details Of Any Web Element 起動するとJavaScript製のＤＯＭインスペクタが起動します。 MRI 起動してエレメントをクリックすると、クリックしたエレメントのセレクタが取得可能。 Design - Grid-Rule-Unit-Crosshair 起動すると、4
CSSとPHPできれいなグラフを描く方法 | SIMPLE*SIMPLE
terrill.caにてCSSとPHPできれいなグラフを描く方法が紹介されていました。 » terrill.ca | Vertical Bar Graphs using CSS and PHP 棒グラフや立体グラフなどがCSSのスタイルで描けます。PHPはデータの抽出と縮尺の設定だけなので、必要でない方は紹介されているCSSだけ使っても良いかも。 ↓なグラフや、 ↓なグラフが描けます。 なお、HTMLのほうの記述は以下のような感じです。わかりやすいですね。変更も簡単かと。 <ul class="barGraph"> <li class="p1" style="height: 57px; left: 0px;">57</li> <li class="p2" style="height: 27px; left: 0px;">27</li> <li class="p3" style="heigh
JavaScriptを使わずCSSのみでシンプルなツールチップ実装:phpspot開発日誌
Easy CSS Tooltip | Kollermedia.at JavaScriptを使わずCSSのみでシンプルなツールチップ実装。 CSSの a:hover を応用して、次のようにシンプルなツールチップを実装するサンプル。 コードは以下のようにシンプルにかけます。 <html> <head> </head> <style> a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/ a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;} a.tooltip:hover span{display:inline; position:absolute; background:#fffff
コードのシンタックスハイライトをリアルタイムで行うjavascript「CodePress」
twitter facebook hatena google pocket コードを要素などに応じて色分けするのをシンタックスハイライトといいます。 制作物を公開する際に、わかりやすく表示することができます。 CodePressは、単純にハイライト表示するだけでなく、書き込んだコードもリアルタイムで色を付けてくれます。 sponsors 使用方法 CodePressからzipファイルをダウンロードし、全てアップロードします。 そして以下を記述すれば完成です。 <script type="text/javascript" src="http://yourdomain/codepress/codepress.js"></script> <textarea id="id名" class="codepress 言語"> 言語にはHTML、CSS、JavaScript、Perl、PHP、java、s
マークアップエンジニアはどこへ向かうべきか（を考えてたらカッとなって LL の資料公開） - IT戦記
はじめに このエントリはマークアップエンジニアに対する批判ではありません。不快な想いをした方がいましたら、申し訳ありません。 きっかけ ライブドア & サイボウズラボの数人でお昼ご飯を食べにいって、いろいろ話しながら考えたことを昼食後に Twitter に書き込みました。 濃い昼飯だた、(X)HTML+CSS しか出来ない人は真剣に第二の何かを探したほうがいいと思た。(X)HTML+CSS ではもうこれ以上すごいと呼ばれる人なんて増えないと思う。 http://twitter.com/amachang/statuses/191256222 「CSS 道」は道が短すぎるんだ。マーケティングの為に長く見せてるけど、実際覚えることは少ない。「デザイン」か「JavaScript」を職業に出来るくらいにしとかないとヤバいと思う。 http://twitter.com/amachang/statuse
一番簡単な画像置換の方法-imageReplace.js--とあるWEBクリエイターのblog
一番簡単な画像置換の方法-imageReplace.js- 画像置換は設置がややこしく。 デメリット・メリットの切り分けが困難です。 そんなわけで一番簡単な画像置換の方法として、画像置換javascriptライブラリ-imageReplace.js-を作ってみました。 設定は簡単head要素内にimageReplace.jsを読み込むだけ。 <script type="text/javascript" src="./imageReplace.js"></script> あとは、画像置換したい要素にclass属性に『imageReplace』と記述しスペースを空けて『置換する画像名』、『ロールオーバーする画像名』を記述します。 例えばこんな感じに。 <a class="imageReplace ajax_a.gif ajax_b.gif" href="/ajax/">Ajax</a> 『ロー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sign PDF Documents | DocHub
ハイパフォーマンス Web サイト フロントエンドのパフォーマンスの重要性
