CSSでのフォント指定について考える（2014年）｜DTP Transit
結論1：アルファベットでウエイトなしだけでも、すべてのモダンブラウザに対応可能です。ただし、旧バージョンのSafariやFirefoxでは対応がまちまちであったため、それらに対応するには併記します。 游ゴシック体と游明朝体はWinodws 8.1では日本語名、OS X Mavericks（10.9）ではアルファベット名のみの対応であるため、両名の併記が必要となります。 疑問2：「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」のどちらを記述すればいいのでしょうか。 「ヒラギノ明朝 Pro」を改訂し、JIS X 0213:2004の例示字体に対応させたものが「ヒラギノ明朝 ProN」です。 参考： ウィキペディア - ヒラギノ 「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」の違い CSSのfont-family指定はこれで決まり！（2013春） 結論2：新しい字形に対応をしている「ヒ
Webデザインリリック
「Highlighing Code Block」のプラグイン「Treeview」を導入したらコードブロックのテーマカラーが反映されない時の解決方法
position: absolute; の指定で要素が上下左右中央配置になる理由
人様の人気エントリーに乗っかる感じで恐縮ですが、「CSSで block 要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。」 という記事が話題になっていたので、なんでその指定で上下中央配置になるのか補足してみます。 詳しい話は下記のリンク先をご覧ください。 CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。 何でこういうことを書くかというとですね、例えば CSS でこういう指定をするとこう表示されるっていう話に関しては、仕様書を基準に話して欲しいのです。 「なんかよくわからないけどこういう風に書いたらこういう表示になった。よかったね」 で終わらせるのは個人の自由ですが、仕様書を基になぜそうなるのかの根拠を知るとより一層理解が深まると思いますので。 なので余計なお世話なんですが、下記に小難しく書きます。 解説のためのサンプルソース 例えば、下記の
Webフォント「Google web fonts」の使い方・実装手順メモ
商用・非商用を問わず無料で利用できるWebフォント、「Google web fonts」の実装方法をさっくりメモっておきたいと思います。 Google Web Fonts Google web fontsとは Webページ閲覧時、通常ではパソコンにインストールされているフォントしかブラウザで表示することが出来ませんが、「Webフォント」を使用すると任意のフォントを表示することが出来ます。 Googleの提供するGoogle Web Fontsはアカウント登録の必要も無く、実装が非常に簡単なそれの一つです。商用・非商用ともに無償で利用が可能と言うのもポイント:) ちなみに当サイトでも日付の表示とサイドバー・フッターの見出しにGoogle web fontsの「Coda」を使用しています。 Google web fontsの実装方法 実装の手順は3ステップ。 1.使いたいフォントを選択する 2
IE8でマウスオーバー時に中の要素がずれる不具合に対応 | 電脳備忘録
html5はインライン要素とかブロック要素とか気にしなくてもいいらしいので、全体をaタグで囲うようなリンクを設定しました。 こんな感じです。 <a href="/"><img src="img/thumb_001.jpg" alt=""><p class="name">アイテム01</p></a> で、上記リンクに対してマウスオーバーしたとき透過するように設定しました。 一通りコーディングが終わり、いざブラウザチェックを行うと「そう簡単に終わらすかよヴァァァァァカwwww」と言わんばかりにあいつがしゃしゃり出てきやがりました。今回のくそ野郎はIE8です。 IE8でのみマウスオーバーしたときにテキストが左にずれるという現象が発生してしまいました。 ※IE8でサンプルの対策前のリンクにマウスオーバーさせてみてみるとわかると思います。 googleさんに問い合わせながら格闘すること3時間、結局下
文字列を省略して「…」を付与する方法 – CSS/jQuery | DevelopersIO
通常、設計・デザインの段階であらかじめ表示する文字数の上限を決めておき、PHPやRuby、Javaなどサーバサイドで表示する文字列を加工することが多いかと思います。 しかし、この方法だと動的に変化する領域を基準に表示する文字数を制限する場合や、文字サイズや表示領域のサイズに合わせて上限を算出する場合に限界があります。 そこで、クライアントサイドで表示領域から文字列がはみ出す場合、文字列を省略して省略記号「…」をつける方法を紹介してみたいと思います。 実現方法として以下の2つの方法があります。 text-overflowプロパティを使う jQueryで表示領域の幅・高さに合わせて文字列を加工する text-overflowプロパティを使う text-overflowプロパティを用いると、文字列が表示領域からはみ出してしまった場合、はみ出した文字列を省略記号「…」で省略することができます。 尚
【保存版】IEのバージョンを判別し、バージョンごとにスタイルを適用する3つの方法 | DX.univ
エンジニアの菊池です。 今回、初めてブログを投稿させていただ[...]エンジニアの菊池です。 今回、初めてブログを投稿させていただくことになりました。 業務では主にフロントエンドの実装とマークアップ等を担当しています。 さて、Windows XPのサポート終了まで残り約8ヶ月となりました。 ようやく長くにわたり苦しめられてきたIE6から解放されることになりますが、でも実はIE7、8、9もIE6ほどではないまでもバグや独自解釈が多かったりします。 そんな時にはCSSハック等の手法やJavascriptを利用してIEだけ特別な処理やスタイルを適用したりします。 ということで今回かなり今更感はありますが、自分用の備考録も兼ねてIE6〜10のバージョン別CSSハックと条件付きコメント分岐、jQueryによるIEバージョン判別の3つの方法についてまとめてみました。 1.CSSハック /* I
映えるクルマたち | できるだけ人生を楽しんでね。本当に楽しいかどうかなんて考えないで ｂｙオノ・ヨーコ🚕👆
では早速、買取業者さんからのデータを並べていきます。 ご自身の愛車と、照らし合わせながらみてみてくださいね。 「日産 NT100クリッパー」の買取相場一覧表 ...
【CSS】ハイブリッドアプリを作成するときにいつも書くようにしているCSSプロパティいくつか！
こんにちは、相変わらずドラクエ10三昧の橋本です。 最近はライノス道場に通っています。 さて、今日はハイブリッドアプリのCSSを書く際に毎回指定するようにしているプロパティを備忘録がてらいくつか書いていこうと思います（いつも忘れるので）。 -webkit-tap-highlight-color: rgba(0, 0, 0, 0) iPhoneやAndroidでリンクなどの要素をタップしたときに、iPhoneでは薄いグレー、Androidでは緑やオレンジの枠がデフォルトで表示されます。 -webkit-tap-highlight-colorというプロパティに色を指定することで、この枠の色を変えることができます。 ハイブリッドアプリを作成する際には、この枠が出ると如何にもWebっぽくなってしまうため、透明色を-webkit-tap-hightlight-colorに指定して、枠が表示されないよ
CSS Shaders はじめの一歩、CSS Filter を知る | Yomotsu net
GraphicalWeb Advent Calendar 2012 の 6日目の記事です。 CSS Shaders は、利用することでこれまでの CSS の表現ではできなかった、要素に対する複雑な変形を行うことができます。例えば、サイン波を利用して次のような変形が可能です。 まずは CSS Shaders の書き方を知る前に CSS Filters についても少し知っておきましょう。 CSS Filters とはSVG にあった Filter 機能を整理した新しい仕様、Filter Effects 1.0の草案が現在 W3C に提出されています。この中には CSS のインターフェイスとして用意された filter プロパティーも含まれています。 CSS Filter とは特にこの filter プロパティーを指します。 CSS の filter プロパティーには値として指定できる関数がいく
Online StyleSheet Generator | OneClickCSS
What's this? HTMLソースをもとに、id,class名CSS、子孫セレクタCSS、子セレクタCSS、LESS、SASS、SCSSを自動生成するオンラインサービスです。 従来のHTMLコーディグを強力にサポートします。 What's LESS/SASS/SCSS? LESS / SASS / SCSSはCSSを効率的にコーディングできるCSSメタ言語です。 従来のCSSに比べ子孫セレクタ・子セレクタを簡単に管理することができ、高速にコーディングすることができます。 LESS OFFICIAL SASS/SCSS OFFICIAL 関連サービス 高画質サムネイル生成サービス HTTPクエリデコード SQLフォーマッター Insert文フォーマッター スペースフォーマッター JSONフォーマッター HTML/XMLフォーマッター Emmet toolkit for <textare
CSS(スタイルシート)の基本、小技、テクニック総まとめ
CSSの基本や使える小技テクニックなどを幅広くまとめました。以前書いて今もそこそこアクセスがある「CSSの知識をもっと深める30+2の小技テクニック集｜Webpark」という記事があるのですが、2年近く前の記事ですしパワーアップさせて作り直しました。 恐らく過去最長の記事ですので目次を作りました。クリックするとするりと移動します。基本的な内容が多いですが、お役に立つ項目があればうれしいです。 ということで順番に説明していきます。 1. 全般的なこと 1-1. CSSリセット ブラウザごとでデフォルトのスタイルは異なっています。その違いをそのままにしておくと、後でブラウザ間の表示の違いに悩むことになり、どこが原因か分からないとイライラしてしまいます。 そんなことのないように、いったんデフォルトのスタイルをリセットしてしまおうというのがリセットCSSです。 方法は色々ありますが、個人的には一番
[CSS]スタイルシートを使用して現在位置のリンクを無効にする方法 | コリス
使用するのはCSS3の「pointer-events」で、対応ブラウザはFx3.6+, Safari3+, Chrome(5+?)となっており、IEでは未対応です。 HTML ナビゲーションはシンプルなHTMLです。 <textarea name="code" class="html" cols="60" rows="5"> <nav> <ul> <li class="home"><a href="#">Home</a></li> <li class="about"><a href="#">About</a></li> <li class="clients"><a href="#">Clients</a></li> <li class="contact"><a href="#">Contact Us</a></li> </ul> </nav> </textarea>
1日目 : CSS Programming Advent Calendar 2012
正直表は、ネタですが。 :activeや:targetの擬似クラスは多用します。 a要素、input要素、label要素が便利！aタグと:targetを組み合わせることで、aをクリックしたら別の要素の表示を変える事ができます。 urlのハッシュがbox_1の時は#box_1を表示する。urlのハッシュがbox_2の時は#box_2を表示する。urlのハッシュがない、box_1・box_2ではない時は、box_1・box_2を表示しないinputのradioを使って別の要素の表示を変える :checkedと間接セレクタを組み合わせるclassがb1のinputがcheckedになった時、box_1を表示。box_2は非表示classがb2のinputがcheckedになった時、box_2を表示。box_1は非表示labelを使用して:checkedを利用しやすくする labelのfor属性を
いまさら聞けないCSS font-familyのまとめ
CSSのfont-familyについて調べてみました。そのうちWebフォントが主流になる気がしますがそれまでのまとめということで。 認識誤りがありましたらどこかでつぶやいてください。 １．font-familyとは？ 通常のフォントや太字、イタリック体、斜体など、デザインを統一した複数のフォントをまとめたものを「フォントファミリー」といいます。 「Arial」「Vernada」「ヒラギノ角ゴPro W3」「ＭＳ Ｐゴシック」などがフォントファミリー名です。 このフォントファミリー名を指定するためのプロパティが「font-family」です。 サンプル body { font-family: Verdana,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
DLをTableに見せる
コンテンツメニュー dtにメニューの名前、ddに説明。 プロフィール dtに項目名、ddにその項目の値。 dtに「血液型」、ddに「B型」など。 リンク dtにサイト名、ddに説明やバナー。 ギャラリー dtに画像、ddに説明など。(複数のリストの場合) チャット・対談・会話 dtに発言者名、ddにメッセージ。 /* dl-sample */ #sample * { margin:0; padding:0; border:0; } #sample dl { border-top:0; border-bottom:1px solid; border-left:1px solid; border-right:1px solid; background:#eee; } #sample dt { float:left; clear:both; width:9em; padding:0.5em; _
もうfont-familyで悩まないための2行 « CSS « Snippet-Editor.com
body, textarea { font-family: "メイリオ", "ＭＳ Ｐゴシック", sans-serif; } input, select { font-family: Arial, "ＭＳ Ｐゴシック", sans-serif; } この2行のスタイルシートで、Windowsではメイリオフォント（なければMS Pゴシック）、Macではヒラギノ角ゴシック（Firefoxのみ例外時あり）で表示することができます。 実際に適応すると、 Windows 7、またはVistaではメイリオで表示され Windows XPではMS Pゴシックに Windows XPで、且つメイリオを自分でインストールした人はメイリオに Mac OS Xではヒラギノ角ゴに（Firefox以外のMac用ブラウザでは日本語で書かれたフォント指定が無効になるため） と、なります。なお例外として、 MacにMS
cssで縦方向中央に配置する方法（5つのケース＋1） | バシャログ。
iPhone 4Sが発売間近。 買おうか迷って一旦諦めたはずがまた迷い始めました、hakoishiです。 Siriに甘い言葉をささやきたい。英語できないけど。 さて、コーディングで縦中央にオブジェクトを配置したいことって少なくないですよね。 しかしながら、cssはそういうのちょっと苦手。 「ほら、あの時使ったアレだよアレ！」と過去のソースを掘り起こしてみても、状況が違ってて使えないケースも多かったり。 というわけで今回は、cssで縦中央配置するためのtipsを5つのパターンに分けてまとめました。 case1：画像の場合 上下方向中央を始点として画像を配置し、画像の縦サイズの1/2だけネガティブマージンで上に移動。 サンプル html <p class="case01"> <img src="http://dummyimage.com/100x100/000/fff.gif&text=img
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Bootswatch
Easy to Install Simply download a CSS file and replace the one in Bootstrap. No messing around with hex values. Customizable Changes are contained in just two SASS files, enabling further customization and ensuring forward compatibility. Tuned for 5.3.3 Themes are built for the latest version of Bootstrap. Version 4, version 3, version 2, and other releases are also available to download.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
