Pure を使って 5分でレスポンシブな Blog テンプレートを作る
Pure は Yahoo! が公開した CSS フレームワークですが、試しに使ってみましょうということで、自分で書くスタイルは極力少なくして、簡単に Blog のテンプレートっぽいものを作ってみました。 さすがに 5分はウソです すいません。でも簡単でしたよ。 Pure ： A set of small, responsive CSS modules that you can use in every web project. Pure とは Pure は、簡単に言ってしまえば Twitter が公開している Bootstrap などと同じ、CSS のフレームワークですが、CSS のみに絞ることで、その容量は最大で 5.7KB とかなり軽量。Yahoo! の CDN から読み込めば、gzip された状態で読み込めます。 また、各機能を個別に読み込むことも可能ですので、必要な機能だけを選択す
Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩 | WWW WATCH
フロントエンドの開発を色々と捗らせてくれる Grunt について、初めて Grunt を使うならこれだけまずはやってみたら？ という入門的な解説記事を書いてみました。 この記事は公開からかなりの時間が経過して内容が古いのと、Gulp を使ったフロントエンド開発環境構築について新しい記事 「Web サイト作るお仕事をしている人向け Gulp で作るフロントエンド開発環境」 を書いていますのでそちらをご覧ください。 Grunt の導入記事なんか珍しくもないし、色々な方がわかりやすい記事を過去にも書かれていているので今さらではありますが...... とはいえ、まだ使ったことがない人もいるだろうということで、「Grunt って何ですか？」 とか「使ってみたいけどよくわからない......」 なんていう Web デザイナー （主に HTML や CSS を書くフロントエンドな人） さん向けに、初めて
jQuery Core 1.9 アップグレードガイド 日本語訳
ちょっと話題としては乗り遅れた感が漂いますが、先月末に jQuery 1.9 の正式版、および jQuery 2.0 のベータ版がリリースされました。 jQuery 1.9 final, jQuery 2.0 beta, Migrate final released ： Official jQuery Blog これに際して公開された、jQuery 1.9 への移行ガイド 「jQuery Core 1.9 Upgrade Guide」 を翻訳してみたので下記に公開してみます。 jQuery 1.9 / 2.0 とは？ jQuery 2.0 は IE 6/7/8 への対応をやめることで、より軽量で高速、そして安定化を目指した jQuery のメジャーバージョンアップ版ですが、jQuery 1.9 は 2.0 と 完全な互換性を持ちつつも、レガシーブラウザへの対応が可能なバージョンで、IE 8
HTML5 は SEO に有効なの？
「HTML5 でコーディングしたら SEO （検索エンジン最適化） 的に有利になりますか？」 っていう質問、たまに聞かれるんですけが、それに対する答えとして私がまとめて書こうと思っていた内容をすべて言ってくれてしまっている記事が Impressive Webs で投稿されましたので、便乗して簡単に訳しつつ紹介してみようと思います。 「HTML5 でコーディングしたら SEO （検索エンジン最適化） 的に有利になりますか？」 っていう質問、たまに聞かれるんですけどね。 個人的には "SEO のために" HTML5 にするか XHTML にするかなんて悩んでる暇があったら利用者に役に立つコンテンツの 1つでも考えた方がいいよと思うわけですし、聞かれたときはそのように答えているわけですが、折角なので簡単に考えをまとめて Blog に書いておいてみようかなと思ってダラダラと書き始めていたら、自分が
Google+ 「ページ」 が公開。ページの作り方と注意点
すでに色々なところで書かれてるので完全に乗り遅れた感はありますが、Google+ に追加された 「ページ」 機能で早速、会社とこの Blog のページを作ってみましたよ。 ということで、Google+ ページの作り方と、その時にやっておいた方がいい設定について簡単に解説してみます。 「Google+ ページ」で、新しいつながりを ： Google Japan Blog Google+ ページの作成 実際に作ったページは下記。 WWW WATCH ： Google+ デジパ株式会社 ： Google+ まずは Google+ ページに関して簡単に。Google オフィシャル Blog 等で案内されています。あと下記は YouTube の Google+ ページ、プロモーション用ビデオ。 「Google+ ページ」を開設するには、個人で Google+ のアカウントを作成したうえで、plus.
delicious から Google ブックマークへのデータ移行
先週、突然流れた Yahoo! が delicious やめちゃうかもの噂。 今日（日本時間の18日）になって delicious blog で、「買収先を探してはいるけどサービスを終了することはないよ」 という公式な発表があったので、長年の delicious ユーザーである私としてはひと安心したところなのですが、とはいえ一応なんかあったらイヤだなと言うことで、delicious のブックマークデータを他のサービスにもコピーして、最悪の事態に備えておくことにしました。 ちなみに delicious からの発表は下記引用の通り。超簡単に言えば delicious 終わっちゃうの？ → いや、Yahoo! の戦略には一致しないサービスだって判断したけど、終わらせちゃうわけじゃないよ。 Yahoo! は delicious をどうしたいの？ → 買ってくれる会社を探してるよ。 っていう感じのこ
FTP の危険性に関して超簡単まとめ
今日話題になった Gumblar の亜種によって FFFTP の設定情報から FTP 情報が漏れる件で、FTP 自体の危険性と FFFTP 自体の特性、さらに Gumblar 対策という点で少し情報が混乱している状況が見受けられます。そこでその点を簡単にまとめてみました。 去年あたりから、「Gumblar （ガンブラー）」 に代表されるような、FTP のアカウント情報を何らかの手段で盗み出して Web サーバにアクセスし、Web サイトを改竄して被害を広めていくタイプのウィルスが問題になっていますが、今日になって広く利用されているフリーの FTP クライアントである 「FFFTP」 にアカウント情報漏洩の危険性が見つかったということで話題になっていました。 「FFFTP」のパスワードが"Gumblar"ウイルスにより抜き取られる問題が発生 ： 窓の杜 ただ、この問題で、FTP 自体の危険性
HTML5 を学ぶための情報源まとめ
ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。 ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。 やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。 ちなみに、XHTML 好きな私としては、XHTML5 で次のサイトリニューアルとか
CSS で外部リンクにだけアイコンを表示
当サイトの各カテゴリーごとのエントリー数を見ていたら、(X)HTML / CSS に関するエントリーがとっても少ないことに気がついたので、CSS ネタでも書いて... 当サイトの各カテゴリーごとのエントリー数を見ていたら、(X)HTML / CSS に関するエントリーがとっても少ないことに気がついたので、CSS ネタでも書いてみますよ。 で、今回はエントリーなんかでリンクを張るときに、当然外部サイトへのリンクと、自分のサイト内へのリンクが混在することになるかと思いますが、このとき外部リンクだけに 「外部リンクですよ」 とわかるようなアイコンを表示させてみたいと思います。 まずは、アイコンを用意しますね。こんなやつ↓ あとは CSS を書くだけですが、ここは 2段階に分けて考えます。どういうことかというと、まずはすべてのリンクにアイコンをつけてしまって、そのあとで、サイト内リンクのみアイコン
セグメント別 Twitter アカウントまとめのまとめ
個人的に Twitter って誰をフォローするか （というかどういうタイムラインを作りたいか） が楽しむ上では一番重要かなと思うんですが、そういう意味では自分の所属する業界とか興味のある事柄に関連したアカウントからフォローして行くっていうのは、Twitterをスタートする時点では最も簡単で有効な方法だと思います。 ということで、人様の記事に乗っかる感じですが、業界とか別に Twitter アカウントをまとめてある記事とかサイトのまとめ。 フォローすべきTwitterアカウント一覧 ： IDEA*PAD 百式の田口さんがまとめてる Twitter アカウント一覧。芸能人とか経営者とか、カテゴリごとに分けて掲載されてるので見やすいですね。 以下、敬称略、順不同です。基本的に日本語のアカウントのみということで。 Twitterの有名人・公式・お役立ち情報アカウント一覧 ： できるネット＋ 編集部
個人的に使っている Web サービスまとめ | WWW WATCH
日常的に使用している Web サービスをまとめて紹介 & 主要な使い道なんかを書いてみたいと思います。常用中のサービスとしては、そんなに珍しいサービスを使っているわけではないので掘り出し物はないと思いますが、同じサービスでも人によって使い方というか重視する点なども違うと思いますので何かしら参考になれば。 ちょっと個人的なネタですが。仕事柄、何か面白そうな Web サービスがリリースされると、とりあえずアカウントだけは作って色々試してみるわけですが、中にはそのままハマって使い続けるものもあれば、当然ながらあまり使わずに放置ってものもあります。 その中でも特に日常的に使用している Web サービスをまとめて紹介 & 主要な使い道なんかを書いてみたいと思います。常用中のサービスとしては、そんなに珍しいサービスを使っているわけではないので掘り出し物はないと思いますが、同じサービスでも人によって使い
Web サービスをまとめる Blog パーツ 「BloggyBits」
WEBマーケティング ブログさんで紹介されていたのですが面白そうだったので紹介。 「BloggyBits」 は Twitter、Digg、Stumbleupon、Flickr、Delicious といった各 Web サービス、さらにカスタムフィードとして、自分の Blog の RSS などを登録して 1つにまとめて表示してくれる Blog パーツ。Web サービスに関してはアカウント名を入れるだけ、カスタムフィードは RSS の URL を入れるだけで簡単に作れます。 BloggyBits - your social widget 表示させたい Web サービスにチェックを入れるとアカウント名を入力できるようになります。カスタムフィードで登録できるのは RSS のみとのことなので、Atom だとダメみたい。私は Tumblr のフィードを登録してみましたがエラーが帰ってきてダメでしたので、
CSS セレクタに関するおさらい | WWW WATCH
CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X... CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X)HTML、CSS コーディングを行う上で、セレクタを理解しているとそうでないのでは生産性に差が出ます。 CSS3 は現在 Working Draft の段階ですので、まだ正式な勧告はなされていませんが、多くのモダンブラウザにおいてそのほとんどが先行実装されていることから、現状でも利用価値が高いといえます。 ということで、ここでは自分へのメモの意味も込めて、CSS3 で定義されているものも含めた各 CSS セレクタについてリファレンスしてみようと思います。 今回の解説
RDF Semantics （RDF意味論） 入門
RDF関連の W3C 文書群の中でも重要度が高い、にもかかわらず日本語訳がなくて苦労していた RDF Semantics の日本語訳を小出誠二氏が公開し、さらにこの小難しい文書を読むにあたって非常に役立つ、「「RDF意味論」を読むために」という連載記事を公開されていますのでご紹介します。 RDF （Resource Description Framework） とか言ってもあまりピンとこない人の方が多いと思うのですが、これを基礎とした 「セマンティックウェブ」 は個人的にとっても興味のある分野で、色々と書籍だの、Web 上のドキュメントだのを読んだりしてるわけです。その中でも基本となる W3C の文書群は重要なんですが難しい…… そんな文書群の中でも重要度高い、にもかかわらず日本語訳がなくて苦労していた RDF Semantics の日本語訳を小出誠二氏が公開し、さらにこの小難しい文書を読
角丸に関するあれこれ
最近、というか Web2.0 的デザインなんてものが言われ始めてからというもの、「角丸」 ってやつがとっても人気ですね。(X)HTML、CSS 関連の話題でもよく取り上げられています。 ということで、角丸の作り方をいくつかの種類別に、また、数値などを入力するだけで、角丸のソースを生成してくれる角丸ジェネレータなどをいくつかまとめてみました。 角丸の作り方その1、画像を使う方法 ソースがどうこうとか、まったく気にしないで塗りつぶしの角丸ボックスを作るだけなら、4つの角に配置する画像を用意した上で、下記のような感じにすれば得に難しくもなく角丸完成と。しかもフレキシブル。しかしソース汚い。 <!--HTML--> <div class="left-top"> <div class="right-top"> <div class="left-bottom"> <div class="right-b
XHTML、CSS を学ぶ時の 6つの間違い
XHTML、CSS を学ぶ時にやりがちな間違いを私の個人的独断と偏見でつらつらと書いてみます。今から (X)HTML を学ぶのであれば、HTML よりも XHTML でしょということでタイトルや本文内では XHTML と書いていますが、ここは HTML に置き換えてもらっても同じだと思います。 1、とりあえず Dreamweaver を買ってくる 別に 「Dreamweaver」 だけに限らず、オーサリングツールさえ手に入れれば XHTML なんて簡単に習得できると思っている人は少なくない気がしますが、これは大きな誤解です。この誤解を抱えたまま 「オーサリングツールが使える = XHTML を理解している」 だと思い込んでいると後になって困ることになると思いますよ。 オーサリングツールは、コーディングスキルを補うツールではなく、コーディング作業を効率化するツールです。XHTML、CSS に
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
