2016年5月24日に実施された「第14回HTML5ビギナーズ つまずくこともあるけどこうやって成長したよ!」での講演資料です。
2016年5月24日に実施された「第14回HTML5ビギナーズ つまずくこともあるけどこうやって成長したよ!」での講演資料です。
Internet Explorer 7から対応したHTML/CSS/JS Internet Explorer 7はMicrosoft社から2006年10月18日(日本語版は11月2日)にリリースされたウェブブラウザ。 HTML 透過PNGフォーマット abbr要素 CSS 子供セレクタ(親要素 > 子要素 ) 隣接セレクタ(要素1 + 要素2) 間接セレクタ(要素1 ~ 要素2) 属性セレクタ([属性名], [属性名="属性値"], [属性名~="属性値"], [属性名|="属性値"]) a要素以外をセレクタにした:hover擬似クラス, :active擬似クラス :first-child擬似クラス max-widthプロパティ, max-heightプロパティ min-widthプロパティ, min-heightプロパティ positionプロパティの fixed の値 border-c
先日、Twitterで 『レスポンシブWebデザインをする際に、ナビゲーションなどをPC用とSP用の2種類、HTML内に書いて、出し分けることがあるようだ』 というようなことをつぶやいたのですが、自分では思ってもいないところでリツイートされました。 自分はちょっとした愚痴のつもりで書いたのですが、これはもうちょっと深く考えるべき問題なのかもしれない。と感じ、 自分なりにもうちょっと考察して、人と話して、自分なりの答えが見つかったので書いてみます。 私の周辺では、レスポンシブWebデザイン(以下、RWD)の案件をやるとき、「PC用」「スマホ用」2種類のデザインをお客さんに提出し、それをベースにコーディングすることが多いです。 PCサイトとスマートフォン最適化サイトを両方作るのと同じような手法です。 いわゆる「スマートフォン最適化」では、PCとスマホ用のHTMLは別で作れますので、デザイン上の
頭の中のページ構成図をリズムで書いてHTMLに展開してくれるZen-Coding。 もはやHTMLコーダーで使っていない人はいないであろうZen-CodingがHTML5/CSS3の広まりと共にEmmetという名前に変更し、進化をとげているようです。 まだ開発中で公式アナウンスはまだのようですが先行して試すことが可能です。 Zen-Codingおさらい Zen-Codingは経験済みとして話しますが、まだ使ったことがないという方はまずこの映像から。 早速EmmetをSublime Text 2にインストール 1. Package Controlのリポジトリに追加 Sublime Text 2の標準リポジトリにはまだ入っていません。Cmd + Shift + Pで入力ボックスにadd repositoryを入力、下記のリポジトリを追加します。 https://github.com/serge
Robert’s talk Webページの制作で水平リストが必要な場合にはフローレイアウトを使って要素を配置していくということがある。しかし、水平フローにさらに可変の高さを持った要素が入っていたり、それを垂直方向に複数行展開するということになると、なかなか面倒なことになってくる。ブラウザの幅に対応したり、ブラウザごとにデザインを揃えるということになると、頭を抱えることになる。 Robert Nyman氏がそうした場合の代替方法のひとつにdisplay: inline-blockを使う方法があるとし、CSS display: inline-block: why it rocks, and why it sucks - Robert's talkにおいて簡潔な説明とサンプルコードおよびその欠点を紹介している。display: inline-blockは要素をブロックとして作成しつつ、インライン
HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 Avoiding common HTML5 mistakes : HTML5 Doctor 翻訳といっても要約みたいな感じですので、書いてあることをそのまま日本語にしたものではあり
SEOでは一般的にアンダースコアとハイフンは意味合いが違うと言われています。URL最適化5つのSEOポイント | Web担当者Forumによれば、次の通りの使い分け方法があるようです。 ハイフンとアンダースコアは検索エンジンに対する意味合いが異なります。ハイフンは文字通り単語を分離するために使われる記号なので、ハイフンの前後の単語は個別のキーワードとして認識されます。逆に、アンダースコアは前後の単語を連結するので、アンダースコアも含めた1つのキーワードとして認識されます。 本記事で紹介したいのは、この使い分けはSEO以外でも一般的だということです。試してみたところWindows / Mac でも同様の現象が確認できます。 アンダースコア(_)をつけたファイル名でダブルクリックした場合 アンダースコアは連結された単語と見なされるため、全て選択される ハイフン(-)をつけたファイル名でダブルク
XHTML+CSSのid/class名でキャメルケースを使うべきではない7つの理由を、CSS WIZARDRYの「CSS: CamelCase Seriously Sucks!」から覚え書きです。下記はその意訳です(間違っていたらすみません)。 はじめに 今、この記事が何人かの人をいらだたせることは分かっているし、私が普段どのようにコードを記述しているのか伝えたいのではありません。私はシングルラインCSSがキライです。ただ、明瞭で、道理にかなった、理解しやすく、首尾一貫したコードであるならば、そんなに文句を言うことはありません。私の目から見て最も重要なのは一貫性です。しかしながら、キャメルケースは、本質的に矛盾していることが明らかなのです。 1. CSSはハイフンで区切られた構文 CSSはハイフンで区切られた構文です。どういうことかというと、font-size、line-height、bo
codicは、プログラマーのためのネーミング辞書です。新しいcodicでは、翻訳エンジンを搭載しネーミングをジェネレートできるようになりました。
マークアップエンジニア(以下、ME)のtacamyです!(`・ω・´) カヤックでは、デザイナーもHTMLコーディングをしてくれています。 (いつもありがとうございます!) そんなワケで、本格的にHTMLコーディングはしないけど、 ちょこっとしたページなら組みますっていうデザイナー向けの、 「コレだけ読めばすぐできる」シリーズを始めました。 第一回は「携帯コーディング」についてです。 携帯はPCとは全くの別物なので、なんとなく敬遠しがちですが、 最低限の内容であれば覚えることも少ないですし、 一度覚えてしまえばスタンダードがしばらく変わらないので、覚えておいて損はないですよ! 携帯コーディングの基本 基礎の基礎 文字コードはShift-JIS CSSはインラインで指定(タグに直接style属性を追加する) 画像を含むページ容量100KB以内(HTML自体の容量は9KB以内) 画像はgifか
2013/1/28 サーバーを引っ越しました。お手数ですがブックマークし直してください。ついでにscriptタグとHTMLコメントを除外できるように機能もアップしてますから! 必要に駆られてタグの閉じ忘れを簡単にチェックするブックマークレットを作ってみた。 ほんとに開いたタグの閉じ忘れしか検出できなくて、たとえば開いてないのに閉じてるタグとか、閉じタグと開きタグが互い違いになっちゃってるとこの検出とかはなにもやってない。(11/29現在)11/30 New! 出来るようになりました 機能 ブックマークレットを実行すると ・タグの閉じ忘れを検索する ・開きタグがない閉じタグを検索する ・親より先に閉じちゃってる子がないか検索する ・タグ対応エラーの一覧と、ソースコード中のハイライト表示 以上。たったこんだけのことをやるツールが意外と無かった…いや、あるけど。W3Cツールじゃいかんのかと。でも
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く