モダン日本語フォント指定CSSのfont-familyで游ゴシックを指定すると、Windowsで細くなってしまう問題の原因と解決方法を中心として、最近の日本語フォント事情をまとめました。 CSS Nite LP47 Coder's High 2016にてお話した内容です。 昔からマークアップエンジニアを悩ませて…
画像を使用しないで引用表示するCSSカスタマイズ
引用符で不具合を見つけた、あきら（@akrwnet）です（＾ｖ＾） 以前書いた記事 ブログテクニック２：見やすくなるような引用符カスタマイズ ここで、CSSを変更して引用表示を見やすくしたつもりでしたが、Windows Live Writerを使用していると、投稿記事に自動でPタグが挿入されてしまいます。 すると、引用文が変なことななってしまうんですね。 Pタグ開始時に、全て引用符がついてしまいます。 これじゃイケてないということで、解決方法を探ってみたがわからず・・・ ならば画像を作成して対応させてみたらどうだろうと こんな画像を作ってみたのですが、レスポンシブ対応させるとちょっとおかしなことになりそうだったので、コレも却下！ では画像を使わないほうが楽なのではないかという結論に達し、ググって見ることにしました。 こちらの記事で、このCSSソースを拝借させて頂きます。 blockquot
劇的！（でもない）before after 擬似要素の使い方まとめ
自宅を匠にまかせて改造するほどの資金力なんてとうてい捻出できないゴロドクです、どうも。 普段コーディングするのにbefore/after擬似要素ってほとんど使ったことないんですけど、最近あちこちのCSSのTIPS系ブログ読んで結構使ってる例があったので、勉強がてら自分なりにまとめて備忘録付けておこうと思いまして。 before/after擬似要素 基本的な使い方 まず最初にbefore/after擬似要素とはなんでしょ、という話なんですがこれはHTMLソース上に書かれた要素に対し、【:before】【:after】という擬似要素を付すことで、HTMLソース上には存在しない付加的な要素を、指定した要素の前後に生成する、というものです。 このニュアンスが言葉で説明するのがちょっと上手く行かなくて、自分が理解するのに壁であった部分でもあるんですが。 ものすごくシンプルなソースを見ていただけるとわ
クラスセレクタ (E.warning)｜セレクタ｜CSS HappyLife ZERO
CSS1で定義されたクラスセレクタは、ピリオド（.）とその直後に続くクラス名から成り立ち、クラス名と(X)HTMLのclass属性が一致した場合に適用されます。 クラスセレクタはもっとも使用頻度の高いセレクタの一つです。 クラス名などの識別子に関しては扱える文字に決まりが有ります。 詳しくは「識別子で扱える文字」を参照してください。 対応ブラウザ クラスセレクタのサンプル .mainArea { float: left; width: 600px; margin: 0 0 20px; } p.attention { color: red; font-size: 80%; } <div class="mainArea"> <p>テキスト</p> <p class="attention">注意書き</p> </div> クラスセレクタを使って.mainAreaとp.attentionにスタイル
iOS 7 の隠しフォント， ヒラギノ角ゴ W1/W2 を CSS で指定する（追記：Yosemite でも可）
論より証拠，というわけでまずは iOS 7 を搭載した iPhone/iPad/iPod touch で下記の文字列をご覧くださいませ． ※ 2014 年 10 月 24 日追記：OS X Yosemite でも表示されるようになりました． ヒラギノ角ゴ W1 ヒラギノ角ゴ W2 ヒラギノ角ゴ W3 ヒラギノ角ゴ W6 ※ ヒラギノ角ゴ W3/W6 は iOS 6 以前から存在するフォントですが，比較のために用意しました． iOS 7 端末をもってないという方は以下にスクリーンショットを用意しましたのでご覧くださいませ． CSS での指定方法は ヒラギノ角ゴ W1 font-family: ".HiraKakuInterface-W1"; ヒラギノ角ゴ W2 font-family: ".HiraKakuInterface-W2"; 以上です．クォーテーション（""）と先頭のピリオド（.）
ブログデザインをマイナーチェンジ。フィボナッチデザインと勝手に命名
ブログのデザインを変更しました。より読みやすいように本文の幅を狭くしました。過去記事で使っていた大きな画像を狭い幅に合わせて縮小するCSSについても書いてます。 ブログのデザインを変更しました。 主な変更点としては、本文の幅を少し狭くしただけです。 なぜこのデザインにしたのか簡単に書いときます。 ・本文幅を500pxにした理由 ・サイドバーは300px固定（変更なし） ・フィボナッチwebデザイン ・狭くした幅に過去の大きな画像もジャストフィットさせるCSS 4つ目の「画像をジャストフィットさせるCSS」だけは様々な場面で役に立つかもしれません。 本文の幅を500pxにした理由 横に文字が続くと視線移動が多くなり読みにくいので、本文の幅を650pxから500pxにしました。 日本語の場合、読みやすくするために紙の上では文章の途中で改行したりします。 しかし、webサイト上でそれをやると、見
Twenty Elevenのサイドバーの幅を広げる方法
WordPress3.4の標準テーマの「Twenty Eleven1.4」で確認しました。 style.cssのStructureで始まるところあたりを少し変更することで意外と簡単に可能です。 以下の例で、記事部分が620px、サイドバーが300px程度になります。サイドバーにアドセンスの横幅300pxが配置可能なのは確認しました。 Twenty Elevenは横幅の最大？が1000pxで設定してあるので、30％とすれば300pxとほぼ同じになるわけですね。 style.css /* =Structure ----------------------------------------------- */ body { /* 変更前 padding: 0 2em;*/ } #page { /*変更前 margin: 2em auto;*/ margin: 0 auto; max-width
擬似要素を使った見出しデザイン
このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。 HTMLはすべてHタグだけです。特に意味はありませんが今回のサンプルはh4タグを使っています。 「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「:before」「:after」疑似要素はIE7以下は非対応ですのでご注意ください。 今回のサンプルは別サーバにアップしていますのでご覧ください。 それでは今回8つのサンプルを紹介していきます。 1. 吹き出しのような見出し1 吹き出しの下の部分を:after擬似要素で作っています。三角形はボーダーで作っています。下の画像を見ると何となくイメージできるでしょうか。今回の場合は上の赤い部分のみ色を付
『Twenty Elevenのサイドバーのサイズを調節するために。』
ワタクシ、別のコスメブログはWordPressを使ってまして、つい最近テーマをTwenty Elevenに変更しました。 このテーマ、ウインドウの幅によってフレキシブルに変更する「レスポンシブWEBデザイン」になっているのです。これがカスタマイズ分からんくて・・・ 本読んで、ネットで調べて、無理矢理やったらなんとか出来たので自分メモ的に書いておきます。 「Style.css」の2つのかたまり部分に修正が必要です。 83行目あたりからの } #primary { float: left; margin: 0 -26.4% 0 0; width: 100%; } #content { margin: 0 34% 0 7.6%; width: 58.4%; } #secondary { float: right; margin-right: 7.6%; width: 18.8%; } そしてもう
イメージ無しのblockquoteで引用を表示するCSSサンプル - WEBデザイン BLOG
blockquoteでの引用を美しく表示するCSSサンプル:phpspot開発日誌のエントリーを読んでみて、イメージ無しでのblockquoteでの引用を二重引用符で表示するCSSサンプルを紹介してみることに。 一つは、24 ways: Swooshy Curly Quotes Without Imagesのエントリーではイメージ画像無しでの二重引用符で括ったblockquoteでの引用表示するHTML+CSSを紹介していることを。 <span></span>要素で二重引用符（開始）と（終了）を囲み、CSSでブロック・フロート設定で括ってあるように表示する方法です。 24 wayshttp://24ways.org/Ajax関連の面白いエントリーがいくつか紹介されています。 二つ目は、IEでは表示されませんが、CSS疑似要素要素（:beforeと:after）を使ってイメージ無しで引用符で
CGデザイナー・Webデザイナー・グラフィックデザイナーのためのクリエイティブ・タブロイド withD（ウィズ・ディー
2009.06.30 | トピックス クリエイティブ・タブロイド withD休刊のお知らせ 2009年6月30日をもって休刊させていただきました。 ご愛読いただき、ありがとうございました。 2009.06.29 | インスピレーション・ネタ探しの旅 行動につながる情報を見つけ出す インスピレーション・ネタ探しの旅 ♯26 ミキチョクシ（ペタビット／ナフタリン）
[CSS]IE6でよく遭遇する6つのバグとその解決方法 | コリス
CSS Trickのエントリーから、IE6でよく遭遇する6つのバグとその解決方法の紹介です。 IE CSS Bugs That’ll Get You Every Time ボックスモデルのバグ マージンが二倍になってしまうバグ min-width, min-heihgtと同等の指定 Stepdownバグ hover擬似クラスをa要素以外にも対応 透過PNGを透過表示に対応 ボックスモデルのバグ <textarea name="code" class="css" cols="60" rows="5"> div#box{ width:100px; border:2px solid black; padding:10px; } </textarea>
ブログテンプレート作成ツールで簡単ブログデザイン！ - CSSEZ
Cssez : ผลบอล บอลวันนี้ วิเคราะห์บอล ข่าวฟุตบอล เราคือผู้นำของเว็บดูผลบอลสดออนไลน์ ผลบอลสดภาษาไทย 7m ข่าวฟุตบอล สรุปผลบอล ไฮไลท์ ที่สามารถเช็คผลบอลทั่วโลก มีทั้งภาษาไทย Livescore 7m 888 ผลบอลมีเสียงวันนี้ล่าสุด พรุ่งนี้ หรือเมื่อคืน รวบรวมเว็บผลบอลต่างๆมากมายมารวมไว้ที่เดียวเช่น livescore.com 7m.cn 888scoreonline.com thscore.cc และ spbo.com รวมทั้งมีวิเคราะห์บอล ตารางบอล คะแนนบอล และดูบอลสดออนไลน์
CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係 : webデザイナーのナナメガキ
CSSでのfont-familyの指定がとても悩ましい。文字コードによって表示が変わったりするし、イレギュラーケースまで想定すると煩雑なコードになってしまう。ちょっと整理しながら考えてみる。 まず、font-familyを何も指定しないと、だいたいのブラウザではデフォルトで設定されているフォントで表示されるのだが、文字コードがUTF-8だとWindowsのIE6で英数文字が「Times New Roman」になってしまう。※文字コードがShift_JISやEUC-JPの場合はデフォルトのフォントで表示される。 それでは例えば総称ファミリー名（generic-family）である「sans-serif」のみ指定してみると、WindowsのIE6では文字コードがShift_JIS・EUC-JPの場合は「Lucida Sans Unicode」で、UFT-8の場合は「Arial」で表示されてしま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Font−familyのベストな書き方 2015年版 | それからデザイン スタッフブログ
facebookの埋め込み投稿、ソーシャルプラグイン設定してる人は1行でOK
sakedrink.info
css3のMedia QueriesでスマートフォンやiPad等の様々なデバイスに対応済みのWordPressテーマいろいろ - かちびと.net
IDEA * IDEA
最初に指定しておくと便利なCSS | Tech de Go