CSSリセットとは異なる、Normalize.cssの特徴や使い方などの解説 -About normalize.css
Normalize.cssって何？ CSSリセットとは違うの？ どうやって使うの？ といった疑問を解決するNormalize.cssの制作者自らの解説を紹介します。 About normalize.css [ad#ad-2] 下記は各ポイントを意訳したものです。 Normalize.cssとは Normalize.cssの特徴 ノーマライズ vs リセット Normalize.cssの使い方 終わりに Normalize.cssとは Normalize.cssとは、クロスブラウザにHTMLのエレメントのデフォルトのスタイルを提供する小さなCSSファイルです。HTML5にも対応しており、従来のCSSリセットに代わるものです。 normalize.cssの関連サイト Normalize.cssの本サイト Normalize.cssのソース Normalize.cssのドキュメント Normal
15 Useful Code Snippets for Smartphone Website
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！ スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック（タップ）範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
HTMLとスタイルシート（CSS）の業務スキルレベル 判別表 （５段階） - 主に言語とシステム開発に関して
スキルチェックの目次へ HTMLおよびスタイルシート（CSS）を利用したWebページ制作の，簡易スキルチェックのための調査表。印刷用。 マークアップ・エンジニアとしてのレベルを測定する。 これは，「Webページをコーディングして作る人」全般に当てはまる。 レベルは，０から４までの５段階。 （０） 非エンジニア （１） 初学者（入門書を学習してゆく段階） （２） ノーマル（基礎的な知識があり，ある程度の画面を作れるようになった段階） （３） 中級者（Webアプリの開発プロジェクトで１人月としてカウントできる水準） （４） 上級者（メインPG/デザイナとして，Web UIの主担当を任せられる水準） Webアプリのプロジェクト開始時に作業振り分けをするにあたって，新規メンバ全員にこれを渡して回答してもらうという用途を想定。 なお，システム開発上のスキルをチェックする事が主眼なので，アーティスト（
【レポート】iPhone 4でも3でも綺麗に表示されるCanvasの使い方 | エンタープライズ | マイコミジャーナル
WaltPad - A TypePad-powered blog by Walt Dickinson iPhone 4のディスプレイ解像度はiPhone 3GS/3Gに比べ縦2倍、横2倍になっている。Retinaディスプレイと呼ばれるこの高DPIディスプレイはフォントなどのスケーラブルデータを美しく表示する手助けをする。しかし、スケーラブルではないデータ、例えば画像などはそのまま2x2倍へ引き伸ばして表示するため、どうしてもギザギザが目立ってしまう。 iPhone 4でもPCでも画像を綺麗に表示するCSSの使い方 iPhone 4に対応したWebサイトを作る方法 これはHTML5のCanvasを使った場合でも同様だ。Canvas要素で描画した内容は基本的にピクセルベースであり、iPhone 4では2x2倍に引き伸ばして表示される。この問題は、画像であれば、CSS3のメディアクエリを使って解
IE6 が死んだらできる10のこと（from Ajaxian） - oogatta のブログ
という記事がその昔 Ajaxian に挙がっていたので自分のメモとして残っていたモノを、そろそろ時期が来たかと言うことでこちらに再掲。 http://ajaxian.com/archives/10-cool-things-we%e2%80%99ll-be-able-to-do-once-ie6-is-dead-and-a-few-we-cant 子セレクタ（child selectors）が使えるようになる。 孫以下を除く直の子にだけ適用するセレクタが使えるようになります。 #bodyMain > p {} ul > li 24bit PNG の機能を全て使えるようになる。 アルファチャンネル付きPNGがネイティブで使えます。アンチ付き角丸を背景色毎に用意する必要が無くなります。 属性セレクタ（attribute selectors）が使えるようになる。 感覚的にいって class の3割
iPhone向けサイト構築 基礎文法最速マスター - EC studio デザインブログ
弊社代表の著書、「iPhoneとツイッターで会社は儲かる」の出版記念と、巷で話題の「基礎文法最速マスター」ブームに便乗して、iPhone（iPod Touch）向けサイト構築における基礎とプラス応用のネタと、参考になるリンク集をまとめました。 2010/11/18追記： iPhone向けサイト制作の書籍を執筆しました！ 既存のデスクトップ向けサイトをモデルにした iPhoneに最適化したサンプルサイトの紹介と コードの解説をしています。 iPhone向けサイト制作の入門書に最適です。 「HTML5＋CSS3で作る 魅せるiPhoneサイト」 基礎編 対象ブラウザはMobileSafariです レンダリングエンジンはSafariと同じwebkitですが、MobileSafariの方にはiPhone向けの一部独自拡張（CSS）があります。検証の際は、通常のSafariのウィンドウサイズを狭くし
CSSで垂直中央を実装する【css tips】
CSSで垂直中央を実装する【css tips】 vertical-alignの使い方の続きです。 vertical-align:middleでの垂直表示は説明しましたが、あの方法ですと2行以上の場合は利用できないです。 2行以上の場合に垂直中央表示をするにはpositionプロパティを利用します。 (X)HTMLソース <div> <p>中央に表示<br />したい文字</p> </div> CSSソース div{ width:200px; height:200px; background:#39FF6B; position:relative; } p{ position:absolute; top:50%; left:50%; margin-left:-2.5em; margin-top:-1em; } サンプル positionを使いp要素の開始位置を中央に設定します。 その後にmar
HTMLとCSSしか書かなかったコーダーは今なにしてる？ - Hato-Style
2009年09月13日 （日） Web雑談 風邪ひいた。頭が痛くて熱が下がらない...しかし悶々として眠れない。いろいろと他にの人に迷惑かけちゃったり、マジごめんなさい。ちょっと寝付けなくなっちゃったので、横になりながら頭の中で思ってたことをiPhoneでメモ書き。 マークアップエンジニアはどこへ向かうべきか（を考えてたらカッとなって LL の資料公開） - IT戦記 HTMLは道具 3ping.org マークアップエンジニア云々に関して書いてみる | Blog hamashun.com プログラミング知らないHTMLコーダーがダメな理由 はてな匿名ダイアリー HTMLコーダーやWebデザイナーをバカにしているプログラマーは全員腹切って死ね - kwatchの日記 (X)HTML + CSS しか出来ない人はそれなりに危機感を感じたほうがいいと思った今日の昼ご飯でした。 マークアップエンジ
CSSの実装状況で変わるボックスのデザイン方法
Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない１つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS
HTMLメールの制作時に気をつけたい9つのポイント | コリス
Vdot Mediaのエントリーから、HTMLメールの制作時に気をつけたい9つのポイントを紹介します。 9 best practices for email design 旧式のHTMLを使用する CSSレイアウトは使用しないで、安全で旧式のテーブルレイアウトを使用する。 スタイルは、インラインで指定する head部分のスタイル指定を無視するメーラーがあるので、CSSはインラインで指定する。 背景画像に頼ったデザインにしない 背景画像が表示されない場合があるので、表示されなくても破綻しないデザインにする。 画像は表示されないものと考える 画像が表示されない場合でも、情報が伝わるようにデザインする。 画像には、altを設定する 画像が表示されない場合、altに記述したテキストで情報を伝えられます。 パス指定は、絶対パスを使用する 画像のパスは、http://から記述します。 ファイルの容量は
Web屋のためのVim設定・Tipsまとめ 1/2 - ナレッジエース
Comments» 1. 本日のTwitter 2009-01-18 | memoMania - 2009-1-19 […] Web屋のためのVim設定・Tipsまとめ 1/2 - ナレッジエース http://blog.blueblack.net/item_340 # […] 2. ゲスト - 2009-1-19 (ただ、私の環境だとたまに、実行時にDOS窓が残ってブラウザを閉じるまでファイルが編集不能になる現象が発生します。なぜだろう。) firefoxの前にstartを入れるとどうでしょう？ 3. nase - 2009-1-19 ありがとうございます！動作確認できました。よけいなDOS窓が開かなくなって、いい感じです。本文も修正させてもらいました。 4. sasata299's blog - 2009-2-6 vim環境を晒してみる… いきなりですが、僕はvi派です。emacsは・
display: table-cell を使ったマルチカラムレイアウト - IT戦記
Acid2 Test で IE8 が display: table-cell をきちんとレンダリングするということが分かったので。 IE8 が普及する（笑）のを 5 年くらい先取りして display: table-cell によるマルチカラムレイアウトを書いてみました。 リンクは以下です。 http://amachang.art-code.org/tablecell/ 今のところ Opera 9+、Safari 2+、 Firefox 2+ で正常にレンダリングされることを確認しました。 ポイント ソースを見て分かるように HTML も CSS もめちゃめちゃシンプルです。 ポイントは display: table-cell の要素が兄弟要素の高さに併せて間延びするところでしょう。 これで、何カラムだろうとお手のものです。
ウノウラボ Unoh Labs: CSSによるデザインワークと相性のよいHTMLって？
yamazakiです。最近だいぶあたたかくなってきましたね。おかげで日中眠くて仕方ないわけですがいかがお過ごしでしょうか。 ウノウに入る以前も含めてそれなりに長いことHTMLとCSSを書いてきたわけですが、今回は試みに、「だいたいこういうところに気を使われたHTMLだと、CSSでのデザイン適用やレイアウトがやりやすいな」というこれまでの経験則を簡単ですがまとめてみたいと思います。 まあ、このあたりはCSS書く人とHTML書く人の間でちゃんとルールを決めておけばいいだけの話なので、そもそも何の役に立つのか疑問といえば疑問ですが（笑 たとえばユーザがCSSを書いてスキンを作れるようなサービスを作る際、どういったHTMLにするかを決める、みたいな時には少し参考になる、かもしれません。 ID、クラスを適切に割り振って、要素がCSS側から一意に特定できるように たとえばグローバルナビゲーションとカ
jkondoに憧れて » 超手抜きでウェブサイトをモバイル対応 2008
◆追記 評判良かったので大幅に加筆訂正してみました。 ちょっと昨日、一昨日と携帯向けサイトを作っていたのですが、最近の携帯電話事情がわからず、どういうタグを使えばいいのかとか、CSSは対応しているのかとか、文字コードの問題はどうするのかとかいろいろわからないところが多かったので、ちょっと自分なりに調べてまとめてみます。 間違いが含まれている可能性が非常に高いです。 突っ込み大歓迎。 前提 キャリア別とか2G用にテンプレートを複数作って対応というのは個人で出来るレベルじゃないので、モバイル向けは１ページごとに１枚のテンプレート追加で作る。 なるべくPC向けのテンプレートを大幅に修正しなければいけないようなものは避ける。 長くなるので最初にまとめ ・文字コードはUTF-8。 ・マークアップ言語はXHTML Basic。 ・画像はJPEGかGIF。 ・CSSはインラインで書く。
ポータルメニューとウィンドウコントロール
・初期費用が高くて手が出せない ・ホームページの運用方法がわからない ・競合弁護士との差別化のやり方がわからない ・手間なく管理できるホームページが欲しい 「弁護士集客サポーター」はこのようなお悩みをお持ちの弁護士や法律事務所のために作成したサービスです。 サブスクサービス 弊社が運営しているホームページをご利用いただけます。 ・初期費用無料 ・契約期間の縛り無し ・最長3カ月間無料 でご利用いただいた上で、集客の効果を実感いただけましたら月額2.2万円でサブスク開始となります。 運営・集客サポート ホームページの運営やWEB集客でわからないことは何でも相談いただけます。 ご利用いただいているホームページのみならず、他社ポータルサイトやGoogle広告などの相談にも対応しています。 ご利用者様が「WEB集客で勝つ」ためにできるサポートならリソースが許す限り対応いたします。
新規サイト制作セット（CSSライブラリ＋基本フォルダ構造＋HTMLテンプレート）、一式zipでダウンロードできるようにしました
Account Suspended This Account has been suspended. Contact your hosting provider for more information.
マークアップエンジニアのキャリアパス
マークアップエンジニアはどこへ向かうべきかを読んで。 僕らがやってる多くの仕事って、「生産技術」の範疇だったりするんですよね。 で、とりあえず気になったところ、and 感想。 ・技術がわかるかわからないかというより、如何に早く、正確にできるかできないかってのは職能として重要。 ・仕様書の理解が難しいということを除けば、仕様が決まってることに対しての仕事なんだよね。 ・でも、そういうのって野球も同じだったりして。野球もルールという制約の中で、如何にパフォーマンスを発揮するか？という仕事ですよね。 ・ただ野球と同じで、後発の人が追いつくのは割と簡単だというのなら、長くはできない仕事なのかもしれない。（同じ仕事ができて、しかも体力勝負なら若い方が重宝される。） とりあえず間違ってると思うこと。 ・マークアップエンジニアのキャリアパスはプログラマーでもビジュアルデザイナーでもない、と思う。 （必然
標準準拠・後方互換モード各々の CSS 解釈の違いをまとめたドキュメントを共有
2007-07-27T21:11:11+09:00 最近のブラウザには DOCTYPE 宣言の有無や種類で大きくわけて2種類の表示モードを切り替え、CSS や HTML の解釈を変える機能が備わっています。マイクロソフトは同様の機能を DOCTYPE スイッチとしており、一般的にもそう呼ばれることが多いように感じます (この記事でも DOCTYPE スイッチとします)。 DOCTYPE スイッチはオンの状態で standards mode (標準準拠モード) に、オフの状態で quirks mode (後方 (過去) 互換モード) になります。標準準拠モードは仕様に準拠した厳格な表示モード、後方 (過去) 互換モードは仕様に準拠していない古いブラウザとの互換を目的とした表示モードです。つまり DOCTYPE 宣言の記述が無いようなコンテンツに対しては、仕様に準拠していない古いブラウザの解釈
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
%26utm_content%3DGoogle%2BReader)
css-lecture.com
The Do’s & Don’ts of Modern Web Design
