コーディングガイド by @mdo
HTMLシンタックス インデントには半角スペース2個分のソフトタブを使用すること。これが全ての環境で全く同じように見せる唯一の方法。 ネストされた要素はかならず1段階だけインデント(半角スペース2個)すること。 いつもダブルクォートを使うこと。属性値に対してシングルクォートを使わないこと。 閉じタグの無い要素に対して、末尾のスラッシュは省く事。HTML5仕様に省略して良いと書いてある。 省略できる閉じタグを省略しないこと。(例えば</li>とか</body>)。 <!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <img src="images/company-logo.png" alt="Company"> <h1 class="hello-world">Hello, world!</h1> </
HTML&CSS フロントエンド 何度も読み直したい資料・ツールまとめ - 酒と泪とRubyとRailsと
HTML5/CSS3などのフロントエンドもWeb上の資料が充実しすぎていて、ついつい今までなんとなく作って体系的な知識が不足していました。知れば知るほど奥が深いフロントエンド・コーディングを少し手も効率的にするために、いくつか書籍を購入したり、ネット上の資料を読み込んでみたので、備忘録がてらまとめていきます。 (02/05 20:10) 定期見直し 🎂 [Style Guide]「Google HTML/CSS Style Guide」の和訳 Googleが作ったStyle Guide『Google HTML/CSS Style Guide』を和訳していただいた『Google HTML/CSS Style Guideを適当に和訳してみた』。HTMLのベーシックな書き方から、CSSの書き方まで一貫している。個人的にはCSSのプロパティがアルファベット順というのは合理的だと思う！ 🐰 [S
CSSでfloatを解除する方法のまとめ
CSSのfloatを解除（クリア）する方法をまとめてみました。 以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが、その後色々なテクニックがあることに気がつきました。 CSS の after 擬似要素で回り込みを解除する ということで、そもそものfloatの問題（というか仕様）と、その対処方法についてネットで調べた情報を一通りまとめました。 １．floatにより親要素の高さが出なくなる（＝背景がなくなる）問題 親要素の中にある子要素にfloatプロパティが設定されていると、内容をもたない親要素の高さが0になるという仕様になっています。 例えば、次のCSSとHTMLを例にします。 <style> #container { width: 200px; background: #ddd; } .box { width: 25px; margin: 10px; paddi
知らないといつまでたってもHTMLとCSSが理解できない暗黙の仕様4つ
調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。
フォーム機能の拡張－HTML5リファレンス
■フォーム機能の拡張 HTML5では、フォームに関する新しい属性や指定できる属性値が多数追加される予定です。 入力必須・妥当性チェック・入力補助など、 これまでJavaScriptで作成されることの多かった機能が、 HTMLタグの属性だけで実現できるようになりそうです。 いずれも使用頻度の高い機能だけに、各ブラウザのサポートが待ち遠しいところです。 ■<input>タグのtype属性に追加される値 HTML5では、<input>タグのtype属性に指定できる値の種類が増えています。 それぞれの値を指定した場合、例えば、<input type="email">を指定すると、 この属性値をサポートしているFirefox4・Opera10・Google Chromeなどのブラウザでは、 送信ボタンを押したときに入力されている値がメールアドレスとして妥当かどうかチェックしてくれます。 また、Ope
[Tutrial] TheCodePlayer - 作例と、そのライブコーディングを見れるサイト
[Tutrial] TheCodePlayer – 作例と、そのライブコーディングを見れるサイト Pocket Tweet CSS3やHTML5を使った作例の紹介と、そのライブコーディングを見る事のできるサイト。作例を選択すると、まずは動作デモを見る事ができます。作例デモ画面内で「Play Walkthrough」を押せばライブコーディングが始まります。また「View Code」では単純にコードだけを見る事もできます。コーディングの時間の進み方は最大20倍速まで上げる事ができ、徐々に形になっていく様子を見る事ができます。これなかなか勉強になりますね。時期的に新人の教育にも使えそうです。 TheCodePlayer
Coda 2のトップ20シークレット…。（Coda 2について書かれた記事を意訳してみました） | Appdrill
Panic のブログに「Top 20 Secrets of Coda 2」 という記事があったので意訳してみました。Coda 1 の時からある機能も載っていましたが、それらもそのまま載せています。 別々のファイルを分割表示する方法 別々のファイルを分割表示する方法です。大きく分けて２つのやり方があります。 1. ウィンドウを分割した状態で、別のファイルをOption+ダブルクリック、またはパスバーにファイルをドラッグ＆ドロップ。 HTML + CSS + ライブプレビュー 縦に3分割してHTML、CSS、プレビューを表示させると開発が楽です。 HTML、CSSどちらを修正しても自動でプレビューが更新されます。 サイトをグループで管理可能 iPhone のホーム画面のようにサイトをグループで管理できます。 タブをアイコンではなくてテキストで表示 タブバーの下をドラッグするか右クリックから「テ
コーディング前に確認しておきたいこと。 - CSS HappyLife
CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。 制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したりとか、このデザインはどういう意図なんだろう？ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは毎回違っていたり、当然ディレクションをする人も違うので最初に確認しておきたい事が有ったりします。 って事で、その辺りをまとめてみたり、デザインを渡されたときにこのデザインの意図は？って思う事とかもばーっと書いてみます。はい。 なので、デザイナーさんもコーダーにデザインを渡すときに気をつけて欲しい点とかもわかってしまうすばらしい内容（だと良いな）！ じゃあまずは最初に確認しておきたい基本的なことか
これからWebサイトの制作をしたいけど、何から勉強したらいいの？っていう人のためのガイド
以前から、「Webサイトを制作をしたいけど、何から勉強したらいいの？」という質問をよく頂いていました。私が Web制作を勉強し始めた頃に比べると、最近はたくさん情報がありすぎて何から始めればいいのか迷う人も多いみたい …。なので今回は、Webサイトを作るのに必要な知識を簡単にまとめてみました。 最近本だなを整理していて、もう読まなくなった Web制作系の本を片付けたりしてみました。ずーっと前、Webサイトってどうやって作るんだろうってところから始まって、用語もよく分からないまま色んな本を読んだりした頃を思い出します …。 Webサイトは HTML っていうものでできていて、CSS っていうもので、見た目をデザインしていくのかぁ … っていうことさえ、あの頃の私にとっては新しい発見だったなぁ … なんて思ったりしました。 最近では HTML5 とか CSS3 とか、私が勉強し出した頃に比べる
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
連載インデックス「HTML制作が3倍速くなるDreamweaverの裏技」 - ＠IT
Loading...