font-family: monospace;だと文字が小さくなる - しらいとブログ
ChromeやSafariなどWebkit系のブラウザでは可変幅フォントと等幅フォント（monospace）のデフォルトのフォントサイズが違います。インストール時の初期設定では可変幅フォントが16px、等幅フォントが13pxになっており、等幅フォントのサイズはユーザーが簡単には変えられないようになっています。そのためfont-sizeを%指定やem指定している場合、Webkit系のブラウザだけ等幅フォントが小さく表示されてしまいます。ちなみに、Firefox系では初期設定はどちらも16pxになっていますが、ユーザーが別々に変えることが出来るので同じとは限りません。 等幅フォントも可変幅フォントと同じサイズで表示したい時は次のように指定します。 font-family: monospace, serif; これはmonospaceフォントで表示できない文字はserifフォントで表示するという
HTMLで「table-layout:fixed」つかってもTableが崩れる場合の対応方法 | 蒼いねずみのお仕事
ですが、同じCSSを使っていてもこんな感じでレイアウトが崩れてしまう場合があります。 （なぜか、中見出しが「100px」になっていない） 見出し これは最初にcolspanが出てきてしまうと、残念ながらこのように崩れてしまいます。 それでは、なぜcolspanで「table-layout:fixed」の効果がなくなってしまうのでしょうか。 これは、「table-layout:fixed」の仕組みが最初の＜tr＞行でレイアウトを決めて固定化してしまう仕組みになっているからなのです。 ですので、最初の行に「colspan=”3″」があると、その時点でcolspanでまとめられてしまった＜td＞列は、きれいに3等分されて「fixed（固定化）」してしまったのです。（最初の行移行では、「table-layout:fixed」の効果はない） この現象を防ぐには、どうすればいいのかというと最初に表示す
定義リスト[dl]のdt/ddを横並びにする方法 | たねっぱ！
定義リスト dl のdt/ddタグを横並びにする方法を紹介します！ floatをつかってキレイに整えましょう！ こんばんちわ、やのっぱです。(´・ω・｀) 今回は定義リスト[dl]の中身(dtとdd)を横に並べる方法やってみるよ。 その前に定義リストってなん？？？美味しいの？ ッと思ってたら、どこからともなく天の声が！！←天から聞こえとるがな 「説明しよう！定義リストとは定義（dt）する用語を説明（dd）するリストである！」 つまりは用語があって、それを説明する文がセットになってるときに使うリストってことです。 もっと噛み砕くと[これ]はこういう[意味]やで～ってことです。 やのっぱ（ここdt）毎日せこせことマークアップすることに快感を覚え、しかし打つのは面倒いので如何にして楽にマークアップするかと言うことに情熱を注ぐ汎用人型まーくあっぷえんじにゃぁ（ここdd） こんな感じで使ったりします
![定義リスト[dl]のdt/ddを横並びにする方法 | たねっぱ！](https://cdn-ak-scissors.b.st-hatena.com/image/square/4e3d0e670c454b9af93366310784f905b0ebd3c7/height=288;version=1;width=512/https%3A%2F%2Ftaneppa.net%2Fwp-content%2Fuploads%2F2013%2F01%2Fcss2.jpg)
input要素のスタイルを属性値で指定し分ける－ウェブ制作チュートリアル
今回は、「メールアドレス」入力欄と「お名前」入力欄の横幅を揃えようと思います。 入力欄の横幅を揃えるのが本当にスタイルとして良いかどうかはともかく、現在の表示領域に対して横幅70%で統一することにします。 入力欄のスタイルを指定するのですから、input要素にスタイル指定すれば良いように思います。 そこで、form.cssに以下の記述を追加してみましょう。 CSSソース（form.css） @charset "utf-8"; /*************************************** 入力フォーム ***************************************/ #form1 input, #form1 textarea { font-size:16px; /*フォントサイズ*/ border:1px solid #999999; /*ボーダー*/ p
HTML 4.01とスタイルシート
はじめに World Wide Web Consortium（W3C）は1997年12月にHTML 4.0規格を策定しました。 これは1999年12月に多少改訂され HTML 4.01 となりました。 この新しいHTMLでは，文書の論理的枠組みを記述するというHTML本来の目的に添った部分だけを残し，見栄えを飾るための仕組みはスタイルシートという別の枠組みに移しました。 ここではHTML 4.01とスタイルシートの基本を解説します。 なお，この文書自体がHTML 4.01とスタイルシートを使って書かれています。 HTML 4.01では，たとえば次のように書きます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" Content
『リンク要素から離れた要素のhoverを実現する方法』
Remote Linking （別窓） このRemoteLinkingという手法では、リンク要素から離れた要素のhoverを実現することが出来ます。 デモは以下から。 Remote Link （別窓） リンク要素から離れた要素のhoverを実現と書きましたが、実際は要素同士は一つのaタグで囲まれています。 具体的には以下のような感じです。 <div class="people"> <a href="#toby" id="toby"> <span class="name">Toby Yong</span><br /> Toby Young joins the fifth season of Top Chef to lend his culinary expertise to the judges table. Young is a British journalist and the aut
「:hover」している要素以外にも「:hover」の効果を付けるCSSチュートリアル「Hover on “Everything But”」｜BLACKFLAG
CSSの指定で要素にマウスオーバーした際に色を変えたり、背景色を変えたり、 何かアクションを付けることに使用する「:hover」要素。 本来この指定はマウスオーバーしている要素のみに効果を利かすものですが マウスオーバーした要素の兄弟要素に対しても「:hover」の効果を付けることを可能とするチュートリアル 「Hover on “Everything But”」が使えそうだったのでメモ書きしておきます。 ≫Hover on “Everything But” | CSS-Tricks ≫デモはこちら：Hover on Everything But デモ画面ではマウスオーバーした際に それぞれ要素の透明度「opacity」の値を変化させています。 仕組みについては以下。 ◆HTML <section class="parent"> <div></div> <div></div> <div></
表(テーブル)の行の色を動的に変える - CSS小技集
CSSの小技として、表(テーブル)の行の色をマウスカーソルに合わせて動的に変える方法です。 表(テーブル)の行の色を動的に変えるには。 大きな表(テーブル)では、マウスカーソルに合わせて行の背景色を変えられるようにする事で、データを読み易くする事が出来ます。 この方法は簡単で、:hover擬似クラスを利用します。 意外に誤解されているようですが、:hover擬似クラスは<a>要素で無くても有効です。 尚、:hover擬似クラスを列に対して適用しようとして、<colgroup>要素や<col>要素に付けても効果はありません(列に効果が無い理由は後述します)。 この方法は、当然ながら、ネットスケープ 4.xでは不可能です。 テーブルの行の色を動的に変える実例。 実際のCSSでは以下のようになるでしょう。 ここでは、マウスカーソルが合わせられた際に、行を薄緑色で表示するようにします。 表(テーブ
ユーザーにスクロールを予測させるCSSの書き方について | mkasumi.com
受託案件でレスポンシブ対応をするようになって4年半ほど。未だに悩むのがテーブルのレスポンシブ対応。 テーブル要素をレスポンシブ対応する方法はいろいろとあると思うのですが、私がよく使うのはテーブルをスクロールさせる方法。ただ、このテーブルにはデザインの面で抱えている問題があります。それは、スクロールできることがユーザーには伝わらないこと。ぱっと見、途中でコンテンツが切れているように見えてしまう。もっとひどい場合にはthやtdの区切り線と同じタイミングで見切れてしまっていてその先にもっとコンテンツが存在することが予測できない可能性があります。 今回は続きのコンテンツの存在をグラデーションで表現し、CSSのみでスクロールを予測させる方法について記述しています。 実装方法 box-shadowやbackgroundプロパティでグラデーションを適用すればいいと思ってしまいがちですが、ただ単にこのプロ
静的サイトで JS/CSS のキャッシュを防ぎつつレポジトリをキレイに保つ
「ABOUT」のページをリニューアルしました。 １つ前のデザインのままだったものを、現在のデザインに沿って作りなおして、ついでに文章やレイアウトなども整えました。 公開したものの問題発生 意気揚々と公開してみたのですが、１つ問題が見つかりました。 ページを公開したあと、本番環境を表示するとデザインが崩れていました。そのあと、ページをリロードすると期待通りの結果になりました。 原因は CSS がキャッシュされていた ことでした。 たとえページが更新されていたとしても、JavaScript や CSS は古いキャッシュを使い続けてしまうことがあります。 で、この問題に対処しようとしたのですが、「静的生成」「生成結果を GitHub で管理」「キャッシュ問題への対策」の 3 つのいいとこ取りをしようとすると、意外に複雑でした。 その話をいまからします。 キャッシュ問題の一般的な解決策 よく見る解
HTML/CSSのコーディング品質についておもうこと | ツクロア - DESIGN LAB
デザインフローシリーズをいっかい休みにして、最近おもったことをかいていきます。 タイトルからして、なんか意識高い系の話になりそうでいやなのですが。。 とはいえ、じぶんが普段思っていることと照らしあわせてなにか考察できればいいなと思います。 HTML/CSSのデザインコーディングについて 通常わたしたちは、デザイン業務をメインでしていますが、HTML/CSSへのコーディングもやっています。 コーディングって意外とデザインの視点が入りづらいところと思われがちなのですが、実際にはそうでもないな、と最近改めて思いました。 そこで、わたしたちが考えているコーディングへの思いを挙げていってみたいと思います。 デザインを受け取って、それをコーディングするだけではうまくいかない ほんとに、いわゆるコーディングの「作業」という業務ですね。 psdとjpgなどを受け取って、画像を書き出して、HTML/CSSで
IE8をレスポンシブ、HTML5やCSS3、rgba角丸に対応させる場合の注意点まとめ - 京都のお墨付き！
IEでHTML5やCSS3を使う場合、いくつか補助プログラムを読み込んだり、制作上の注意点があります。これは、きちんとHTML5やCSS3の仕様を身につけていないと「動作しない」などのトラブルに見舞われることがあります。 この記事では、「なぜ、そうする必要があるのか」をキチンと書いて、仕様・仕組みを理解した上で使いこなすことができるようになる事を目標に書きました。 IE8で、HTML5のSectionsタグを使えるようにする「html5shiv.js」 「Sectionsタグ」とは以下のタグです。これはHTML5で定義されていますが、IE8では使えないもの(HTML5で追加した分)があります。これを使えるようにするのが「html5shiv.js」です。 section (HTML5から追加) nav (HTML5から追加) article (HTML5から追加) aside (HTML5か
Impress Japan
コンポーネントの作成から実装まで学べる！ 発売日： 2024/7/23 好評発売中 Web作成・マーケティング 詳細を見る
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
tableレイアウト、divレイアウトの利点と欠点 - asrite.net
「max-width: 100%」が指定されたimg要素を縦横比が維持された状態で縮小する方法 | CreativeStyle
DESIRE 中森明菜 - 歌詞タイム
https://www.xml.vc/property/table/auto2.html
travelbanana.net
why is a px in css considered redundant? – IDEs Support (IntelliJ Platform) | JetBrains
Code Babies