永久保存版！？携帯コーディング、これだけ読めばすぐできる！ | KAYAC
マークアップエンジニア（以下、ME）のtacamyです！(`・ω・´) カヤックでは、デザイナーもHTMLコーディングをしてくれています。 （いつもありがとうございます！） そんなワケで、本格的にHTMLコーディングはしないけど、 ちょこっとしたページなら組みますっていうデザイナー向けの、 「コレだけ読めばすぐできる」シリーズを始めました。 第一回は「携帯コーディング」についてです。 携帯はPCとは全くの別物なので、なんとなく敬遠しがちですが、 最低限の内容であれば覚えることも少ないですし、 一度覚えてしまえばスタンダードがしばらく変わらないので、覚えておいて損はないですよ！ 携帯コーディングの基本 基礎の基礎 文字コードはShift-JIS CSSはインラインで指定（タグに直接style属性を追加する） 画像を含むページ容量100KB以内（HTML自体の容量は9KB以内） 画像はgifか
斜体とイタリック体は違うのか - スタイルシートTipsふぁくとりー
《2016年2月22日 11:30 公開/更新》 斜体とイタリック体は違うのか [テキスト] 日本語の文章内で斜体を使うケースは少ないんでしょうかね？ あまり読みやすい書体ではないと思いますし。英語圏では、斜体も太字と同様に「強調」を表現したりするらしいですが、日本語ではそうではありませんしね。論文を書くときには、本文中に登場する書名とか論文名とかを斜体で書いたような気がするのですが……。あ、でもそれは英語だけだったかな？ 個人的には（ウェブ上では）、引用箇所(blockquote要素など)を斜体にする装飾をよく使っています。 というわけで、今日は「斜体」で装飾する方法について語りたいと思います。 同じ斜体でも、CSSでの指定には「italic」と「oblique」がある 文字を「イタリック体」で表示するには、以下のようなスタイルシートを書きます。 font-style: italic;
非置換インライン要素とwidth、heightプロパティ - Web標準普及プロジェクト
非置換インライン要素とwidth、heightプロパティ CSSのwidthプロパティ、及びheightプロパティは非置換インライン要素には適用されません。 しかし、Windows版InternetExplorerが誤った解釈を行っているため、注意が必要です。 非置換インライン要素にwidthプロパティやheightプロパティを指定した場合の正しい処理 CSSの文法上、非置換インライン要素にwidthプロパティやheightプロパティを指定しても文法違反ではありません。 ただし、非置換インライン要素の場合、 widthプロパティとheightプロパティの指定を無視するのがWebブラウザの正しい動作です。 これは仕様書上では次のように書かれています。
imgのheightとwidthは必須か?
img要素は、HTML文書の或部分に畫像を埋め込む爲の要素です。必須屬性は、畫像のありかを指示するsrc屬性と、代替テキストを示すalt屬性のみです。 屡々「マナー」として、height屬性とwidth屬性を必ず記述しなさい、と言はれます。 「WIDTH」と「HEIGHT」はなくても画像は表示されますが、もし書いておかないと、ブラウザはまず文字のレイアウトを決めてからその後で、画像の入る位置を再び計算することになり結果として表示するのが大変遅くなります つまり画像を全て読みこんで大きさがわかるまで表示されないのです。でももしサイズが書いてあればその大きさ分を空けておくので、画像が読みこまれてからそこに表示するだけとなるので早くなるのです。 <IMG SRC="...">タグでイメージを表示する際には、WIDTH=n と HEIGHT=n 属性を必ず指定するようにしましょう。これを指定しない
小さな小さな HTML Tips - <image> with "width"/"height" : wids.net
訪れたサイトは美しいレイアウトをしているようだ。 ブラウザがファイルを読み文章が右揃えで表示されはじめているのが見える。まだ画像が何も表示されていないが目は勝手に文章を追っていた。 そしてその数瞬後、画像が表示されはじめた時、私の心には大きな落胆があった。先ほどまで自分が読んでいた文章があった場所が表示されはじめた画像に追いやられ、文章が画像に踊らされるように再配置されていく。画像の容量は巨大で、何枚も配置されているようだ。画面の下の方にはまだ文章が踊っているのが見えた。 あぁ、ここの管理者は <img> タグに "width"/"height" 属性があることを知らないのだ。 ウェブブラウザは最初に HTML ファイルの中身を読み込みます。そして画像表示を意味するタグ <img> があった場合、それに従い画像ファイルをダウンロードし描画します。 つまり、単純な文字列と画像との読み込みには
img要素のwidth,height属性は指定しない - EC studio デザインブログ
img要素におけるwidth,height属性の指定というのはHTMLを勉強しはじめたときから「必須」のものであると考える人が多いと思うのですが、 これは「必須」ではありません。 また弊社では社内のガイドラインとして 「img要素にはwidth,height属性は指定しない」としました。 この方が現状メリットが大きいと考えたからです。 width,height属性の指定が「必須」であるか「任意」であるか 結論からいうと、仕様書上「任意」とされています。 これは弊社サイトで多く採用されている XHTML1.0（Transitional）においてはもちろん、strictであれ、HTML4.01であれ「任意」とされているのは同じです。 しかしそれがなぜ「必須」というような流れになったか？ その大きな理由としてはNetscape Navigator 4.xのような今となっては古くなったブラウザへの
letter-spacingをマークアップする際の注意点 - Trans
body要素にletter-spacingを入れる際の注意点が分かったので、自分の備忘録としても書いておきます。 今までは、 /*\*/ letter-spacing: 0.1em; /**/というふうにbody要素に書いており、MacIEの「letter-spacingを指定した要素内の表示が崩れる」というバグをホーリーハックで防いでいました。 基本的にはこれさえ守っておけば、うまく表示されるはずなのですが、最近作ったブログではコードによっては、うまく表示されませんでした。改行しているはずの箇所が、全く改行されていない。それもWinIE6のみ。てっきり、MacIEさえ気をつけておけばOKというわけではなくて、WinIEにも配慮しなければならないよう。 では、何が問題だったのかと言いますと、br要素による改行なんですね。WinIEには「letter-spacingを指定した要素内で連続した
line-height の値には単位なしが良いとされる理由
CSS で行ボックスの高さを指定する line-height 値に、em(length) や %(percentage) などの単位を付けて指定しているサイトを意外と見かける。それは間違いではないし、例えばナビゲーションとかでブロック要素の垂直センターに配置するために意図的に指定しているんであれば良いんだけれど、そうでないなら line-height 値には単位なし (number) で指定した方が良いのにとか思ったりする。その理由は Eric's Archived Thoughts: Unitless line-heights でも分かりやすく説明されているんだけど、ちと劣化コピーしてみる。 単位ありと単位なしの違い 手っ取り早く説明するために、サンプルを作ってみた。p 要素があって、その中にインライン要素の em で一部分を強調している。分かりやすいようにそれぞれの font-size
wordpress画像の回り込みCSS設定
wordpress画像の回り込みCSS設定 ｗｐで画像を貼る時、右寄せや左寄せにしても 大抵の無料のテーマ等では画像の回り込みをさせてくれません。 そこでCSSに回り込みの記述を入れると自由に設定できます。 この画像は左配置にしています。 wordpressでは画像の回り込みを設定すると<img class=alignrightなどとクラス付けされます。なのでCSSには [css]img.centered { display: block; margin-left: auto; margin-right: auto; } img.alignright { padding: 4px; margin: 0 0 2px 7px; display: inline; } img.alignleft { padding: 4px; margin: 0 7px 2px 0; display: inlin
ulタグで横並びのメニューを作る2 - CSS Tips - 仮想空間
ulタグで横並びのメニューを作る2 - CSS Tips - 仮想空間 主要ページへのリンク ホーム インターネット Webコラム HTML Tips CSS Tips Webテンプレート Movable Type 趣味と娯楽 バイク クルマ TVゲーム 映画 音楽 メモ 雑記 時事考察 不思議考察 犬と猫がいる生活 犬の龍介 猫の虎之助 猫のココ アーカイブ ulタグで横並びのメニューを作る2 ulタグで作る横並びメニューに、アイコンを加える方法を紹介します。 この方法は、トピックパス（パンくずリスト）や見出しなどにも応用できるので、是非お試しください。 今回使う画像は以下の2つです。 メニュー用アイコン ic_arrow01.gif（12px×12px） トピックパス（パンくずリスト）用アイコン ic_arrow02.gif（12px×12px） HTMLの記述 <ul clas
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
印刷用に使えるツールやブックマークレットいろいろ | DesignWalker
ウェブデザイナーにおすすめ Google Chromeエクステンションいろいろ | DesignWalker
CSSのバックグラウンド画像をランダムに表示してみる | DesignWalker
https://www.seedsman.jp/blog/?cat=154&paged=2
CSSツールラボ
Uka-p.com is for sale | HugeDomains
Warcraft 3 攻略Blog: CSSで画像リンクの枠（ボーダー）を取る方法