「Font Awesome 5」をCSSの疑似要素などで指定する時は「font-weight: 900;」じゃないと表示されないものがある – 無題のテキスト
「Font Awesome 5」をCSSの疑似要素などで指定する時は「font-weight: 900;」じゃないと表示されないものがある Font Awesome 5で、ブログ記事本文の別窓リンク（target=”_blank”を指定しているリンク）の後ろにCSSの疑似要素でウェブフォントを適用させる時にハマったのでメモ。 Font Awesome 5のexternal-link-altをCSSの疑似要素で適用させようとしたわけです。 結果、下記のCSS記述サンプルで問題なく表示できます。 .entry-content p a[target="_blank"]:after { content: "\f35d"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 100%; margin: 5px; } 上記の
メディアクエリ（Media Queries）の罠 – $(window).width()とスクロールバー | ツクメモ - ウェブやアプリをツクるヒトのメモ
メディアクエリ（Media Queries）の罠 – $(window).width()とスクロールバー 2015-05-26 JavaScript スクロールバーが表示される場合その幅を含んでしまうということです。 メディアクエリだけで、レスポンシブWebデザインを行うのであれば、ブレークポイントのずれがないので、問題ありません。 しかし、JavaScriptを一緒に使う場合は、注意が必要です。 jQueryでWindowサイズを取得する場合、このように書くことが多いと思います。 これだと、スクロールバーの幅が含まれていないので、15～20pxくらいメディアクエリと差が出てしまいます。 jQuery if ( $(window).width() < 768 ){ ... } レスポンシブで、メディアクエリとともにJavaScriptを併用するとき、メディアクエリ側でスクロールバーを含むの
定義リスト(dt,dd)を横並びにして 一対ごとに下線を付ける
たまにdtとddを横に並べたいときがあります。 色々方法はあると思いますが、dtとddそれぞれ一個ずつの組に対して毎回下線を付けたいときはどうするか考えてみました。 よく見かけるのは一個ずつdlを閉じてしまうやりかた。 <dl> <dt>定義語</dt> <dd>説明文説明文説明文説明文説明文</dd> </dl> <dl> <dt>定義語</dt> <dd>説明文説明文説明文説明文説明文</dd> </dl> <dl> <dt>定義語</dt> <dd>説明文説明文説明文説明文説明文</dd> </dl> 意味的にスマートではありませんね。 やっぱり一個のdlでひとまとめにしてみたいです。 <dl> <dt>定義語</dt> <dd>説明文説明文説明文説明文説明文</dd> <dt>定義語</dt> <dd>説明文説明文説明文説明文説明文</dd> <dt>定義語</dt> <dd>説明
CSS3で縦書きにする方法と挙動 - Qiita
div { -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; } 日本語は縦（vertical）の右から左（Right to Left）なのでこのプロパティを用います。 IEは昔から独自仕様で縦書きが可能だったため、プレフィックス付きで変なプロパティがついています。 その他プロパティや対応ブラウザは下記サイトでご確認ください。 writing-mode - CSS | MDN Can I use ブラウザによる違い ブラウザにより挙動が異なるのですが、最大の違いはwriting-mode: vertical-rl;を指定したとき、Chrome、Safariは右詰め、Firefoxは左詰めで表示されてしまうことです。text-alignでの指定では右詰めになりません。t
手持ちのフォントをWEBフォント用に一括変換してくれるサービス【@FONT-FACE GENERATOR】 – Online Convert to WEBFONT
手持ちのフォントをWEBフォント用に一括変換してくれるサービス【@FONT-FACE GENERATOR】 – Online Convert to WEBFONT どうもこんばんは。今回のtipsは【手持ちのフォントをWEBフォント用に一括変換してくれるサービス @FONT-FACE GENERATOR】です。正直最近利用しているサービスの中では、ずば抜けて便利なツールのひとつです。PC内の.ttfフォントを.svg、.eot、.woffに変換しさらにフォント指定する為のCSSや表示確認用HTMLも用意してくれます。 @FONT-FACE GENERATOR .ttfから.svg、.eot、.woffへ変換 細かい設定をする場合は【EXPERT】を選択し、フォントをアップロード【Add Fonts】してください。ただご利用の際には、フォント自体のライセンスにはご注意ください。基本的にはすご
複数行でも text-overflow: ellipsis したい時のCSSメモ - Qiita
2024年追記 以下は古い情報ですので、 line-clamp を使ってくださいね！ はじめに 幅をはみ出したテキストを三点リーダ … で省略する場合は text-overflow: ellipsis; を使いますが、複数行で使えないのが残念です。下記、複数行でもそれらしい見た目を得るための簡易的な方法の紹介です。 サンプル デモはこちら(Codepen)： http://codepen.io/skwbr/pen/zqQwVZ コード HTML <p class="text-ellipsis">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p> <p class="text-ellipsis multiline">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られた
CSSで作る！綺麗なWeb用リボンデザイン22選
画像を使わなくても、立派なリボンをWebサイト上に表示することができます。この記事では様々な形のリボンの作り方を使用サンプルとともに紹介していきます。どれもHTMLとCSSのコピペで使うことができます。 はじめに リボンのテキストはサンプルでは「Welocome to My Blog!」や「NEW」などとしていますが、お好みのテキストに変えてご利用ください。ただし、複数行にわたるような長文にするとデザインが崩れてしまうことがあります。なるべく、短めのテキストを入れて頂くのがおすすめです。 また、HTMLコードでは例としてh3タグを使っていますが、この部分をh1~h5やpタグ、div、spanタグに置き換えてそのまま使うことができます。
CSSだけで矢印を作ってみた｜デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログ
ワーキングマザーの池島です。 年度末に差し掛かり、保護者会や学校説明会、卒園対策委員などで忙しくしております。 現在、自社のコーポレートサイトの制作をしており、初めてやってみることがあったり、試してみたかったことをやってみたりと、スキルアップにも良い機会となっています。 そんな中、画像を使わずにCSSを使って矢印を作る機会がありましたので、備忘録も兼ねて、いくつかご紹介したいと思います。 サポートブラウザは、基本的に最新のバージョンを想定しています。 ::before や ::after を使わず、別のオブジェクトとして扱えば、もっと古いバージョンでも使えると思います。 今回は、HTMLがシンプルにできる方法で考えました。 左から右のグラデーション矢印 まずは、スタンダードな矢印です。グラデーションを付けてみました。 ［IE8〜（グラデーションはIE10〜）］ HTML <div clas
簡単！CSSだけで作るメガメニュー
最近よく見るメガメニューですが、簡単なものならCSSだけで実装できます。 まずは下記で動作をご確認ください。 デモ ABOUTとCOMPANYにマウスを乗せるとメガメニューが開きます。 フェード フェードイン・フェードアウトのアニメーションです。 See the Pen megaMenu by leo (@leo-trym) on CodePen. アコーディオン ちょっと工夫すればアコーディオンのような動きも可能です。 See the Pen megaMenuAcc by leo (@leo-trym) on CodePen. サンプル HTML HTMLの構造は簡単です。 メインメニューの中にサブメニューが入ります。 <nav id="gnav"> <ul> <li><a href="">HOME</a></li> <li class="toggle"> <a href="">ABOU
5000兆円欲しい！.css
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
【CSS】リンク先のURLやファイルの拡張子に合わせてアイコンを表示する方法。
普通のリンクだと思ってクリックしてみたら、実はそれがPDFファイルへのリンクだったり、意図せずメール・アプリケーションが起動したり、またはワードやエクセルのファイルだったりするとさらに最悪…。ネットサーフィンをしていると、そんなフラストレーションが貯まるような機会に遭遇することがしばしばあります。 自分が運営するサイトでは、ユーザーにそんな嫌な思いをさせないために、PDFへのリンクの場合はPDFのアイコン、メール・アプリケーションが起動する場合はメールのアイコンを表示させるなどのような、細かい気配りが大切だと考えています。 まずは、以下のHTMLを見てください。 HTML の記述方法<!-- 通常のリンク --> <a href="http://example.com">http://example.com</a> <!-- mailto --> <a href="mailto:examp
蛍光ペン風にテキスト上をマーカーするCSSを設定してみた
WordPressのテーマによっては最初から蛍光ペン風のマーカーが付いていることがあります。 その場合は設定する必要はありません。 設定されていない方向けに書いています。 蛍光ペンマーカーを設定（CSS） まずはCSSの設定からスタート。 蛍光ペンマーカーのCSSは「linear-gradient()属性」を使います。 linear-gradient(transparent 線の太さ, 線の色 0%) このlinear-gradient属性、グラデーションを使って設定します。 （）内の線の太さと線の色を好みの色と太さに変更するだけでOK。 線の太さと線の色の意味は下の通りになります。 線の太さ 黄色の蛍光ペン(太) .marker_yellow_futo { background: linear-gradient(transparent 0%, #ffff66 0%); } 黄色の蛍光ペン
スマホで背景fixedしたい時のCSSメモ - Qiita
Mobile Safari等 background-attachment:fixed; が効かない環境でもそれらしいことをやりたい場合の方法として、position:fixed; の全面div要素を背面に敷いておく方法がよく紹介されていました。 少し改良?しつつメモ。 サンプル http://jsrun.it/volkuwabara/w5KY (スマホからどうぞ) ソース body::before { background:url('bg.png') no-repeat left top; background-size: 100% auto; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding-bottom: 108px; content: ""; z-index: -1
CSSとJS/jQueryでTwitter埋め込みタイムラインのデザインをカスタマイズする | ITハット
CSSとJS/jQueryでTwitter埋め込みタイムラインのデザインをカスタマイズする 毎日インスピレーションを受けるため、ハイクオリティーなWebサイトを探すのが日課になっています。そこで、もったいないなと思うのがTwitterタイムラインウィジェットが白く、浮いてしまっているということです。せっかく、美しいデザインのサイトなのにTwitterウィジェットで台無しになってしまっていました。そこで、今回はTwitterウィジェットを自由にカスタマイズする方法を紹介します。 ウィジェット作成 まず、Twitterのページへ行き、自分のアイコンをクリックします。 設定をクリックします。 左のメニューからウィジェットを選びます。 新規作成をクリックします。 特に設定するところはありませんが、オプションで@ツイートを除外したい場合はチェックをはずしましょう。設定が終わったらウィジェットを作成を
Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox（Windows）
目次 ブラウザーによってWebフォントの見え方が違う 各ブラウザーの実際の画面で見え方をチェック font-smooth -webkit-font-smoothing transform: rotate(0.001deg) text-shadow: 0 0 0.1px rgba(0,0,0,0.5) CSSを適用した状態で各ブラウザーの実際の画面でチェック このブログ内の関連ページ 参考にしたページ サンプル画面として使ったサイト この記事へのネットの反応まとめ ●ブラウザーによってWebフォントの見え方が違う 今更ですが、日本語のWebフォントを会社のサイトで使い始めました。 元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてし
【CSS】2行目以降を1文字下げる［text-indent］の使い方。
箇条書きや注意書きの文章を書く場合に、文章の先頭に「・」や「※」などの記号を記述することがよくあると思います。 しかし、2行目以降がその記号の下に回り込んでしまうことが気になっている方も多いのではないでしょうか。 手作業で地道に改行を入れたり、記号を画像で背景設定したり、あるいは強制的にリスト化してマークをつけたりと、あの手この手で誤摩化しているケースはよくあります。 でも「やっぱりテキストで綺麗に表示させたい！」というときに、以下の方法が最適です。 まずはサンプルをご覧ください。 ※text-indentプロパティの便利な使い方。：サンプルページ どうでしょう？ 見事なまでに文章の先頭が綺麗に揃っていますね。 設定の仕方は以下の通りです。 HTML HTMLでの記述。 <p class="indent-1">※text-indentプロパティの便利な使い方。<br> 文章の段落などの2行
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IE8〜11/Edge12〜の各バージョンに対応したCSSハックまとめ | SPYWEB
ol,li,リストで括弧付の数字を作る方法 | Webお役立ちネタ帳
subやsupでline-heightがズレるのを防ぐCSS