Font Awesome 5 の導入 - Qiita
ちょっとややこしかったのでメモしとく。 Solid (塗り), Regular (線), Light (細い線)、Brands (ロゴ等) の4タイプがある 無料版では Solid、Regular、Brands 3タイプの一部が使える。Light は有料の Pro 版のみ Pro版永年ライセンスは60ドルで使用するプロジェクト数の制限はない。ただし、アップデートは1年間のみ可能 前者2つのフォントファミリーは "Font Awesome 5 Free"、Brands は "Font Awesome 5 Brands" npm版は2018年5月3日現在存在しない (要確認) OSにインストールして使える (Illustrator や Adobe XD で使える) 手順 ダウンロード & 解凍 web-fonts-with-css > webfonts にフォントのデータが入っている。これを一
【複数行にも対応】長過ぎる文字列を省略して末尾を三点リーダー（…）にする方法いろいろ | Recruit Tech Blog
ランディングページといったコンテンツもレイアウトも全て決め打ちで成立するようなものはさておき、多くの Web サイトおよびアプリケーションは、いかなる分量のコンテンツであろうと柔軟に受け入れて表示出来るように設計・デザインされなくてはなりません。 しかし、全ての文字列を表示するには長過ぎてレイアウトが崩れてしまうといった場合には、何らかの方法で文字列を省略する必要があります。一昔であれば Ruby や PHP、Java などサーバーサイドで文字列を切り捨てるなどの加工をしてからフロントエンドに返すという方法が常套手段として用いられていました。しかし、これでは昨今のワンソースによるレスポンシブデザインといったスクリーンサイズに応じて動的に表示領域が変わるようなデザインに対応しきる事が出来ません。PCサイズの表示領域に適した文字数を返したとしてもモバイルサイズの表示領域がそれと同じとは限りませ
[CSS]画像に美しい角丸とボックスシャドウを適用する方法
img要素で配置した画像にCSS3の角丸とボックスシャドウを適用をすると、Firefoxで角丸が反映されなかったり、Webkitブラウザでボックスシャドウが欠けたりします。 これを解消するCSSのTrickを紹介します。 CSS3 Rounded Image With jQuery デモページ FirefoxとWebkitブラウザ（Safari）のそれぞれにCSS3の角丸とボックスシャドウを適用すると、上記のように美しく表示されません。 それを下記のように美しく適用されるようにします。 角丸とボックスシャドウをこういう風にしたい 左：角丸と外側にシャドウ、右：角丸と内側にシャドウ CSS3で素直にスタイリング Firefoxでは角丸が適用されず、Safariではボックスシャドウが適用されません。
スマートフォンサイトにてフォームボタンのコーディング時に覚えておきたいCSSプロパティ | バシャログ。
禁煙してから３ヶ月、着実に体重が増加しているishidaです。 先週土曜日にCSS Nite LP13に参加してきました。 ちょうどスマートフォンのデザインとコーディングのお仕事が進行中でしたので、とても参考になりました。現在セミナー内容を振り返り学習中です。 それとCSS Nite関連ですと、何やら CSS Nite LP14 にて弊社メンバーが登壇するとかしないとか。 スマートフォンコーディングでは、CSS3で角丸やらグラデーションが使えるので画像の使用頻度は少なくなります。ボタンまわりについてもCSSのみで実装する機会が多いです。 フォームのsubmitボタンをCSSのみで表現する際には、ちょっとクセがありましたので 解決方法をご紹介します。 検索するsubmitボタンを、以下のようなデザインをCSSのみで実装することにします。 まずは簡単に横幅と背景色・角丸をCSSで設定してみます
HTML5ファミリー：CSS3広告とFlash広告 | Ext Japan Blog
この記事は7/20に掲載された「HTML5 Family: CSS3 Ads Versus Flash Ads」を訳したものです これまでHTML5関連技術について多くの解説ブログを掲載してきましたが、今回は、CSS3の機能を使っておもしろい実験をやってみたいと思います。例えば、、、よく見かけるようなFlashのバナー広告をHTML5で再現することはできるでしょうか？結論から言うと、HTML5そのものは必要ではなく、いくつかの画像ファイルとCSS3アニメーションだけで十分でした（現時点では、最新のChromeとSafariでのみ機能します）。次のリンク：3つのFlashバナー広告と、それらを我々がCSS3で再現したものとを比較してみてください。実際、気味悪いほどそっくりに仕上がっています。 この記事では、CSS3とHTMLだけで上記のようなバナー広告を作る方法について説明していきます。説明
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
-webkit-overflow-scrollingを指定するときについでにやっておいた方がいいこと - Qiita
worldending.jp