zencoding.vimで、１０倍速くHTMLを書く
ここ数日、Zen-CodingがLDCに上がってたので興味を持っていたのですが、手を出す事が出来ませんでした。 （環境構築とか面倒くさそうだったのでｗ） ところが、mattnさんが、pure vim-scriptでZen-Codingを作成してたので、Vimmerな僕はさっそく導入してみました。 導入方法です。 ３ステップで導入出来ます。 １．こちらからzencoding.vimをダウンロードします。 （僕のVim環境(Kaoriya版7.2.261）は若干古かったらしいので、Ver0.21を落としました） ２．vimをインストールしてあるディレクトリ/runtime/pluginにzencoding.vimをコピーする ３．_vimrcに以下を追加 let g:user_zen_expandabbr_key = '<c-e>' これで導入終了。 さあ、HTMLを構築しましょう。 html
Big Sky :: zen-codingの殆どの機能をzencoding.vimに取り込んだ。
全国１億８千万人のzen-codingファンの皆様、如何お過ごしでしょうか。 先日の記事でzen-codingをpure vimscriptに移植した「zencoding.vim」をご紹介させて頂きました。 あの時は略語の展開(Expand Abbreviation)しか機能がなく物足りなかったかもしれません。まぁ殆どの移植品はExpand Abbreviationしか無いのですが。 zen-codingには他どんな機能があるかというと、実はまだ便利な機能があったりします。 オフィシャルのサイトによると Expand Abbreviation Wrap with Abbreviation Balance Tag Inward/Outward Go to Next/Previous Edit Point Update Image Size Merge Lines Remove Tag Spl
知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ
最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか？ Zen-CodingはHTML/CSSをショートカット＋スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか？という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio
犯してはいけないHTMLタグの過ち10個
【追記】 HTML5ではインラインとブロックの要素分類がなくなり、代わりに、メタデータ、フロー、セクション、ヘッディング、フレージング、エンベッディッド、インタラクティブというコンテンツの種類が定義されています。 2. 画像に代替テキストのalt属性が入っていない <img src="sample.gif" /> alt属性は、Webページに表示されるすべての画像に必須の要素ですので、必ず使用する必要があります。 <img src="sample.gif" alt="サンプル" /> 必須の要素ですので、特にテキストで表示する必要がない場合でも、alt=""としておく必要があります。 【追記】 HTML5では「Images whose contents are not known(どのような内容かわからない画像)」に限り、alt属性を省略することができます。写真共有サイトにユーザーが画像を
[JS]これFlashじゃないの？ってなるナビゲーションを実装するjQueryのチュートリアル
軽快なアニメーションが心地よいナビゲーションを実装するjQueryのチュートリアルを紹介します。 タイトルにある通り、Flashは使わないで実装されてます。 Animated Content Menu with jQuery デモページ [ad#ad-2] まずは、デモページを堪能ください。 ナビゲーションの各ラベルをクリックすると、それに対応したパネルがアニメーションを伴って開くようになっています。 デモページ 実装 HTMLの構造は、背景画像、グリッドのオーバーレイ、ローディングのアイコン、メインメニューの4つから構成されています。 HTML：背景 背景は、背景画像とオーバーレイとローディングをdiv要素で内包します。 <div id="ac_background" class="ac_background"> <img class="ac_bgimage" src="images/D
pylori*style wiki - HTMLパーサ Hpricot
Hpricotは Ruby用の HTML パーサです。スキャン部分は C 言語で書かれていて高速に動作します。 HTMLの解析や書き換えに威力を発揮する便利なライブラリです。 rubygemsを使うのが簡単です。 # gem install hpricot すると以下のようにプラットフォームを聞いてきます。Unix系OSであれば 1 を、mswin32 であれば 2 を選びます。 Select which gem to install for your platform (i386-freebsd6) 1. hpricot 0.4 (ruby) 2. hpricot 0.4 (mswin32) 3. Cancel installation コンパイルが始まり、インストールが行われます。 Building native extensions. This could take a while.
特殊文字リファレンス
このページで紹介するのはHTML4.01で定義されている特殊な文字です。 これらの文字を表示させるには、｢&キーワード；｣、｢&#番号；｣という2通りの記述方法があります。 キーワードは、大文字と小文字が区別されます。 ※OSやブラウザの種類・バージョン等の環境により、表示されない場合があるので注意してください。
First step CSS - Section 4
今までは，<H1>（見出し），<EM>（強調）といった文書中である役割をもつ要素にスタイルを指定した。ここでは“スタイルを適用する範囲”を示し，ほかの役割を持たない HTML の要素を導入する。 <DIV> と <SPAN> は文書中での役割をもたない，ただ“範囲を指定する”だけの要素である。したがって，いずれも“ここから～ここまで”の形で使われる。 ここで“文書中での役割をもたない”というのは，たとえば <UL> はくくった範囲に“箇条書きである”という“役割”を与えるが，<DIV> と <SPAN> は決まった役割を与えない。 <DIV> と <SPAN> は，スタイルシートの範囲指定のほかに，ある範囲が“何語で書かれているか”を示すのにも用いられる。
white-space－スタイルシートリファレンス
white-spaceプロパティは、ソース中のホワイトスペース（連続する半角スペース・タブ）・改行の表示方法を指定する際に使用します。 white-spaceプロパティは、 １.ソース中のホワイトスペース（連続する半角スペース・タブ）の表示方法 ２.ソース中の改行の表示方法 の２点を指定するプロパティです。 この２つの表示方法の組み合わせパターンの数だけ値が用意されている、と考えると理解しやすいかもしれません。 ■値 normal ソース中のホワイトスペースを無視 ソース中の改行を1つの半角スペースとして表示 ボックスサイズが指定されている場合にはそれに合わせて自動改行する（初期値） pre ソース中のホワイトスペースをそのまま表示 ソース中の改行をそのまま表示 ボックスサイズが指定されている場合にも自動改行しない nowrap ソース中のホワイトスペースを無視 ソース中の改行を1つの半角
CSS3 marquee - CSS3ウェブブラウザー実装メモ - 血統の森 web実験小屋
2015年09月追記：2014年10月にCSS Marquee Module Level 3はW3C Working Group Noteとして発行され、公式に廃止されています。以下の記述は歴史的経緯の参考情報としてそのまま残しておきます。 作成：2008-06-15 更新：2014-04-08 最終更新：2015-10-04（本文そのままのマイナーな変更） CSS3仕様としての遍歴は、以前はCSS basic box modelで、現在はCSS Marquee Level 3として仕様が公開されているものの、2014年4月現在、少なくともWindowsで開発が継続されているブラウザで、marqueeプロパティが動作するブラウザは存在しない。従ってこのページは、歴史的な意味しかない。 Blinkで-webkit-marqueeは削除されている。Intent to remove: overf
もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記： この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
グラフィックデザイナーのためのCSSレイアウトメモTIPS「position : absoluteについて」
CSSレイアウト[TIPS] position : absoluteについて 「position : absolute」はpositionプロパティのなかの１つで、ボックス要素を絶対的な位置で配置する。 position:absoluteで指定されたボックスは、他の要素との関係は切り離され別物になる。親ボックス以外の他のボックス要素から影響を一切受けない。 position:absoluteには必ず「親」がいる。これが大事。 親にしたいボックスに「position：static」以外のposition指定をし（たいていはrelativeでOK）、そのなかに子を入れてposition:absolute指定をする。「top」「bottom」「left」「right」の値は、親ボックスからの距離。 親ボックスを指定しなければ「ブラウザウィンドウ」が親になる。 結論から言うと、親ボックスが「ブラウ
imgタグとＣＳＳでのbackground-image:urlとの違い « vanillate
「画像」なのか、「背景」なのか、それが問題だ。 ＨＴＭＬでは文章の基本構造を基に書き、ＣＳＳではデザインを指示することがいまやスタンダードとなっています。これは、ＨＴＭＬ構造を簡単にして、いままであったテーブルでの段組が減り、読みやすくすし、そしてデザインの幅を持たせ、統一することができる、といった恩恵をうけました。 しかしながら、いままで管理するメインファイルが１枚のhtmlだったのに対して、１枚のhtml＋ＣＳＳファイル（１枚＋α）となり、初心者の勉強のハードルがあがっていると聞いて、今回は画像の読み込みをメインに書いてみようと思います。 よく見かける画像の読み込み方法 ・ＨＴＭＬ通常の記述 <img src=”画像ファイルまでのパス” /> ・CSSでの読み込み（ＣＳＳファイル内） background-image:url(“画像ファイルまでのパス”); ・CSSでの読み込み（Ｃ
無駄なdiv要素やclassだらけのマークアップから卒業する方法
グリッドベースのレイアウトを作成すると、ついついdiv要素を多用してしまいがちですが、意味のあるデータにはそれに適した要素を使用し、無駄なdiv要素やclassだらけのマークアップから卒業する方法をWebdesigner Depotから紹介します。 Fight Div-itis and Class-itis With the 960 Grid System 下記は各ポイントを意訳したものです。 はじめに CSSのフレームワーク：960.gsの場合 classの乱用を避ける リスト要素の使用 画像とキャプションの使用 複数の見出しとパラグラフの使用 子要素のclassは親要素に はじめに 数年前までウェブページの設計はテーブルがスタンダードでした。そしてCSSはそれを大きく変え、今日ではCSSのフレームワークがウェブページの設計を容易にしてくれています。 しかしながら、このCSSのフレームワ
Google Slides: Sign-in
Not your computer? Use a private browsing window to sign in. Learn more
hCalendar を使って予定を公開しよう！ - IT戦記
はじめに みなさん、こんばんわ！ さてさて最近のことですが、 Google の検索結果にイベントや予定へのリンクが表示されるようになりましたね！（まだ、英語版だけですけどね＾＾；） ASCII.jp：Google、リッチスニペットでイベントの日時や場所表示に対応 以下のような感じで表示されるみたいです！ ウェブページの中に書かれた「予定」や「イベント」などを Google 先生が理解して表示しているんですね！ この予定やイベントはどうやって探してるの？ Google は hCalendar という形式のデータを読んで、予定やイベントを探しているようです。 というわけで、今日はこの Google が使っている hCalendar というものが「どういうもので」「どうやって活用すればいいか」を実例を交えながら紹介したいと思います。 hCalendar って何？ hCalendar とは「カレン
W3Cは賞味期限切れ組織？ － ＠IT
「W3Cの賞味期限はあと何年ぐらいだと思いますか？」。先日、あるパーティーでこう聞かれた。私は虚を衝かれたように、思わず真意を聞き返した。なぜなら、私にこの質問をしたのは、日本人として唯一、W3CのXMLワーキンググループで1997～98年のXML 1.0の標準化プロセスに携わった村田真氏だったからだ。村田氏は現在、Office Open XML（主にMicrosoft Officeで用いられる文書形式）の標準化についても情報処理学会 情報規格調査会の専門委員として国際標準化に携わっているなど、この道のエキスパートだ。 驚きはしたが、やはりとも思った。W3Cはもう標準化組織としての黄金期を過ぎ、権威が失われつつある。もしかすると標準化プロセスにしても、もっと良い別のやり方があるのではないか。このところずっとそう感じていたからだ。 W3Cのウィジェット標準を知っていますか？ 村田氏の見立てで
荘野 和也 | コミュニティ構築のガイアックス
IT事業開発部 Webプログラマ 荘野 和也 ガイアックスの名前を知ったのは実は高校生の頃。 独学でHTMLを勉強していたんですが、所属していた軽音部のサイト運営を任されて、その時利用していたのが当時ガイアックスが運営していたブログ、gaiax.comだったんです。 Web関係の仕事に就きたいと思い専門学校へ進学してからも、ガイアックスのサービスは色々利用してましたよ。ガイアックスのサービス内で「マークアップエンジニア募集」を見つけて、それが縁で入社が決まったくらいですから。 ガイアックスの第一印象は、営業も企画も開発もみんな発言力があるんだなあ、ということ。その頃の自分は、決して発言力のあるタイプではなかったので、強烈な印象を受けました。 そして、自分と同じようなタイプがいないのは強みになるかも、と思ったんです。また、マークアップエンジニアという言葉も生まれて間もないころで、未知数でやり
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ドメインパーキング
Velocity：第１回：汎用テンプレートエンジンVelocity
