意外と知られていないHTMLの基本の話
私はWeb制作が初めての方向け講座だけでなく現役の制作者の方向けに様々なWeb講座をしていますが、現役のWeb制作者の方でもHTMLに関して意外と知られていないんだなと思うことがいくつかあります。 特に、HTML5以前の古いHTMLの使い方のまま覚えている方が多いように思われますので、この記事ではそれを中心に取り上げてみました。 なお、この記事はHTML 5.1およびWHATWG HTML Standardの仕様書を参考に書いています。 width=”100%” のように数値以外の文字列を “” に入れるのはNG たとえばimg要素などで、ブラウザの幅いっぱいに画像を表示したいという場合、昔はimg要素に width=”100%” のような属性をつけることがありましたが、HTML5からはwidthなどの属性値に数値以外を含めることができなくなっています。（つまり%などの単位を含めることがで
The jungle of mobile HTML5 development
I’m a big fan of HTML5; it gives me the speed of development that my creativity needs. But since the rise of mobile, the development with this technology started to be complex. On the desktop, everything was clear. Website development is in a constant evolution; still people have expertise on it. But on mobile, it’s just a nightmare. Developers are confused in the way of developing an HTML5 mobile
『これからの「標準」を身につける HTML+CSSデザインレシピ』を読みました
安定のエ・ビスコム・テック・ラボクオリティです。 HTML+CSSデザインレシピの名の通り、あるパーツを作るためにはどうするのか、実際にコードとともに解説されています。 簡単なパーツでもちょっと仕組みの違う複数パターンが紹介されており、いやーそこはこういうふうにしたのをやってみたいんだけど、というようなことはないでしょう。 TIPSとして覚えておくと役立つ情報もてんこ盛りで、中級以上の方でも十分に楽しむことができると思います。 また、IE8をベースに本書が構成されていますので、最新のコーディング事情がよく分からないという方にピッタリの内容だと思います。 スマホ対応、レスポンシブWebデザイン、さまざまな画像形式の取り扱い、CSS3の利用、CSSフレームワークの利用など、キャッチアップしておけば効率的にコーディングを行えるだろうなという内容が満載です。 いろいろあるみたいだけど億劫で手が出せ
フロントエンド開発今昔物語 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? フロントエンド開発今昔物語 フロントエンドと言っても、アプリやゲーム制作などではなく、いわゆるWebサイト制作のクライアントサイド側の話になります。 時代背景 昔 おじいさんには、Photoshop、Illustrator、Dreamweaverという3種の神器がありました。当時のWebサイト制作は、これらのソフトを利用し、おじいさんが一人で行っていました。おじいさんのような仕事をする人は、Webデザイナーと呼ばれ、とても人気がありました。おじいさんは幸せでした。 今 いつしかWebデザインは分業化されるようになりました。おじいさんは久
http://foreignkey.jp/archives/1503
See related links to what you are looking for.
【開発環境】コーディングを超高速化するためにDreamweaverからSublime text2+Emmetに乗り換えた時のメモ – T2
【開発環境】コーディングを超高速化するためにDreamweaverからSublime text2+Emmetに乗り換えた時のメモ 11月 18, 2012 admin 導入はめちゃくちゃ簡単 下記記事でインストールまで簡単に。 直近だと下の2つ見ておけば大体おｋ Permalink to Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ [Event][SublimeText]第0回 Sublime Text 2 勉強会 で Emmet について話してきた ダウンロード Dev Builds 初期設定等は上記記事にある設定をリスペクトしました笑 Packageのインストール Sublime TextはHTML5等パッケージをインストールする事で使えるようになります。 Dreamweaverではファイルを新規作成時、H
html/css 参考サイト総まとめ
作成：2013/10/15 更新：2014/11/01 Web制作 > 先週、WordPressとEC-CUBEのレイアウトを変更しなければいけなくて、久しぶりにいじっておりましたが、忘れていたり知らなかったことが沢山ありました。レイアウトはSEOやUIにも深く関係しているのもあり、ここらへんでCSSやHTML５を触るときに参考にすると捗る記事を一回まとめようと思います。今回はCMSやオリジナルサイトを作るうえで「知っておくと必ず役立つ」ものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 定番まとめ １．勉強になるテクニック／サンプルまとめ 基本知識 ２．セレクタ ３．メディア クエリ ４．コーディング規約 ５．フォント ６．CSSスプライト ７．アニメーション ８．正確なHTML使用方法 ９．CSSハック １０．書き方／読み方 定番まとめ
Thematic WordPress Theme Toolbox: 10 extremely useful hooks
HTML5 Starter TemplateWhen starting a new project, you need a starter template. Here is a concise and clean template to serve as a basis for your HTML5 projects. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Untitled</title> <meta name="description" content="This is an example of a meta description."> <link rel="stylesheet" type="text/css" href="theme.css"> <!--[if lt IE 9]> <script
HTML5 のマークアップで心掛けたい事 - HTML5 のいろいろな要素
HTML5 のマークアップで心掛けたい事を挙げてみます。 平成25年 5月16日現在、HTML5 勧告に向けて、グラフィカルなウェブブラウザの開発者は HTML5 への対応を急速に進めておりますが、そうでない環境、例えば音声出力ブラウザや CUI 環境向けテキストブラウザなどについては、殆どと言って良い程話を聞きません。 こう言った事から、HTML4/XHTML1 時代の環境でも問題なく取り扱えるようにマークアップすべきでしょう。 はじめに。 平成24年12月17日に HTML5 の勧告候補が発表され、HTML5 は勧告に向けて大きく前進しております。 特にグラフィカルなウェブブラウザの開発者は、WAHTWG に加盟していないマイクロソフト社を含めて HTML5 への対応を急速に勧めており、西暦2014年に勧告される頃には、殆どのグラフィカルなウェブブラウザが HTML5 対応になっている
「CSS Niteビギナーズ：HTML5+CSS3」で紹介したちょっと複雑なセレクタ
先日開催された「CSS Niteビギナーズ：HTML5+CSS3」でCSSセレクタのことをお話ししました。 その中で紹介したちょっと複雑なセレクタです。 li:nth-child(even):nth-last-child(2) 上記のセレクタを紹介したわけですが、こういうふうに書くと li が奇数個の場合だけ後ろから2番目の li をセレクトできます。 li が10個だった場合 まず、li が10個あった場合で考えてみましょう。 :nth-child(even)で偶数番目の li をセレクトして背景を赤くした場合、以下のスクリーンショットのように偶数番目の背景が赤くなりますね。 さて、このときに:nth-last-child(2)になっているのはどいつかというと、前から9番目の li でして、そいつは偶数番目の li にはなりません。 li が8個だとしても12個だとしても、偶数個の場合に
CSS Architectures: Refactor Your CSS — SitePoint
Stay Relevant and Grow Your Career in TechPremium ResultsPublish articles on SitePointDaily curated jobsLearning PathsDiscounts to dev toolsStart Free Trial7 Day Free Trial. Cancel Anytime. The top scalable and modular approaches I covered in the previous article in my CSS Architectures series all have pieces of brilliance that can help you change the way you think about and structure your CSS. Th
正しいHTMLを書く目的はただ一つ 完結編
酒井優 @glatyou @securecat 記事での言及までして頂き、ありがとうございます。改めて記事にもコメントさせていただきたいと思いますが、記事のご意見非常にありがたく思っています。口を開くと長くなるなってしまうのですが、ここでもご返答させて頂きます。 2013-03-22 08:55:51 酒井優 @glatyou @securecat まず正直なところ私もまだタンポポ係程度のコーダーでして、セマンティックというものはそれなりに勉強してはいるつもりですが、まだまだ不勉強です。ご意見の中にもまだ理解していなかった言葉もあり、恥じるところです。とはいえ、曲がりなりにも部下に指導するとき、または 2013-03-22 08:58:32 酒井優 @glatyou @securecat 同業の方に質問されたとき、こうしたことを意識して話をしているつもりです。私も、順序としてはまずHTML
正しいHTMLを書く目的はただ一つ - ネコメシCEOブログ
[HTML]セマンティックで正しいコードを書く目的 ― 二人の主を戴く技術者 - WEBCRE8.jp という記事がFacebookのフィードに流れてきたので読んでみました。 1がいきなり理由（目的）じゃないですし、2と5は同じことを言ってますし（SEOに強いなんて事実はもはや有って無きに等しいのが実態ですが、いずれにしても機械が読んで嬉しいかという話ですので）、3と6はただのエゴですし、4の標準化っていうのはセマンティック云々の文脈でいうならばruleの話ではなくstandardの話をすべきではないでしょうか。カタチの想像もできないような未来を夢見る暇があるのなら、まずWebガバナンスからどうにかする努力をしたほうが何倍も有益でしょう。 2013/3/22 09:56追記：「セマンティックで正しいコードを書く6つの目的」のような構成であると読み取ってしまって（理由の箇条書きだと思って）上
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Home
BEM Advent Calendar 2013 - Adventar
いま使われているHTML5と、これからのHTML5
現場で使える効果的なHTML&CSS構造設計（Effective HTML&CSS）
http://pea.rs/
Code smells in CSS | en.ja | Translated Articles for Front End Developers
スマートフォン向けのフォームを作成する際に参考になる書籍 | book | position: absolute;