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を提供し、古いブラウザではソリッドに機能させます。 開発をシンプルにするために、堅実なテンプレートを利用しましょう。 動作が安定しているスタンダードにフォーカスを合わせて制作する。 スタ
HTML5＋CSS3の「カンタン装飾設定」で今風デザイン
基本的にグラデーションや角丸はジェネレータからコピペして設定できるので、作業自体は簡単です。HTML5＋CSS3サンプルを使って表現してみましょう。 （1）装飾のキモは「グラデーション・線・角丸・影・テクスチャー」 前回HTML5＋CSS3の「レイアウトを自在に使いこなす」では、限られたいくつかのCSSプロパティを組み合わせて、さまざまなレイアウトができることをお見せしましたが、今回はそれに装飾を加えていきます。 いざ装飾しようとすると、どこから手を付ければ良いのか迷ってしまうかもしれませんが、アイコンなどの絵を除けば、装飾の要素は「グラデーション」「線」「角丸」「影」「テクスチャー」くらいなものです。それらを整理して組み合わせることで、全体として一体感のあるデザインに仕上げられます。 「それが難しいんだよ！」というお叱りの声が聞こえてきそうですが（笑）、以下の2つを見比べてみましょう。上
HTML5を使った超クールなフリーのWordPressテーマ集35:phpspot開発日誌
35 Free HTML5 WordPress Themes For Your Blog | Free and Useful Online Resources for Designers and Developers HTML5を使ったフリーのWordPressテーマ集35。 良い感じのテーマが集まっています。ぼちぼち今のテーマにも飽きて、もう、これからはHTML5だぜ、という方は試してみても良いかも。 関連エントリ 30以上のリッチコンポーネントが詰まったHTML5のUIライブラリ「Zebra」 HTML5を使ったクールなサイトデザイン集２１ クールでアニメーションするグラフを描画できるHTML5チャートライブラリ「Chart.js」 WebCamで撮影をHTML5で実現するデモ HTML5のゲームエンジン「Quintus」 フリーでHTML5ベースのリッチな管理画面テンプレート オープ
パララックスエフェクトの基本
jQueryをメインにHTML5やCSS3を使ったリッチな表現のためのテクニックを紹介。まずはパララックスエフェクトの基本から。 Webサイトの55％で利用されているjQuery はじめまして。クラスメソッドのフロントエンドエンジニア、山田です。「jQuery×HTML5×CSS3を真面目に勉強」という連載をスタートします。 2005年2月にGoogle mapsが登場して以来、Web開発者の間でJavaScriptの株は上昇の一途をたどっています。その勢いはとどまることを知らず、リッチなWebコンテンツを作るには、Flashをはじめとしたプラグインに頼るという、それまでの常識をすっかり覆してしまいました。 さらに、HTML5やCSS3も登場し、各ベンダのブラウザがWeb標準の仕様に合わせて実装の足並みを揃え始めるなど、プラグインに頼らずともリッチなUIのWebコンテンツを少ない手間で作れ
わずか数秒で自分用のHTML5のテンプレート一式を作成するオンラインサービス -Initializr
HTML5でサイトを作成する時に必要なHTML5の雛形、jQuery, Modernizrなどのスクリプト、CSSのリセットなど一式を自分用にカスタマイズして作成できるオンラインサービスを紹介します。 Initializr - Start your HTML5 project in 15 seconds! [ad#ad-2] InitializrでHTML5のテンプレート一式を作成する方法 HTML5用のテンプレート一式を作成するのは、わずか数秒で簡単にできます。 トップページにアクセスし、4つの選択項目から自分の必要なものをチェックし、最後に「Download」をクリックするだけです。 Initializr - Start your HTML5 project in 15 seconds! 選択項目のキャプチャ [ad#ad-2] Initializrで作成されるHTML5のテンプレート
hanatoweb.jp - このウェブサイトは販売用です！ - hanatoweb リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
HTML5 × CSS3 × jQueryを真面目に勉強 – #12 Pinterest風グリッドレイアウトを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPinterest(ぴんたれすと)。従来のグリッド式レイアウトのように高さが均一のグリッドが整然と並べられているのと違い、異なる高さのグリッドが画面いっぱいに敷き詰められているレイアウトが特徴的でオサレです。（※こういったレイアウトはピンボード風と呼べば良いのでしょうか…？） Pinterest Pinterest とはピンボード風の写真共有のソーシャル・ネットワーキング・サービス。特に女性に人気がある。ウェブサイトとアプリはテーマに基づいて写真のコレクションを作ることが出来る。サイトのミッションステートメントは「面白いと感じるものを通じて世界全員をつなぐ」。アメリカ Palo Alto にある Cold Brew Labs によって運営されている。 Wikipediaより引用(http://ja.wikipedia.org/wiki/Pinteres
3 Cool Techniques For Your Next Web Design Project
2017年3月27日 CSS, jQuery, Webサイト制作 Webデザインの勉強を始めたという方によく質問されるのが、「どうやって勉強すればいいですか？」。私はWeb制作の学校の学生だった頃から実践しているふたつの事があります。素敵だなって思えるWebサイトを見つけたら、どのように作られているのか自分なりに分析してみること。そしてそこで使われている技を実際に試してみること。そこで今日は最近見かけた素敵Webサイトと、そのサイトで使われていた技術を解説してみたいと思います！ ↑私が10年以上利用している会計ソフト！ 準備：分析＆実践に役立つツール Chrome、Safariなら付属のデベロッパーツール ChromeとSafariならブラウザーにはじめからデベロッパーツールなる開発のためのツールがついています。私が愛用しているのはこのツール。表示しているWebページのHTMLやCSSが確
H2O Blog., Googleが推奨しているのは、レスポンシブ・ウェブデザインではない！？
先日、Googleが発表した『Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法』は、Web業界に衝撃をもたらしました。 レスポンシブ・ウェブデザイン（RWD）を「推奨」すると明記してあり、いわゆる「専用サイト」を全否定するような内容にも取れました。 これで、スマートフォンのサイト対策はRWD一択のように受け取られてしまった方もいることでしょう。しかし、ここで勘違いしてはならないのは、「RWD=レイアウトが解像度でダイナミックに変化する手法」 のことではないということ。 実は、日本語版のブログでは内容の一部しか翻訳されておらず、詳しくは原文にリンクがされています。 Building Smartphone-Optimized Websites また、こちらのサイトなどが、エントリーの元になったセミナーの内容などを元に詳しく解説をされています。 スマートフォン向けサイ
あなたは大丈夫？ 隠しテキストとキーワードの乱用はペンギン・アップデートの餌食に | 海外&国内SEO情報ウォッチ | Web担当者Forum
海外のSEO/SEM情報を日本語でピックアップあなたは大丈夫？ 隠しテキストとキーワードの乱用はペンギン・アップデートの餌食に ★★★★☆ 悪意がなくても危険 （SEO Braintrust）ペンギン・アップデートでウェブスパムと判定されたと思われ順位を大きく落とした6つのサイトを分析した記事だ。知る人ぞ知る、米国のSEOエキスパートのダン・シーズ氏によるものだが、次のようなスパムの痕跡を発見できたそうだ。 隠しテキスト ―― 検索エンジンをだます意図があるなしにかかわらず、明らかに隠されているテキスト alt属性とtitle属性の乱用 ―― 画像のalt属性と、画像またはリンク（aタグ）のtitle属性に詰め込んだキーワード フッターリンク ―― フッター部分に設置したキーワードリンクの塊。多くのケースでは小さかったり灰色だったりユーザーが気づかないようにしていた。 偽装リンク ―― マ
スマートフォンに最適なウェブサイトガイドライン | アユダンテ株式会社
※この記事は英語文書を翻訳したものです。 Building Smartphone-Optimized Websites – Webmasters — Google Developers （訳者 2014/7/1追記：Googleのスマートフォンサイトの移行ガイドラインを元にしたスマホサイトの移行のポイントも合わせてご参考ください。） Googleがサポートするスマートフォンに最適なサイトの構成は以下の三通りあります。 【Google推奨】レスポンシブウェブデザイン。 これは、すべてのデバイスに同じURLを用いて、各URLにアクセスするとすべてのデバイスに同じHTMLが送信され、CSSのみを用いて各デバイスでページをどのように表示するか決める方法です。 ユーザーエージェントによるデバイスごとの出し分け。 これは、すべてのデバイスに同じURLを用いますが、各URLにアクセスすると各デバイスごと
レスポンシブWebデザインとは (1/5)
スマートフォンやタブレット、PCなどあらゆるデバイスに対応する制作手法として注目されている「レスポンシブWebデザイン」。レスポンシブWebデザインの概念からサイト制作の基本まで、レスポンシブWebデザインによる制作案件を数多くこなす菊池 崇氏が解説します。（編集部） 本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。さらに、解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。 レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック 定価：2,625円 (本体2,500円)／形態：B5変 (232ページ) ISBN：978-4-04-886323-0 レスポンシブWebデザイン（Responsive Web Design）
HTML5とSEOについて「HTML5とか勉強会」で話してきました。 by @tsuj
HTML5とSEOについて「HTML5とか勉強会」で話してきました。 HTML5とSEOの関係についてまとめました。現段階ではあまり意味ありませんが、今後を考えるとHTML5のnav、aside、section等による論理構造化、セマンテック化はSEOに大きく影響する可能性が高い重要な事です。 4月25日に開催された、HTML5とか勉強会の第29回、「HTML5ビジネス最前線（B2C編）」のパネルディスカッションにパネラーとして参加しました。 HTML5とか勉強会は、HTML5の世界で高名な白石俊平さんが主催されている勉強会で、申し込み開始してもあっという間に100名以上が申し込んで満席になってしまう人気の勉強会です。 HTML5は私も勉強したいテーマですので、何度も申し込もうとしていましたが毎回撃沈。それを裏口参加(?)できただけでも嬉しいものでした。 私が参加した第28回は「HTML5
『ペンギン・アップデート情報：ペンギンは不自然リンクを嫌う』::海外＆国内SEO情報ウォッチ
Web担当者Forumの連載コーナー、「海外&国内SEO情報ウォッチ」を更新しました。 第143回エントリのピックアップは次のとおりです。 注目ピックアップ記事 ペンギン・アップデート情報：ペンギンは不自然リンクを嫌う 国内SEO関連 ペンギン・アップデートのカギはウェブマスター向けガイドラインにあり 不自然リンク警告ペナルティの解毒薬はナチュラルリンク グーグル社員が解説、「再審査リクエストにまつわる 3つの誤解」 ウェブマスターツールでデータ参照期間が90日に延長 海外SEO関連 あなたは大丈夫？ 隠しテキストとキーワードの乱用はペンギン・アップデートの餌食に グーグルが公式にレスポンシブ・ウェブデザインを推奨！？ 【グーグル公式】画像検索最適化のコツ HTML5を使え！ グーグルが定めるHTML&CSSコーディング テキストの画像置換よりウェブフォントをオススメ 海外SEO情報ブログ
美しい横メニューの作り方
<ul id="menu"> <li><a href="#">html</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Perl</a></li> </ul> HTMLは最後まで変更しません。 #menu { width:530px; padding:0; margin:0; list-style-type: none; } #menu li { width:20%; float:left; padding:0; margin:0; text-align:center; } #menu li a { width:auto; color:#fff; font-size:12px; font-weight:
Google HTML/CSS Style Guide
Revision 2.1 This style guide contains many details that are initially hidden from view. They are marked by the triangle icon, which you see here on your left. Click it now. You should see “Hooray” appear below. Hooray! Now you know you can expand points to get more details. Alternatively, there’s a “toggle all” at the top of this document. This document defines formatting and style rules for HTML
吹き出し風CSSデザインをオープンソースで·CSS Arrow Please MOONGIFT
CSS Arrow PleaseはCSSだけで作成する吹き出しデザインをオンライン上で行えるサービスです。 Twitterをはじめコミュニケーションが基本のサービスで欲しくなるのが吹き出し風のデザインです。そんなデザインをオンラインで簡単に作成できるのがCSS Arrow Pleaseです。 トップページです。左に描かれている吹き出しデザインが右側のCSSで作成されています。 吹き出しの位置は上下左右から選べます。 色はカラーピッカーを使って自由に選択できます。 カスタマイズしたパターンです。 CSS Arrow Pleaseでは吹き出しの配置や色、線の太さなどを自由にカスタマイズできます。後は出来上がったスタイルをコピーして自分のサイトに組み込むだけです。 CSS Arrow PleaseはHTML/CSS製のオープンソース・ソフトウェア（MIT License）です。 MOONGIFT
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webデザインギャラリー・参考サイト集｜MUUUUU.ORG
東京渋谷 “HTML5入門＆jQuery” 勉強会(5/26)の資料を公開します | tonowp
http://phonegap.com/
