游書体をCSSで指定しよう - Qiita
はじめに 2017/01/20現在、挙動のテストが追いついていないので、このページを訪れる人に役立つと思われるリンクを置いておきます。 https://speakerdeck.com/tacamy/modanri-ben-yu-huontozhi-ding https://rxon.now.sh/crossPlatformYu.md 以下は2013年11月の情報なので参考にしないでください(その間にChoromeがDirectWriteに対応してnameテーブルの参照メタデータが変わったりしていて、設定すべきfont-family値が変わっていることが大きな要因です)。 序文 Windows8.1とOS X Mavericksのリリースが開始されました。 Windows8.1ではRC版にインストールされていた游ゴシックに加えて、游明朝もインストールされています。 OS X Maverick
HTMLタグについて定義リスト<dl><dt><dd>を使いこなす！ | ホームページビルダー私でも出来たホームページ
今回は、定義リストです。 名前は、気難しそうですが、なかなか使えるヤツだと思います。 定義リスト<dl><dt><dd>って、なに？ <dl><dt><dd>のタグを使用したものを定義・説明リストといいます。 ホームページビルダーでは、説明付きリストと呼ばれています。 この『定義リスト<dl><dt><dd>』、なかなか便利でして、 私は、このブログでは、かなり頻繁に使っております。 では、どんなものか、見ていきましょう。 定義リスト<dl><dt><dd>は、こんなもの 下記表示は、デフォルトの状態です。※CSSリセットは、使っていません。 <dl> <dt>５月３日</dt> <dd>憲法記念日</dd> <dt>５月４日</dt> <dd>みどりの日</dd> <dt>５月５日</dt> <dd>子供の日</dd> </dl> 定義する用語を【dt】に。その用語の意味を明確に表す文章
高さの違うブロックを横並びで折り返した時の崩れを無くす - CSSテクニック - acky info
positionを使ったCSSテクニック テキストリンクをpositionでずらしてクリック感をつける フォームのradiobutton、checkbox、selectのずれを調整する positionプロパティのrelative、absoluteの簡単な使い方 フォームに関するCSSテクニック :focusを使って入力中のフォームに背景色をつける 検索ボックスのデザインをCSSで整える フォームの送信ボタンにロールオーバーをつける フォームのradiobutton、checkbox、selectのずれを調整する フォームのIME-MODEを指定する 疑似クラスを使ったCSSテクニック liやtr、tdの背景色を交互に付ける :focusを使って入力中のフォームに背景色をつける テキストリンクをpositionでずらしてクリック感をつける 検索ボックスのデザインをCSSで整える フォームの
Windowsでも綺麗な明朝体を表示する | HR & WebMarketing Diary
※ (株)プロトン・シモヤマ寄稿 こんにちは。 ひっそりと活動場所が 東京から大阪に変わったシモヤマです。 大阪に来て知ったのは、飴ちゃんをくれるのはおばちゃんだけではない。ということです。 さて、突然ですが webサイトに真面目な感じやリッチな雰囲気を出したい時、明朝体を使いたくなりませんか？ なりますよね。 でも、ほとんどの場合、使いません。 なぜなら macでは、基本的に全てのサイズのフォントにアンチエイリアス処理が施されていますが windowsは…。 なので、どうしても明朝にしたいときは 今までだったら：画像にする 先人の知恵を借りるなら：裏技を使う 最近：webフォント という感じでした。 わたしはもう、そこまでするなら大人しくゴシックで頑張ろうと思っていました。 ・・・が！ありました！ 使える！Officeフォント 参考記事：http://creazy.net/2007/08
レスポンシブWebデザインでテーブルを使う時の小技
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
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
Sublime Text 2 + Sass + Compass + Emmet 最強説！導入方法と自動アップロードの設定まとめ | Cappee Design
本日が決算日の@cappeeです。 Sublime Text 2 + Sass(SCSS) + Compass + Emmet(Zen-Coding) 最強説！ ついにたどり着いてしまったかもしれません。 今話題にもなっている通り上の4つがタッグを組むことでものすごい効率的にコーディングができます。（そこまでまだ使いこなしてないので、正しくは「できそうです」。） せっかくなので導入するにあたり参考にさせていただいたサイトのまとめとつまづいたところなどをメモしておきたいと思います。 導入のキッカケ 話題すぎるほど人気のツールですので導入を検討するために調べてみたりはみなさんすでにしているかと思います。 私はDreamweaverを使用していてEmmet(Zen-Coding)は今までも活用してきたので、さらなるスピードアップを求めてSass+Compassの導入をしようと思っていました。 S
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
見せてもらおうか、SASSのCompassとやらの性能を
あ、どうも。おはようございます。 本格的に大型連休ということですので巷でちょくちょく耳にする、「SASS」とか「SCSS」とか「COMPASS」というものに挑戦してみました。 参考にした記事 一体どこまで便利なのか、文字でずらずら書いてもしょうがないので、百聞は一見に如かずということで、簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意しておきましたので、まずはこれを見てみてみよ！ 連休中にテーマを作ろうそうしよう。あ、ついでにscssってのとcompassってのがなんかどうも便利っぽいのでちょっと調べてみよっかな。から始まって。結論から言うと「狂おしいほど便利で今までぼくは何をしてたんだ」というレベルでした。 CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass(主にSCSS)
CSSだけでウィンドウぴったりに表示する編集画面を作る。（CSS おれおれ Advent Calendar 2012 – 23日目） | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 23日目 メールとかブログ記事とかの編集画面みたいなのがあって、それをウィンドウいっぱいに表示するとき、ウィンドウに合わせて縦方向に伸ばすのってどうしてますか？ JavaScript使っちゃいます？ それCSSで出来るよ！ ウェブサービスではあんまりないUIだと思うけど、ウェブアプリ的なものだったらよくあるのでは。 概要 ネタバレ。 height:100%で常に画面の高さに合わせつつ、固定の部分についてはpaddingで隙間を用意します。その際にbox-sizing:border-boxを指定する事で、隙間の部分まで含めた高さを指定出来るようにします。 高さを100%に出来る場合、出来ない場合について知る 昔書いたのでちらと読んでみてください。 CSSでheight:100%を使う方法について。 一言で言うと、上位要素に高さの
[CSS]フロートしたナビゲーションを中央に配置するスタイルシート
リスト要素をフロートさせて作成したナビゲーションをブラウザの中央に配置するスタイルシートをCSSplayから紹介します。 ナビゲーションのwidthは指定無しの成り行きです。 Centering Float Left Menus デモでは、CSSハックやinline-block, table/table-cellを使用せずに実装されています。 下記に、それをシンプルにしたデモをアップしました。 シンプルにしたデモ IE6/7/8beta2, Fx3, Op9.5, Safari3, Chrome1で正常に動作しました。IE5.5, Fx2はダメでした。 追記：その1 リストを内包するdivに「text-align:center;」をしたら、上記ブラウザ＋Fx2に対応できました。 なんで、きくのだろう、、、？ シンプルにしたデモ（Fx2対応） 追記：その2 「ふ」さんのコメントにより、Saf
inline-blockで発生する隙間（空白）を消す方法 - ナオユネット
display:inline-blockで発生する謎のスペース imgタグを横並びにしようとすると謎のスペースが出来ます。 display:inline-blockでも同じような空白ができますね。 この隙間は、コードの上での改行が空白として認識してしまっているからなんですね。 HTMLはこんなソースになってませんか？ <img src="hoge1.jpg" alt="" /> <img src="hoge2.jpg" alt="" /> <img src="hoge3.jpg" alt="" /> <div class="box">aaaaaaa</div> <div class="box">aaaaaaa</div> <div class="box">aaaaaaa</div> ふつう、こうやってタグ毎に改行して見やすく記述しますよね。 それでは、.boxにはinline-blockを
CSS3を使ってできる画像まわりのエフェクトやスタイリング18
CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。 たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 ※ 2/24 「2. めくれた風」を書き忘れていたので追記しました 目次 1. シャドウ 2. めくれた風 3. トイカメラ風トンネル効果 4. カラー調整 5. 回転 6. 角丸 7. 楕円のフレーム 8. 円のフレーム 9. 三角形フレーム 10. 重なった風 11. ぼかし 12. フェード（シャドウ編） 13. フェード（グラデーション編） 14. 反射 15. リボン 16. 差し込んだ風 17. フレームだけを傾ける 18. 半透明フレーム まとめ ※ 実際の表示はこちらから確認できます。 ※ この記事で掲載しているCSSは、シンプルにするためにベンダープリフィックスを付けていません
inline-blockを並べた場合に発生する「隙間」を消去するCSS
IEを含めた最近のブラウザでは珍しくなくなったinline-block。 このinline-blockを利用する場合に発生する「隙間」を改善する方法です。 原因は改行コード 下記のようなHTMLを用意しました。 リストタグを使ったインラインブロックを実現しようとしています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>inline-block
ウェブページ高速化に効果的なCSSセレクタ
CSSセレクタの使い方によってウェブページの表示速度は変わってきます。 劇的に速くなるということはないと思いますが、「ページの読み込みが0.5秒遅くなると、検索数が20%減少する」とか「ページの読み込みが0.1秒遅くなると、売り上げが1%減少する」なんて聞くと試してみたくなるのではないでしょうか。 ウェブページの高速化とCSSセレクタの関係については「CSSセレクタの高速化の話し - Webtech Walker」で紹介されていましたが、先日GoogleのPage Speedのページでなかで「Use efficient CSS selectors（効率のよいCSSセレクタを使う）」と紹介されていて内容も若干違うので、こちらを簡単に例などを交えて解説してみます。 ブラウザはセレクタを右から左へ判別していく まず知っておきたいのは「ブラウザはセレクタを右から左へマッチするか探していく」というこ
CSSでドロップダウンメニュー - CSSデザインノート
404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved
CSS liefde – CSSの使える!と思えるテクニックを紹介。 » img(画像)を正方形に切り取って表示させる
普通の長方形の画像を表示させるのではなく、正方形にｷﾘﾄﾘ（overflow:hiddenを使って)します。(16:9の縦長には未対応) HTML <h2>正方形に切り取る(w:h=100px)</h2> <div class="sqimgageview"> <span class="cut"><img src="http://art27.photozou.jp/pub/994/306994/photo/34967559.jpg" alt="sample" class="cut_image" /></span> <span class="cut"><img src="http://art19.photozou.jp/pub/994/306994/photo/33486834.jpg" alt="sample" class="cut_image" /></span> <span class
[CSS]フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック
フォントのサイズの単位に何を使ってますか？ px？ em？ それら2つのよく利用されるテクニックをおさらいし、さらに第3のテクニックも紹介します。 Font sizing with rem [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに pxを使ったサイズ指定 emを使ったサイズ指定 remを使ったサイズ指定 はじめに フォントのサイズの単位に何を使用するかは、未だに激しい議論の的となっています。それらのテクニックにはそれぞれ長所と短所があるのも現実です。 それらの中で短所が少なく、よく利用されるテクニックは2つあります。 pxを使ったサイズ指定 emを使ったサイズ指定 これら2つのテクニックを再検討し、さらにもう3つ目のテクニックを紹介します。 pxを使ったサイズ指定 ウェブの初期に、私たちはテキストのサイズを定めるために「px」を使用していました。これは一貫しており
CSSデザインカタログ | list | dt と dd を横並びにした定義リスト
サンプル 2007-05-30 テキストテキストテキストテキストテキストテキストテキストテキスト 2007-05-15 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 2007-04-30 テキストテキストテキストテキストテキストテキスト 2007-04-15 テキストテキストテキストテキストテキストテキストテキスト 2007-03-30 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト ソース XHTML <dl class="list309"> <dt>2007-05-30</dt> <dd>テキストテキスト......</dd> <dt>2007-05-15</dt> <dd>テキストテキスト......</dd> <dt>2007-04-30</dt> <dd>テキストテキスト......</
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
inline-blockを用いて横に並べた要素を中央に寄せるテクニック｜クロノドライブ
