[CSS]今、そして近い将来に使用するであろうスタイルシートのテクニック集
CSS3のテクニックはさまざまなものがありますが、その中からまさに今、そして次のプロジェクトに使用したくなるテクニックを紹介します。 The Bright (Near) Future of CSS [ad#ad-2] 下記は各ポイントをピックアップして意訳したものです。 はじめに Styling HTML5 Classing like HTML5 Media Queries Styling Occasional Children Styling Occasional Columns RGB Alpha Color HSL and HSL Alpha Color Shadowy Styles Multiple Backgrounds 2D Transforms はじめに ここでフォーカスするのは、今、そして近い将来に使用するであろうスタイリングのテクニックです。HTML5の要素のスタイリング
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
みなさん、こんにちは お元気ですか？僕は元気です。 さて 最近よく、「いいね！」ボタンや「ミクシィチェック」ボタンによって、ウェブページを紹介し合う文化が少しずつ定着してきたなーと思います。 そんな中で、今後重要になってくるんじゃないかと思われる OGP （Open Graph Protocol）と言われる仕様があります。今日はそのことについて書いてみたいと思います。 OGP? おーじーぴー？？とはなんでしょうか。 OGP とは 簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。 まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。 ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別す
CSS Nite 4周年記念イベント（Vol.40 reprise）に出演させていただきました。
tacamyです。 11月10日（火）にCSS Nite 4周年記念イベントにて、 『HTML5のメリットを活かしたコンテンツアイデア』という セッションでお話しさせていただきました。 ああいった場所で話をするのは初めてのことだったので、 至らない部分も多々あったかと思いますが、 ご参加いただいた皆様や、ご協力いただいた関係者の方々に感謝しています。 遅くなってしまい申し訳ありませんが、こちらのエントリーにて、 当日の資料の配布や補足事項について掲載させていただきます。 スライド イケメンホイホイiPhone版のデモ イケメンホイホイのiPhone版を、 HTML5の新機能を使って実装しています。 動画の解説 好みのイケメンをGETする イケメンビューア（canvasで作成）にGETしたイケメンが追加される イケメンビューアをホーム画面に追加して、アイコンを作成 アイコンからビューアを起動
surround.vimでHTML編集を効率化 - Webtech Walker
surround.vimの設定でHTMLの編集が便利になる設定をしてみました。surround.vimの使い方に関しては下記サイトがまとまってます。ホント便利っす、このプラグイン。 vim の text-object をより便利に使えるプラグイン - surround.vim - 川o・-・）＜2nd life .vimrcの設定 設定はこんな感じです。 "for surround.vim " [key map] " 1 : <h1>|</h1> " 2 : <h2>|</h2> " 3 : <h3>|</h3> " 4 : <h4>|</h4> " 5 : <h5>|</h5> " 6 : <h6>|</h6> " " p : <p>|</p> " u : <ul>|</ul> " o : <ol>|</ol> " l : <li>|</li> " a : <a href="">|</a
Web屋のためのVim設定・Tipsまとめ 1/2 - ナレッジエース
Comments» 1. 本日のTwitter 2009-01-18 | memoMania - 2009-1-19 […] Web屋のためのVim設定・Tipsまとめ 1/2 - ナレッジエース http://blog.blueblack.net/item_340 # […] 2. ゲスト - 2009-1-19 (ただ、私の環境だとたまに、実行時にDOS窓が残ってブラウザを閉じるまでファイルが編集不能になる現象が発生します。なぜだろう。) firefoxの前にstartを入れるとどうでしょう？ 3. nase - 2009-1-19 ありがとうございます！動作確認できました。よけいなDOS窓が開かなくなって、いい感じです。本文も修正させてもらいました。 4. sasata299's blog - 2009-2-6 vim環境を晒してみる… いきなりですが、僕はvi派です。emacsは・
Nishiaki's Log: HTML.vimでVimでのHTML編集が楽になる
最近、Vimが良いとの事で、使い始めたが、正直なにがいいのか？今ひとつピンと来てなかった。 前のエントリーでclosetag.vimについて書いたが、基本的な使い方がわかってなかったorz Vim使いの人は、HTMLの編集には、HTML.vimとか使ってるんだな。 オレのVim環境は、杉山さんに作ってもらった環境なんで、HTML.vimはインストールしてあったけど、Last modified: Jan 03, 2007 ってなってたので、最新のファイルをダウンロードした。 ダウンロードしたファイルを開いて、サイトに書いてある通り、『:source %』って入力したら、自動でインストールできた。スゲ。 これで、filetypeがこのプラグインが動く状態になっていれば、HTMLの編集は、かなり楽になるはず。 ちなみに、オレの環境はfiletypeはhtmlでもxhtmlでもプラグインは
3G端末（FOMA・WIN・3GC）のモバイルサイトのコーディング＆デザイン - livedoor ディレクター Blog(ブログ)
こんにちは。『Cure』や『livedoor 歌詞』を担当しているモバイルディレクターの吉沢です。 つい最近、PC サイトのディレクターが初めてモバイルサイトの開発を担当するという機会がありました。 どの情報を伝えれば初めてモバイルサイトを担当する人にもスムーズに進められるのか、PC とモバイルで一番特徴のあるコーディングとデザインについて、これだけ覚えておくと簡単な3G（FOMA・WIN・3GC）端末用モバイルサイトが作れてしまうノウハウをご紹介したいと思います。 【01】対応端末について こちらの記事にもあるとおり、3G 端末（FOMA・WIN・3GC）がアクセスの9割を占めているため、これからオープンさせるサイトの対応端末は、3G 端末で十分そうですね。 サイトの内容にもよりますが、下位端末（PDC・P型・C型など）を対応端末として含めてしまうと、機能や容量制限などに悩まされ、逆に運
TumblrのテーマをTwitter風にしてみた - cameraLady
マークアップの練習をしたいなーと思って，手頃な課題として Tumblr のテーマいじりをしてみた． tumblr29 Twitter の HTML 構造をじっくり眺めて，それに合わせて Tumblr の HTML を組み立てて，少しずつ CSS を書いていこうと当初は思ったんだけど，Tumblr の custom HTML が面白いってことに気が付いて段々と逸れていった．結局，Twitter の CSS を丸ごと当てて，必要なものをちょいと足したくらいだ． サイドバーの「Stats」の部分，Twitter では followings とか Updates がある部分に，Tumblr のポスト種類別の内訳を表示させたいと思って，その副産物が先日作った TumblrPostChart でした． 当初の目的は果たされてなかったりするけれど，改めて Tumblr の API を眺めたりする中で気付
[ruby] RubyでHTMLとWebを操作するためのライブラリ、HpricotとWWW::Mechanize - Greenbear Diary (2007-02-05)
■ [ruby] RubyでHTMLとWebを操作するためのライブラリ、HpricotとWWW::Mechanize 今日は、RubyでWebサイトを解析するときに強い味方となるライブラリ、HpricotとWWW::Mechanizeを紹介します。 どちらも非常に強力なので、覚えておいて損はないよ！ 以下ではまずHpricotでHTMLを解析・編集する方法について解説します。 次に、「はてなダイアリーの自動更新」を例にWWW::Mechanizeの使い方を解説します。 Hpricot HpricotはHTMLを解析するためのライブラリです。 例えば「あるページのリンクだけを全部抜き出したい」と思ったとき、どうしますか？scrAPIを使う？でもscrAPIはやっぱり ちょっと使いたいだけなのにパーザ(Scrape)用のクラスを定義するのが面倒なんだよね！ Hpricotなら、たったこれだけで
![[ruby] RubyでHTMLとWebを操作するためのライブラリ、HpricotとWWW::Mechanize - Greenbear Diary (2007-02-05)](https://cdn-ak-scissors.b.st-hatena.com/image/square/b0dd2a08b2c0fff30d70543ed7fa340ebfeb5697/height=288;version=1;width=512/https%3A%2F%2Froute477.net%2Fd%2Fassets%2Fogimage.png)
ウェブ制作・プログラマー・デザイナーのためのチートシート集 | コリス
Scott Klarrのエントリー「Cheat Sheet Index」から、ウェブ制作・プログラマー・デザイナーのためのチートシート集です。
これは便利! CSSのコピペはこのコンテンツで - SitePoint CSS Reference | ネット | マイコミジャーナル
SitePoint CSS Reference SitePointは31日(米国時間)、CSSのリファレンスサイトSitePoint CSS Referenceを公開した。同サイトはTommy Olsson氏およびPaul O'Brien氏という著名な2人のCSSエキスパートによって執筆されたもの。そのままコピー&ペーストして使えるようなCSSのコードと説明がまとめられたサイトで、CSSを編集するWebデザイナはぜひともブックマークしておきたいサイトだ。 SitePoint CSS Referenceは公開以前となるプライベートベータテストの状態で、すでにSitePointコミュニティからのフィードバックを受けて改善が実施されている。いわば現状でのCSSベストプラクティスがまとまっているコンテンツだ。 SitePoint CSS Reference - そのまま使えるサンプルとブラウザでの
HTML5 における HTML4 からの変更点
この文書「HTML 5 における HTML 4 からの変更点」は、W3C の HTML ワーキンググループ による「HTML 5 differences from HTML 4 (Working Draft 22 January 2008)」の日本語訳です。 規範的な文書は原文のみとなっています。この日本語訳は参考情報であり、正式な文書ではないことにご注意ください。また、翻訳において生じた誤りが含まれる可能性があります。 原文が勧告 (Recommendation) ではなく、策定途中の草案 (Working Draft) であることにご注意ください。 原文の最新版 は、この日本語訳が参照した版から更新されている可能性があります。また、この日本語訳自身も更新されている可能性があります。日本語訳の最新版は、W3C 仕様書 日本語訳一覧 から参照することができます。 更新日: 2008-09-
Codaの使い勝手は絶品〈その1〉 | BLOG × WORLD ENDING
This domain may be for sale!
新規でサイトを作るのに使えそうなの一式。（あの人のパクりじゃないんだからっ！）｜CSS HappyLife
08年6月4日追記： コレの新しいの作りました。 新規でサイトを作るのに使えそうなの一式。Ver 2 11月7日追記： contens.cssの56行と60行目の#contents部分でスペルミスしておました。 ごめんなさい... 現在は修正版になっております。 修正後のcontents.css --- SO905iがやば過ぎる件。JOGですよ！じょぐ！！！すげー待ってた。アナタを心から待っていた。 さて、一行駄文はお終い。本題です。 毎回新規サイトを作成する場合は、以前組んだのからコピって来て使うケースが多くて何かと面倒だと思っていたわけです。 んで、自分仕様のが欲しいと思ったので、仕事そっちのけで作ってみました。 以前からソレっぽいのは公開したり、なんやかんやだったんですが、11月2日Verって事で。 どうせ新規サイト作成の際にちょっとずつ見直しが入っていくので、すぐに古くなってしまう
新規サイト制作セット（CSSライブラリ＋基本フォルダ構造＋HTMLテンプレート）、一式zipでダウンロードできるようにしました
Account Suspended This Account has been suspended. Contact your hosting provider for more information.
いまさら聞けない“Web標準”、そしてXHTML＋CSS
いまさら聞けない“Web標準”、そしてXHTML＋CSS：いまさら聞けないリッチクライアント技術（4）（1/3 ページ） 前回の「いまさら聞けない、“Ajax”とは何なのか？」の説明の中で、Ajaxの定義の1つとして「XHTMLとCSSを使った標準規格のプレゼンテーション」というのがありました。前回の記事では、この部分をしっかり解説できなかったので、今回はこれについて解説をしましょう。 といっても、Ajaxの補足説明が今回の目的ではありません。HTML／XHTMLとCSSを使った「Web標準」について紹介します。 「Web標準」という単語はよく耳にしますが、具体的にどんなものか？ HTML／XHTMLとCSSとどのような関係があるのか？ さらに、HTML／XHTMLやCSSって何？ といった点について見てみましょう。 「Web標準？ Webを標準化することかな？」 AjaxやXML、Jav
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webデザインとグラフィックの総合情報サイト - MdN Interactive - Webデザイン超基本のお作法50選