「うわっ、そのコード変態的すぎ…」と叫びたくなるCSSトリック10選
多少複雑なデザインでも、画像や JavaScript には頼らず、CSS で実現させる。そこにはもはや手軽さなどは存在しない。あるのは男のロマン。 https://speakerdeck.com/ixkaito/bian-tai-de-css-torituku ということで、「変態的CSSトリック」が流行っているようなので、JavaScriptや画像を使わない変態的なCSSテクニックを探してみました。何を持って変態的とするかは個人の性癖によるところが大きいので、あくまでも主観ですが。 CSS counterで数字を計算 実はCSS 2からあるcounter系のプロパティ。順番に番号を振れる便利なプロパティですが、意外とマイナーな存在では？ 次のデモは、リンクの数だけページネーション番号を自動的に付与するもの。うん、便利ですね。 え、でもこれだとノーマルっぽい？ じゃあこちらでどうでしょう。
ロボットで知育、エリアベネッセに「Pepper」導入
（株）ベネッセコーポレーションは10月4日、ソフトバンクロボティクス（株）と仏アルデバラン社が開発した人型ロボット 「Pepper（ペッパー）」を、地域の学び相談の店舗「エリアベネッセ青山（東京都）」に導入する。10月中には、多摩センター（東京都）、千里中央（大阪府）、広島祇園（広島県）、六本松（福岡県）への導入を予定している。 エリアベネッセに導入するPepper には、ベネッセのオリジナルアプリ「勉強タイプ診断」（小中高校生向け）、幼児向け通信講座「こどもちゃれんじ」のキャラクター「しまじろう」の音楽に合わせてPepperと踊るアプリなどが搭載され、Pepperと触れ合いながら、最新のロボットを体感できる。今後は、これらの店舗での導入効果を基に、導入店舗の拡大を検討する。
再生数200億！ ニコニコ動画の半分は「ゲーム」タグでできている (1/3)
この連載では、独自に収集したデータを使って、みんな知ってるようで知らないニコニコ動画やpixivの現在を紹介していきます。今回は連載としては最終回となりますので、最後にニコニコ動画で最も投稿数の多いタグ「ゲーム」についてご紹介します。連載一覧→第2期／第1期。 明治大学米沢嘉博記念図書館スタッフでニコニコ学会β実行委員。趣味で同人誌やニコニコ動画関連の研究をしてる人。記事に使ったデータ元の『ニコニコ統計データハンドブック2015』など同人誌をコミケで頒布。ブロマガでは連載記事の補足も。 Twitterアカウントは@myrmecoleon。関わった著作に『進化するアカデミア 「ユーザー参加型研究」が連れてくる未来』（イースト・プレス刊）。左の画像は筆者を擬人化？して描いてもらったキャラ「ありらいおん子」。男の娘。 投稿数550万・ニコニコ動画の約半数を占めるゲーム動画 第1期含め2013年よ
CSSの記述が3倍速くなる「LESS」の使い方 (1/2)
2012年02月09日 13時58分更新 文●斉藤祐也／<a href="http://css.studiomohawk.com/">CSS Radar</a> 最近のWebサイトは大規模傾向にあり、Webアプリケーションを構築する機会も増えてきました。jQueryやMooToolsなど、JavaScriptを手軽に利用できるようにするライブラリーが普及する一方、Webサイトの表示を担うCSSにも、「Blueprint」や「960 Grid System」に代表されるフレームワークが登場しています。 「LESS」や「Sass」のようなCSS拡張メタ言語は、こうしたフレームワークとは異なり、CSSの言語自体を拡張し、CSSには存在しない機能を追加するものです。CSS拡張メタ言語を利用することで、変数、ミックスイン、入れ子ルール、名前空間、四則演算、関数などの動的な処理をCSSに追加でき、CS
アニメーションつき円グラフを簡単実装！Circliful
「Circliful」は、の円グラフをアニメーションつきで表示できる jQuery プラグインです。カスタムデータ属性に値を渡すだけでグラフを簡単に描画でき、豊富なオプションでデザインをカスタマイズできます。ランディングページで製品のシェアを訴える際などにいいでしょう。 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、CirclifulをGitHubからダウンロードします。ページ右下の「Download ZIP」ボタンからダウンロードできます。 利用するWebページの body の閉じタグ直前で、jQuery本体と「Circliful のminifyファイル」、「jquery.circliful.min.js」を読み込みます。 //(中略) <script src
CSSの記述が3倍速くなる「LESS」の使い方 (2/2)
2012年02月09日 13時58分更新 文●斉藤祐也／<a href="http://css.studiomohawk.com/">CSS Radar</a> LESSの開発環境作りはとても簡単 はじめに紹介したように、LESSには手軽なJavaScriptライブラリーが用意されているので、HTMLのソース内に、「less.js」ファイルと「.less」スタイルシートの呼び出しを追加するだけで使い始められます。 ただ、本番サイト上でJavaScripに依存しすぎるのは、パフォーマンスとアクセシビリティの点で不安があります。そこで、 .lessファイルを.cssファイルに変換してくれるコンパイルツールを利用し、公開サイトではCSSだけを利用する方法があります。 LESSの開発に欠かせない無料で使えるGUIツールを紹介しましょう。 紹介するツールはすべて.lessファイルの保存をきっかけに、
Google Feed APIで3分マッシュアップ (1/2)
特定のテーマに関する情報を集めた、ポータル的なWebサイトを作りたい――。そんなとき、JavaScriptを使って、他のWebサイトのフィードから情報を得て、そのサイトの最新情報を表示できると便利です。 しかし、普通の方法ではできません。というのも、JavaScriptでフィードを読み込むのに使う「XMLHttpRequest」オブジェクトでは、セキュリティ上、異なるドメイン（クロスドメイン）とのやり取りが制限されているためです。そこで、「Google AJAX Feed API」を使いましょう。 Google AJAX Feed APIは、指定したフィードをGoogleのサーバー側で取得し、JSON（JavaScript Object Notation）と呼ばれるJavaScript専用のデータ形式に変換します。変換されたデータは、JSONP（JavaScript Object Nota
手軽になった！Google Maps API V3 (1/2)
Web上で地図を表示するツールの定番といえば「Googleマップ」。独自の地図を簡単に作れる「Google Maps API」を使って、会社案内のページに地図を埋め込んだり、地図と連動するネットサービスを運営している方も多いでしょう。 このGoogle Maps APIの新バージョン「Version 3」（以下V3と略）が5月27日に公開されました。今回は、V3を使って地図を表示する基本的な手順を紹介しましょう。 Google Maps API V3の主な変更点 Google Maps API V3では、以下の点が新しくなりました。 （1）API Keyが不要 V2まででは、Google Maps APIを使うためにはAPI Keyを取得する必要がありましたが、V3では不要になりました。 （2）iPhone／Androidへの対応 iPhoneやAndroidで地図を高速に表示できるように
レスポンシブ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）
サイト制作の前に知りたいiPhone/Androidの仕様 (2/4)
■Mobile Safariの制限 Mobile Safariは、ハードウェアの制限などからMac版、Windows版とはいくつかの違いもあります。 ・プラグインに非対応 ブラウザーの機能を拡張するプラグインが追加できません。特にアドビ システムズの「Flash Player」をインストールできないため、Flashコンテンツを表示できない大きな制限があります。ほかにも、マイクロソフトの動画ファイル形式である「Windows Media Video」の埋込みや、QuickTimeムービーのページ内再生などもできません。これらは、HTML5やYouTubeなどで対応することになります（詳しくは今後の連載で紹介します）。 ・設定項目が少ない Mobile Safariは、［設定］［Safari］から設定画面を呼び出せますが、デフォルトの検索エンジンやセキュリティの設定などの項目しかありません。P
【リンク集】無償写真・テンプレ集を山ほど集めたった (1/2)
「急に言われましても」に対応する フリー素材サイトいっぱいお盆だよスペシャル 気の早い話だが、もうすぐお正月だ。 夏コミあとの冬コミがすぐにやってくるように、夏から年末は一瞬。そして新年。新年といえば、年賀状だ。来年であれば巳年だから蛇のイラストの需要が高まるわけだが……そんなとき、知っておくと助かるのがフリー素材サイトだ。 個人利用であれば無料のものが多く、かつデザインがステキ。またビジネス用のテンプレートも豊富に存在しているので、普段からチェックしてけおけば、「急に言われましても」なイベントにも即対応できる。 ということで、お盆スペシャルとして編集部オススメの素材サイトを一挙に紹介していく。個別にブックマークするよりも、このページをブックマークしておくといいゾ。
フルードグリッドとレスポンシブWebデザインの完成 (1/3)
本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。さらに、解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。 レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック 定価：2,625円 (本体2,500円)／形態：B5変 (232ページ) ISBN：978-4-04-886323-0 メディアクエリーを設定し、グリッドデザインで大きな画面にも対応した「枝豆隊」をフルードデザイン（リキッドレイアウト）に変更します。レスポンシブWebデザインによるサイト制作もいよいよ今回で完成です。 フルードグリッドへの変換 前回の記事で、1024px以上のスタイルシートが一通り完成しましたが、この状態ではウィンドウサイズを広げてもpxで幅
32bit vs 64bit Windows 7を入れるならどっちだ？ (1/4)
64bit版のWindows 7のシステム画面。赤枠内を見ると64bit版だとわかるが、それ以外で32bitとの違いを意識することはまずない。はたしてどちらがパフォーマンスに優れるのだろうか？ メモリーの価格が下がり、4GB以上のメモリーを搭載するパソコンが珍しくなくなってきた。4GB以上のメモリーを有効に使うには、64bit版のOSが必要となる。しかもWindows 7のパッケージ製品には、x86版(32bit版)とx64版(64bit版)のインストールディスクが両方とも含まれるという。これを機に、「64bit版を導入してみようか」と考えている人も多いだろう。 64bit版の導入で最も気になるのは、所有しているハードやソフトの互換性だが、同じくらい気になるのは、「64bit版にしてパフォーマンスは良くなるのか」ではないだろうか。極論すれば、パフォーマンスが変わらない(あるいは下がる)ので
スマホ対応の新潮流「レスポンシブWebデザイン」とは？ (1/3)
スマートフォンの普及を背景に、「レスポンシブWebデザイン」（Responsive Web Design）という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか？ 実例で解説する。 ウィンドウサイズを基準にデザインを調整 レスポンシブWebデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法だ。モバイルサイトの制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的だが、レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更する。 レスポンシブWebデザインは、2010年5月、米国のイーサン・マルコッテ氏によって提唱され、海外では企業サイトを含む多くのWebサイトで採用されてい
まるで不動産版ウィキリークス！「大島てる」の正体は？ (1/5)
事故や事件のあったいわくつきの不動産、いわゆる事故物件。 権利者にとって、事故物件はあまり公にしたくないもので、その界隈ではタブー視されるきらいがある。そんな事故物件をGoogle Map上で公開し続けているのが、「大島てる」だ。2010年12月現在、対象エリアは東京都と神奈川県の一部のみだが、サイトが生まれた2005年からゆっくりと、しかし確実に範囲を広げている。 大島てるは「会社」と名乗ってはいるものの、その実態は謎が多い。創業は「天保8年」（1837年）、事業内容は「事故物件、ステ看板、落選運動 他」。主要取引先は「陸軍病院」、関連会社は「大島ぬい」と「大島かめきち」……。鵜呑みにするにはかなり困難な名前が並ぶ。ただし、メールアドレスは正しく機能していた。 顔の見えるインターネット 第86回は、大島てるの代表取締役・会長の大島学氏に連絡をとり、なぜ事故物件の情報を集めているのか、そし
30分でできる！Webサイトを高速化する6大原則 (1/4)
Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか？ もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。 下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。 縦軸がフラストレーション（10段階）、横軸が表示までの時間を表している。1～5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまう
SP3でWindows XPは何が変わる？ (1/3)
当初XP SP3は、Windows Updateのオプションや、マイクロソフトのダウンロードセンターでの提供に限られていたが、2008年7月から「自動更新」機能での提供も開始された。そのため、自動更新が有効なパソコンに対しては、順次適用が始まっているはずだ。 セキュリティー面の修正はもちろん、パフォーマンス向上にも効果があると噂されるXP SP3によって、Windows XPの何が変わるのか見ていこう。 SP2との違いとは？ XP SP3について語る前に、先代のXP SP2について振り返ってみよう。XP SP2はWindows XPのセキュリティー面を強化するために、非常に多くのモジュールのアップデートが行なわれ、実体としては、それまでのXP SP1とはまったく異なったOSと呼べるほど変化していた。マイクロソフトの内部では、XP SP2としてリリースするのではなく、「XP Release
Google Analyticsの「ユーザー」レポート (1/5)
Google Analyticsには、63種類以上のレポートがあります。それぞれのレポートには、テーブル、割合、掲載結果、比較、ピボットなどの表示形式があり、標準の表示形式であるテーブル形式よりも、他の表示形式の方が指標をより理解しやすい場合も多くあります。今回から3回にわたって、「ユーザー」、「トラフィック」、「コンテンツ」の各メニューについて、レポートの基本的な見方を紹介します。 地図上のデータ表示 「地図上のデータ表示」レポートでは、Webサイト全体のセッション数、平均ページビュー、平均サイト滞在時間、新規セッション率、直帰率を「都市」、「国/地域」、「亜大陸」、「大陸」別に確認できます。Webサイトが各国語で利用できる場合は、それぞれの国や都市別に指標を比較できて便利です。 この連載を読んでいる人にとってのユーザーは大半が日本人のはずです。「Japan」からのセッション数が多いのは
Chromeで使えるエクステンション厳選25本！ (1/6)
ページ分けの多い記事も自動でめくれる、クリック一発で翻訳出来る――。 便利な拡張機能の豊富さで知られる人気ブラウザーといえばFirefoxだ。だが、そこに現在Google Chromeが「エクステンション」と呼ばれる拡張機能で猛追を始めている。グーグルが9日に公開したサイト「Chrome Extensions」にはすでに、500本を超えるエクステンションが登録されている。 エクステンションに対応するChromeは現在、Windows版およびLinux版のみ。いずれも正式版ではなく4.0ベータ版で、体験したい人はそれぞれをインストールすることになる（エクステンションを入れようとするとダウンロードを促されるので、それに従えばオーケー）。Mac版も近いうちに対応予定とのことなので、しばしお待ちを。正式版の4.0リリースは2010年の見通しだ。 リリース間もない現在の問題は、Firefoxのときと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今すぐ始める電子書籍制作入門
