Zen-Coding、0.7のすすめ 2012-07-01 / 2013-02-27 HTML/CSSのコーディング速度が3倍上がる、といわれるZen-Coding。 使いこなしてコーディング速度が3倍になっていますか? SassとかLessとか流行ってる中、あえてZen-Codingを紹介します。 (Zen-Codingの現在のバージョンは0.7です。 古いバージョンを使用している方はアップデートをお勧めします。) 追記 Zen-Codingとは Zen-Codingは様々なエディタに対応しており、Webデザイナーでも導入が容易なのが魅力です。 エディタのサポートは、3つの分類に分かれます。 公式サポート Aptana/Zend Studio/Eclipse (Win/Mac/Linux) TextMate (Mac) Coda (Mac) Espresso (Mac) Komodo E
CSS3には興味深い様々なプロパティがありますが、これらを勉強するにあたって知っておきたいCSS3の基礎をまとめてみます。 過去の記事に手を加えたものや新たに書いたものなど幅広くまとめてみましたので、ぜひ抑えておいてください。 今回は結構ボリュームもあるので目次を作っています。 1. スタイルシートの構造 CSS3に限ったことではないですが、CSSの構造は下の図のように、セレクタ、プロパティ、値となっています。 もちろんプロパティと値は一対です。CSSといえば、プロパティのイメージが強いですが、セレクタも結構奥が深いです。 CSS3ではセレクタもプロパティも新たに追加されていますので、違いをちゃんと理解しておきましょう。 2. CSS3セレクタ CSSセレクタはスタイルを適用する対象を選択するものです。普段何気なく使っているclassやidなどもセレクタの1つです。 CSS3セレクタはW3
はじめに「Zen Coding」といっても、聞いたことがない方も多いかもしれません。 Zen Codingは、HTML/CSSコーディング支援ツールで、DreamweaverなどのWebオーサリング環境や、Windows/MacOS/Unixのテキストエディタ用のマクロ/プラグインとして配布されています。 欧米圏では、実に2年以上前から話題を呼んでいました。筆者自身もブームに乗って導入し、今ではHTML/CSSのコーディング作業はすべてこれを使って行っています。 日本ではあまり知られていませんでしたが、2010年はじめから、ネット上では知る人ぞ知る存在として、隠れたブームとなっています。筆者のひとり、こもりのブログのZen Codingについての記事は多くの方に読まれ、USTREAMで行ったライブコーディングも大好評でした。たくさんのWeb制作者の「こんな便利なものがあったなんて!」という
HTML5版の新規でサイトを作るのに使えそうな一式です。 今までの新規で使えそうな一式のVer3からも有る程度流用はしていますが、結構いじってます。 今までみたいに、社内のマークアップエンジニアとかそういう人がもう居ない環境なので、何処かで使われていた訳ではありませんが、まー最初の準備って地味に面倒なのでちゃちゃっと始めるには良いんじゃないでしょうか。 【HTML5】新規でサイトを作るのに使えそうな一式。Ver 1をDL(zip:12kb) HTML5版のVer 1を見る 社内のマークアップエンジニアとかって書いたら、これどうなのよ?とか話してた頃がちょっと懐かしくなった。 コーダー飲みとか、CSS Niteなんかで、マークアップエンジニアやコーダーさんと会う機会は結構有るのに、そういう具体的な?話まではしないからなぁ・・・ それはさておき、中身のご説明などを続きにて。 中身のご説明 zi
About hirasawa(平澤 隆)に関するまとめ的ページです。 まとめと言う割には、個人的な情報がボクが運営している他サイトの自己紹介とあまり変わらない気がしないでもないような。 News 2013-1-17 フリーランスとしての活動を廃止し、株式会社ラテールを設立しました。今後は法人として活動していきます。 2011-11-27 9月27日にインプレスジャパンさんより発売した「できるクリエイター 逆引きHTML+CSSデザイン事典 Webクリエイターの現場で必要な基本と最新動向 (できるクリエイターシリーズ)」を書かせて頂きました。今回も共著で、WWW WATCHの中の人と書いてます。 2010-11-11 MT underHat で公開しているテーマ「ぴくログ」がMovable Type コンテスト 2010のテーマ部門で「優秀賞」を受賞しました! また、「カンバス」も「特別賞
Web制作を少しでも効率化しよう と思って(今更)いろいろ便利そう な情報を探しました。既に使って いる情報の方が多かったのです が、折角調べたのでシェアしたい と思ってエントリーです。 コーディングをもっと円滑に、という旨の情報です。順不同。あんまり多いと逆効果なので量は絞りました。一応これでも絞りました。絞ったつもり。 zen-coding 話題になったzen-coding。だいぶ慣れて来た方もいらっしゃるのでは。 zen-coding(本家) HTMLコーディングが3倍速くなる?「Zen-Coding」 秀丸Zen- Codingマクロ コーディングの効率化を図るZen codingをDreamweaver cs4に入れる方法 WP Zen-Codingが凄く便利 初期設定とかTipsとか 制作前に知っておくと便利なコードとかTipsいろいろ。 css書く前にチェック。 もう、cla
こんにちは これはスクロールするとページトップへ戻るボタンがフェードして表示されるサンプルです。 jQueryを使用しています。 CSS3は装飾しているだけなので動作には関係ないです。 このサンプルの記事はこちら
What are CSS Sprites CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image. This technique can
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く