case:MobileDesign! モバイルサイトのデザイン紹介ブログ 引っ越ししました。 http://case-mobile-design.com/ case:MobileDesign! モバイルサイトのデザイン紹介ブログ > 2010-03-01 >
case:MobileDesign! モバイルサイトのデザイン紹介ブログ
case:MobileDesign! モバイルサイトのデザイン紹介ブログ 引っ越ししました。 http://case-mobile-design.com/ case:MobileDesign! モバイルサイトのデザイン紹介ブログ > 2010-03-01 >
オンライン小説書きのTips。｜ルビ付き小説。IEで行の高さを整え、さらに他ブラウザにも対応させる
ファンタジーやSF系小説を書いていたり、漢字のややこしい登場キャラが作中に出現しているとしばしば漢字にルビを振りたくなることがあります。htmlではrubyタグというタグがあるんでありがたく利用するんですが、こいつを使った小説(ノベル)はその行だけ高さがズレる……。かといっていちいちカッコで振り仮名（ルビ）をつけるわけにもいかない場合があります。 そんなわけでルビを使いまくった小説（→自宅サンプル：別窓）について、より多くの方に美しく見てもらおうといろいろ頑張ってみました。先人の素晴らしい技術の寄せ集めですが、組み合わせ方によってはこれからルビ付き小説を書く方の助けになるかもしれませんので、この辺で少しやり方をまとめておこうと思います。 基本。IE用にルビをふり、なおかつ未対応ブラウザでは括弧表示にする加工 JavaScriptによるCSS振り分け Firefox3・Opera9・Safa
HTMLをWPテーマ化する時の手順リスト
WordPressWPテーマ化手順 一般的なHTMLファイルをWordPressの テーマにする時の手順と、使用するタグ をリスト化、というか自分用チートシート。 いつも子ページが時間掛かるので、単純 な構成のHTMLなら、テーマ化くらいは サクサク終わらせたいですね。 一般的なHTMLファイルをWordPressの テーマにする時の手順と、使用するタグ をリスト化、というか自分用チートシート。 いつも子ページが時間掛かるので、単純 な構成のHTMLなら、テーマ化くらいは サクサク終わらせたいですね。 唯一の方法では無く、ベーシックな方法です。僕も一度作成してから必要に応じて別のタグを使います。 WPテーマ化手順リストSTEP.1HTMLをindex.php、header.php、footer.php、sidebar.php等に分割。分割に関しては以前の記事をご参照下さい。 以下のインクル
携帯サイト（html）の制作に入る前に確認しておきたいチェック項目 │ これからゆっくり考L +α
「デザインは素敵なんだけど、携帯でこれはちょっとできないなー」とか、「無理ではないけどできれば避けておいた方がいいよなー」っていうデザインがあがってくることが多い今日この頃。 モバイルコーディングをやり慣れている人じゃないとモバイルでできることできないこと、cssを使わないと実現できないこと、table使わないと実現できないこと、などが分かりにくいと思うので当然だとは思うのですが。 ですが、知っているのと知らないのとでは工数がかなり違ってきます。 一旦デザインして、コーダーにそれを見せて「ココとココとココは実現不可能。やり直してください。」で差し戻され、デザインをやり直してってなると、デザインも2度手間、デザインをチェックして無理な項目を洗い出すコーダーにも余計な手間がかかります。 今回洗いだした項目は、なんせ自分がコーダーなので、コーダーがデザインファイルをもらった時にバーッと見てチェッ
鳩丸ご意見番 - なぜ BLOCKQUOTE でインデントしてはいけないのか
BLOCKQUOTE の使い方 BLOCKQUOTE は他から貼り付けてきた引用部分を示すものです。たとえばこのように使います。 <P>以下のような意見もあります。</P> <BLOCKQUOTE cite="http://www.ne.jp/asahi/minazuki/bakera/now/minazuki/alt.html"> <P> 結局のところ、ALT には作者が伝えたい内容を書けばいいのだと思 っています。ただ注意しなければならないのは、一口に画像と言っ ても、その使い方は大きく二つに分けられるということです。 </P> </BLOCKQUOTE> cite 属性の値は引用もとの URL となっています。インターネット上のリソースから引用してきたのなら、これを記しておくのが礼儀と言うものです。親切なブラウザなら「出典へジャンプ」というコマンドが有効になるかも知れません。 さて、
斜体とイタリック体は違うのか - スタイルシート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のような今となっては古くなったブラウザへの
蓄々HTML実体参照変換 : akiyan.com
最新記事 2024-01-10 2024/1/8 石川帰省で被災状況を見た 2023-09-28 東京から車で四国九州11日間の観光旅行全記録 2023-07-04 【最大17,50円OFF】SwitchBot製品がセール中 #PR 2023-07-04 指紋認証付きSwitchBotロックを導入した #PR 2023-05-09 Elastic Beanstalk の nginx で静的ファイルにCORSヘッダーをつける方法 2023-05-08 ahamo海外データは国内と共有で、大盛り利用時は海外分20GBは温存される 2023-02-01 ホームルーター比較記事の監修を行いました 2023-01-09 【TFT攻略】D2停滞を抜けてグラマス到達のためにやったこと 2022-12-31 2022年に買って良かった物 2022-11-02 意識低めな高たんぱく質ヘビロテ中の食品一覧
別サイトはtarget="_blank"で開くべきなのか | Takazudo Clipping*
W3CのWCAG（ウェブコンテンツアクセシビリティガイドライン）では、ユーザーに伝えること無しに別ウィンドウを開くことをやめろって書いてある。でも、別サイト＝別窓で開く っていうのがかなり普通に使われているし、自分の行ってる会社でも常に、別サイト＝別窓でやってる。別窓で開かない方にも、別窓で開く方にもそれぞれ言い分はあるんだけど、Dive Into Accessibility ってサイトの記事がかなり納得したので紹介。 ざっと訳すと、 新しいウィンドウ開くな 初めてインターネットやる人はどうやるかって言うと、Internet Explorerのアイコンをダブルクリックして初めてネットできる。それで戻るボタンだの進むボタンだのを使ってネットするんだけど、target="_blank"はこれをぶち壊す。いきなり新しいウィンドウが開いてきて、戻るボタンは使えなくなってしまうわけ。 target=
Google Analyticsで複数ドメインのサイトを計測する方法
DoRuby! (ドルビー!) は現場のエンジニアによる、主にRubyなどの技術に関する様々な実践ノウハウを集めた技術情報サイトです。 こんにちは。アクセス解析チームの大山です。 春を楽しむ間もなく、夏を予感させる暖かい日が続いていますね。 今日は、2つのドメインを持つサイトをGoogle Analyticsに設定する方法についてご説明します Google Analyticsで2つのドメイン構成のサイトデータを取得しよう 通常、ドメイン数が1つの場合は、Google Analyticsより発行されたトラッキングコードをコピーし、 トラッキングする各ページの タグの直前に貼り付ければ完了します。 2つのドメインを持つサイトをトラッキングするには、 通常のトラッキングコードの貼り付け作業に2つのポイントが加わります。 全てのトラッキングコードに下記の命令を追加します。 トラッキングcoo
_blankを使わないで別ウィンドウを開く : zontheworld
個人的に別ウィンドウを開かせるようなリンクの張り方はほとんどしないのですが、たまにどうしても別ウィンドウで開いて貰いたい場合があります（PDFデータのダウンロードページとか、そのページからリンクが張れなくて、行き止まりになってしまう場合とか）。 でも、_blankは XHTML 1.1 では廃止されたとか、HTML4.01とXHTML1.0で非推奨だとか、そういった感じのイメージだけはなんとなくあって、今は基本的にほとんどが XHTML1.0 で書いているので良くはなくてもダメではないという感じなので、使ってもいいかとも思うのですが、将来的に XHTML 1.1 とかにしていくときに修正するのが大変なので、軽く調べて以下を参考にすることにしました。 _blankを使わないで別ウィンドウを開くにはrel=”external”を使うのが美しいと思う。 _blank 使わない別ウィンドウを開く方
target="_blank"は非推奨? | Web標準Blog | ミツエーリンクス
W3Cにおいて、target="_blank"は非推奨なのでしょうか？というご質問をいただきました。 HTMLの仕様書では、center要素やfont要素などの文書内容を意味づけするものではなく、見栄えを表現する要素や属性が「非推奨 (deprecated)」と定義されています。しかしtarget="_blank"の場合は、この「非推奨」とはなっていません。ただし、HTML 4.0 やXHTML 1.0のStrict文書型では、target属性が定義されていないため利用できません。このためtarget属性を用いる場合は、Transitional文書型を選択する必要があります。 さて、target="_blank"があまり奨められないとされているのには、いくつかの理由が存在します。 ひとつは、リンクが新規ウインドウで開くと明示されていないページの存在です。ほとんどの場合において、新しいウイン
趣味のWebデザイン - リンクの target 指定
アクセシビリティ向上がたいてい掛け声倒れに終るのは、地球環境問題への対応が常にぬるいものとなることに似ている。誰も、現在の便利な生活を手放したくない。何一つ生活水準を切り下げないことを条件にして、環境問題に配慮することを考える。だから、抜本的対策などできない。アクセシビリティの話題なら、それでも急進主義者が一概に否定されないけれども、ユーザビリティの話題になると、コトは微妙な領域に入り込む。 外部サイトへのリンクと target 指定 指定しない、もしくはフレームの場合”_top”で同一ウィンドウに表示 91 ”_blank”で新しいウィンドウに表示 168 どちらでも良い 35 その他 6 合計 300 意外に指定しない、もしくはフレームの場合”_top”で同一ウィンドウに表示が多い。もちろん、この手の質問に関して「はてなの回答者」に偏りがあることは容易に想像がつく。しかし閲覧者からの要
「target="_blank"」をやめた - PLAYNOTE
リンク先に target="_blank" を指定するのをやめた。 今までは全部丁寧に target="_blank" していたんだが、ブログ板のMovable Typeスレで「target="_blank"はウザい」「いや、あったいい」「いやウザい」「俺好き」みたいな論争があって、調べてみたらW3C的には非推奨、それどころかXHTML1.1以降では廃止されてるそうだ（参考: 駄的HTML改善計画 - 「target属性の利便性」）。 W3C信者の一人としてW3C勧告には従わねばならない、という忠誠心が働く一方、「でも target="_blank" 便利だしなぁ」という思いも。はてなアンケートによれば target="_blank" 好き派は嫌い派を上回ってるし、Shift＋クリックで新窓開けるのを知らない人もいるし…。 最後に俺の背中を押したのはこの一言だった。 「私はバカな閲覧者は勝
ページの文字コードとは違う任意の文字コードをformから送信する方法｜web bibo
/* CSS（スタイルシート）に関する知識・テクニックなどの備忘録 */ 文字サイズ 大 中 小 現在のページ： HOME » CSS フォーム » ページの文字コードとは違う任意の文字コードをformから送信する方法 楽天検索やYahoo!オークションなどの検索窓を設置したとき、設置したページの文字コードと違う文字コードで検索キーワードを送らないといけない場合（例：UTF-8の設置ページで、EUC-JPの検索キーワードを送る場合）、少し面倒な処理が必要なんですね。今回はYahoo!オークションで試してみます。あ、今回はCSSに一切触れませんので、あしからず。 普通にformを設置したら、キーワードが文字化けする。 設置ページの文字コードと検索先の文字コードが異なるので、上手く検索できません。 <form name="yahooSubmit" method="get
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
日記 | ヨモツネット