マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法
Webページを制作にする時に、マージンやパディングをどのようにつけるか悩むことがあります。2カラムの隙間は、左パネルの右マージンorパディングなのか、右パネルの左マージンorパディングなのか。 Web制作の今までの考え方がきっと変わる、モジュール式のアトミック デザインにおけるHTMLとCSSの実装のロジックを紹介します。 Learning from Lego: A Step Forward in Modular Web Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様・元サイト様にライセンスを得て翻訳しています。 最近のWeb制作の手法は、数多くあるフレームワークやUIキットからあらゆる種類のコンテンツのブロックを組み立てています。しかしながら、モジュール性と汎用性はまだWeb要素レベルでは達成されていないと言えるでしょう。 LEGOブロックの考え方を
Pandoc - index
If you need to convert files from one markup format into another, pandoc is your swiss-army knife. Pandoc can convert between the following formats: (← = conversion from; → = conversion to; ↔︎ = conversion from and to) Lightweight markup formats ↔︎ Markdown (including CommonMark and GitHub-flavored Markdown) ↔︎ reStructuredText → AsciiDoc ↔︎ Emacs Org-Mode ↔︎ Emacs Muse ↔︎ Textile → Markua ← txt2t
The Story of Shelf - Hicks.design
Now that the Shelf Theme is finally launched, I wanted to write up some of the process and challenges that The Theme Foundry and I faced in it’s creation. I’d started with the intention of dribbling everything, but constantly found that I wanted to show more than 400x300px, so I started documenting the process in a Flickr Set instead. This post will flesh those out further. Creation I had a very c
世界初？のZen Coding本が発売されました | gaspanik weblog
今年の頭に一部で話題になったZen Coding、多くの方がブログに解説を書いて下さっているので目にした方も多いかもしれません。そのZen Codingの世界初となる解説本「HTML+CSSコーディングが10倍速くなる Zen Coding」が本日11月26日に発売されました。 今回は共著者として、「Dreamweaver Town Meeting in Tokyo」で同じくZen Codingを取り上げたYahoo! JAPANの岡部さんに協力いただきました。 本書は、Zen Codingを知らないWeb制作に携わってる方はもちろん、もう少し敷居を低くというか、業務上ちょっとしたHTMLを書かなくてはならないWebディレクターの皆さん、オンラインストアや企業のブログの更新担当の皆さんにも、いろいろなエディタに対応し始めているZen Codingを使っていただきたく比較的やさしめな内容にな
Google、HTML5を使ったiBooks風ウェブ技術解説書をリリース
Unlike Light’s older phones, the Light III sports a larger OLED display and an NFC chip to make way for future payment tools, as well as a camera.
検索エンジン3社が開始した、rel=canonicalの使い方 | Creazy!
Google、Yahoo!、Live(Microsoft)の3社が「ページの正当なURL」を定義するための方法を導入する事になったようです。 headタグの中にrel=”canonical”というlinkタグを記述すれば良いそうです。 <link rel="canonical" href="http://creazy.net/" /> 詳しい説明は下記ページが参考になりました。 ・検索エンジン3社、正しいサイトURLを認識させるcanonical属性を導入（URLの正規化） :: SEM R ・サイト内の重複コンテンツを防ぐ新たな手段、rel=”canonical”が登場 – F.Ko-Jiの「一秒後は未来」 で、早速色々試してみました。 MT(MovableType)で正統なURLを指定する方法 下記のようなタグをテンプレートのheadの中に指定するだけです。 （※エントリーアーカイブ用
Design Trends (Predictions) in 2010 - Web Designer Wall
As we are stepping in a new decade, I can foresee that web design in 2010 is going to be fun and filled with experimental works. With the new CSS3 and HTML5, designers and developers are trying to utilize the new features to create impressive designs. Sketchy and large background styles are fading out. Serif fonts and texturized background will be popular. Thanks to CSS3, we are going to see a lot
【コラム】OS X ハッキング! (268) 世界最速はダテじゃない? Safari 3.1を検証する | パソコン | マイコミジャーナル
息をするのも面倒くせぇ (by ゲイラ - 北斗の拳) というわけではありませんが、できるだけ文字を書きたく / 入力したくないこの私。iCalにも、自分以外にはわからないほど略した文字列を書き込んでいます。で、3月22日の予定は「人犬」。もちろん飛鳥了のことではありません、バリウムを飲まなきゃならないんです……ああ、憂鬱。 さて、今回は「Safari 3.1」について。Leopardの発売に先立ちOS X 10.4.11とともにリリースされたv3.0から約4カ月、メジャーバージョンこそ変わらないものの、機能的には大きく前進している。いまやOS Xユーザ必携のこのWebブラウザについて、これまで紹介してこなかった機能を中心に検証してみたい。 ついに登場「Safari 3.1」 まずはお約束、ベンチマーク Safari 3.1のウリは、なんといっても「高速性」。すでに当コラム第262回で説明
HTML 5 / A vocabulary and associated APIs for HTML and XHTML / W3C Working Draft 22 January 2008
Table of contents 1 Introduction2 Common infrastructure3 Semantics, structure, and APIs of HTML documents4 The elements of HTML5 Microdata6 User interaction7 Loading web pages8 Web application APIs9 Communication10 Web workers11 Worklets12 Web storage13 The HTML syntax14 The XML syntax15 Rendering16 Obsolete features17 IANA considerationsIndexReferencesAcknowledgmentsIntellectual property rights F
HTMLの要素をSQLのように取り出せるPHPのライブラリ『htmlSQL』 | IDEA*IDEA
ドットインストール代表のライフハックブログ
標準準拠・後方互換モード各々の CSS 解釈の違いをまとめたドキュメントを共有
2007-07-27T21:11:11+09:00 最近のブラウザには DOCTYPE 宣言の有無や種類で大きくわけて2種類の表示モードを切り替え、CSS や HTML の解釈を変える機能が備わっています。マイクロソフトは同様の機能を DOCTYPE スイッチとしており、一般的にもそう呼ばれることが多いように感じます (この記事でも DOCTYPE スイッチとします)。 DOCTYPE スイッチはオンの状態で standards mode (標準準拠モード) に、オフの状態で quirks mode (後方 (過去) 互換モード) になります。標準準拠モードは仕様に準拠した厳格な表示モード、後方 (過去) 互換モードは仕様に準拠していない古いブラウザとの互換を目的とした表示モードです。つまり DOCTYPE 宣言の記述が無いようなコンテンツに対しては、仕様に準拠していない古いブラウザの解釈
ちょっとしたメモ - W3Cの新HTML作業部会
昨年10月のバーナーズ＝リーのびっくり発言から約4カ月を経て、W3Cに新しいHTML作業部会が設置された。HTML4とXHTML1をベースに、新しい(X)HTML仕様を2010年を目標に策定していく。従来のHTML作業部会はXHTML2作業部会という扱いになる（HTMLとは違う狙いなので、名前を変えることも検討しているそうだ。そりゃ大いに結構）。 Charter（設立趣意書）によれば、この新作業部会は次のものを策定していく。 HTML4を発展させた、ウェブの文書とアプリケーションのセマンティクスを表現する言語 この言語をXMLによって記述（シリアル化）する拡張可能な形態 既存ブラウザの「クラシックHTML」パーサと互換性のある、XMLではない記述形態 この言語のためのDOMインターフェイス フォームその他のUIで用いるための、プログレッシブバー、メニューなどの共通部品 リンクづけられたメデ
DOCTYPE スイッチについての検証とまとめと一覧表 - hxxk.jp
DOCTYPE 宣言の種類によって、ブラウザのレンダリングが標準準拠モードになったり後方互換モードになったりすることを DOCTYPE スイッチと言います。 今回は要点だけ手短かに行きたいので詳しくは解説しませんが、 IE 6 だと DOCTYPE 宣言より前になんらかの文字 ( 記述が推奨される XML 宣言であっても ) があれば問答無用で後方互換モードになるバグがあるとか、まあよく聞く話題です。 標準準拠モードと後方互換モードでレンダリングにどんな違いが現れるかは Lucky bag::blog: xml宣言についてや !DOCTYPE スイッチが良いリソースなのでそちらをご覧下さい。 既存の DOCTYPE スイッチ一覧表に "?" ここ数日、この DOCTYPE スイッチについて調べていたのですが、書籍やサイトに書かれている情報と、実際に試してみた結果が少し違うんですよね。 ある
Validome - A Free Validation Service for HTML and Accessibility - investing.io
Validome allows Web Developers to check their website’s syntax with a validation service for compliance with the current HTML specification. Validation for accessibility compliance ensures that all users can effectively use your website and understand your content. This tool also provides an SEO audit, which is especially handy for those investors out there looking at acquiring an online business.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Components · Twitter Bootstrap
http://dl.dropbox.com/u/2271551/javascript/photohtmlmk.html
zen-coding - Set of plugins for HTML and CSS hi-speed coding - Google Project Hosting
Wikipedia:Tools/Editing tools - Wikipedia
HTMLPlayGround: Online HTML/CSS/JS Editor with Live Preview
WikipediaAPI - ウィキペディア情報をサイトで利用できるAPI