au one netのブログサービス 『LOVELOG』は2014年6月30日をもちまして提供を終了致しました。 永らくのご利用、誠にありがとうございました。 引き続きau one netをご愛顧いただきますよう、よろしくお願い申し上げます。 ※お手数ではございますが、新ブログにて閲覧の皆さま向けにブログURL変更等をご周知いただけますよう、お願い申し上げます。
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
「モバイルファースト」というキーワードをご存知だろうか。その名の通り、まずモバイルサイトを中心にコンテンツを考え、PCなど他のデバイスへと対応させていく考えだが、その本当の意味を勘違いしている人も多いようだ。 スマートフォンの登場で注目を集めているモバイルファーストでは、「ワンソースから各デバイスに対応していく考え方」がポイントになる。そのとき重要になるのが、コンテンツを一元管理できるマルチデバイス対応CMSの存在だ。 この記事では、Webサイト制作現場だけでなく、企業Web戦略の面でも重要な意味を持つ、モバイルファーストの基本について解説する。 スマートフォンの普及で見直しが迫られるPCサイトスマートフォンの普及が加速している。ケータイキャリアのプロモーションや新製品ラインナップを見れば、これは当然の流れだろう。インターネットにアクセス可能なデバイスとして見ると、PC、フィーチャーフォン
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into
以下は、ウェブアプリケーションを作成する際に、必要になりそうな技術仕様の一覧です。 HTML5から追加・標準化されたAPI(Application Programming Interface)が中心ですが、それ以外の関連仕様も含まれています。
jQuery Mobileの採用が国内でも進んでいる。jQuery Mobileは、iPhone/Android、WindowsPhoneやBlackBerryなど、主要なスマートフォンに対応したUIフレームワーク。HTMLに簡単な記述を追加するだけで、スマートフォンに最適化したサイトやWebアプリケーションを制作できる、注目のフレームワークだ。 昨年11月には、待望の「jQuery Mobile 1.0」正式版がリリースされ、実務でも本格的に利用しやすくなった。今後、ますます増えそうなjQuery Mobileを使ったスマートフォンサイトの事例をチェックしておこう。 ※商品紹介/キャンペーンサイトに、「太鼓の達人学園(太鼓の達人×AKB48キャンペーンサイト)」を追加しました。(2012年3月1日16時更新) ※ネットサービスに、「一休.com」「recbike」を追加しました。(201
はじめに 今、Twitter Bootstrapが一部のエンジニアで人気です。 Twitter BootstrapはWebデザインが得意ではないエンジニア向けにTwitter社が開発/提供するCSSフレームワークです。このTwitter Bootstrapを利用すると、簡単にTwitterっぽいデザインのWebサイトを作成できます。 そこで、これからTwitter Bootstrapをはじめてみようと思うエンジニアの人たち向けに、役立つ記事の数々をまとめてみました。 このエントリを書こうと思ったきっかけは、以下のスライドでした。とても分かりやすく、はじめて知るようなサービスなども網羅されており、とても参考になりました。 Twitter bootstrap入門 #twtr_hack jQueryプラグイン徹底活用 プロのデザインアイデアとテクニックposted with amazlet at
パネルが開いた+ホバー時 パネルが開いている時のアローは上向きに変わります。 デモでは上記のチェックボックス版だけでなく、ラジオボタン版などもあります。 デモページ:チェックボックス版 デモページ:ラジオボタン版 デモページ:チェックボックス版・デフォルトオープン 実装 HTML 一つのアイテムに含まれるのは、チェックボックス、ラベル、コンテンツの3つです。それらをdiv要素で内包します。 <section class="ac-container"> <div> <input id="ac-1" name="accordion-1" type="checkbox" /> <label for="ac-1">About us</label> <article class="ac-small"> <p>Some content... </p> </article> </div> <div> <
コンテンツ間の区切りやエレメントに斜めのラインを使ったスタイルを与えるスタイルシートのチュートリアルを紹介します。 Slopy Elements with CSS3 [ad#ad-2] 下記は各ポイントを意訳したものです。 デモ 実装 デモ 斜めのラインはCSS3で実装されているので、Chrome, Safari, Firefox, IE9でご覧ください。 demo 1 実装のポイント コンテンツ自身は回転させず、コンテンツのラッパーを回転させます。 回転させたコンテンツは表示領域からはみ出す部分もあるので、余剰分の処理も忘れずに。 HTML 見出しとテキストを含む個々のコンテンツはarticle要素で実装し、そのラッパーとしてdiv要素を設置しclassに「se-slope」を与えます。 <section class="se-container"> <div class="se-slop
スマートフォンサイトの制作でいま注目を浴びているのが「jQuery Mobile」です。jQuery Mobileを利用すると、CSSやJavaScriptの知識がない人でも簡単に本格的なスマートフォンサイトを作成できます。そんな“jQuery Mobileのキホン”が10分でわかるように、要点をギュッと絞って解説しましょう。 ※本記事は、jQuery Mobile 1.0をもとに執筆しています。 0分目: jQuery Mobileのダウンロードと利用方法 jQuery Mobileは、HTMLのhead要素で、(1)jQueryのスクリプトファイル、(2)jQuery Mobileのスクリプトファイル、(3)jQuery MobileのCSSファイルを読み込むだけで利用できます。 それぞれのファイルはjQueryのサーバーから呼び出せるようになっているので、わざわざ手元にダウンロードし
CSS3でスタイルした箇所をサポートしていない古いブラウザ、まぁ主にIEなのですが、でどのように見えるのか簡単に確認できるブックマークレットを紹介します。
IE6/7/8, Firefox, Operaを含む主要ブラウザ全てに、HTML5のaudio要素を使ってMP3を再生できるようにするスクリプトを紹介します。 audio.js デモページ [ad#ad-2] audio要素のサポート状況 audioはHTML5の要素で、サポートしているブラウザは限られたものとなっています。 audio要素のブラウザのサポート状況 IE9 Firefox 3.5+ Chrome Safari Opera 9.6+ また、対応している音声ファイルのフォーマットも異なり、現在音声ファイルの主流のMP3はChromeのみが対応しています(Safariも一応再生可)。 「audio.js」は、audio要素に非対応のIE6/7/8、MP3に非対応のFirefox, Safari, Operaで、audio要素を使ってMP3ファイルを再生できるようにします。 [ad
23 Creative Uses of CSS3 Text Effects to Enhance Your Web Presence | Onextrapixel - Showcasing Web Treats Without A Hitch CSS3を使ったクリエイティブなテキストエフェクト集23。 CSS3でいろんな事ができるのはご存知の通りですが、テキストだけでもかなり色々な使い方があって勉強になります。 ↓ 例えば、これが画像じゃないらしいです(笑) 他にも使えるテクニックが満載 早くすべてのブラウザでCSS3が使える時代が来てほしいですね。 もちろん、画像でやったほうが楽なところは画像でやっちゃいますが、楽出来る部分はかなり楽になりそう 関連エントリ CSS3だけで実現する幅広で使えそうなドロップダウン実装チュートリアル 味気ないサムネイルリストをCSS3で回転させてオシャレにす
CSSであれこれやっていたら、まず間違いなく使うであろう背景関連のプロパティ。 CSS3ではこれまでより多くの指定ができるようになります。 それらの新しいプロパティや値はいったいどういうものなのか、調べてみました。 主に参考にしたのは以下の2つです。 CSS Backgrounds and Borders Module Level 3現在の仕様です。CSS 背景 & ボーダー モジュール Level 32011年2月15日版の仕様の日本語訳です。プロパティと値の説明はこちらを参考にしました。背景のレイヤー背景は複数のレイヤーを持つことができ、レイヤーの数はbackground-imageに指定されたカンマ区切りの値の数によって決められます。noneの指定も一つのレイヤーを生成します。 背景レイヤーの重なり方ですが、初めに指定したものから手前に来ますので、注意してください。 例として、下のr
アニメーションのエフェクトを仕込む際、:hoverを使ってユーザーのホバー操作に対して実行することが多いですが、それ以外の擬似クラス :active, :focus, :checked, :disabled やMedia Queriesに仕込むスタイルシートのテクニックを紹介します。 CSS3 Transitions Without Using :hover [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに -「:hover」の例 「:active」でCSS3アニメーション 「:focus」でCSS3アニメーション 「:checked」でCSS3アニメーション 「:disabled」でCSS3アニメーション Media QueriesでCSS3アニメーション 対応ブラウザ はじめに -「:hover」の例 CSS3アニメーションのトリガーとしては、「:hover」を利用す
HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 Avoiding common HTML5 mistakes : HTML5 Doctor 翻訳といっても要約みたいな感じですので、書いてあることをそのまま日本語にしたものではあり
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 2011年07月19日- jQuery EasyUI - help you build your web page easily これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 Ext.jsばりに美しくてリッチなUIをjQueryでも実現できちゃいます。さらに、使い勝手がjQueryなので誰でも簡単に実装できちゃいます。Extはなんとなく取っ付きにくいと感じたかたも簡単に使えそう。 サイト上のチュートリアルやドキュメントも充実していて分かりやすいです。 リッチなものが作れるのはいいけど使い方が難しかったりメンテナンス大変だと、使う気が少し失せてしまいそうですがこれなら大丈夫かもしれません。 テーマやマルチリンガルにも対応しているらし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く