good510のブックマーク - はてなブックマーク

★★【保存版】Font Awesomeの使い方まとめ：Webアイコンフォントを使おう

今回はFont Awesomeという超便利なサービスの使い方をまとめます。後半ではアイコンにさまざまなアニメーション効果をつける方法も解説します。 1. Font Awesomeとは？ざっくりというとウェブサイトやブログでWebアイコンフォントを表示できるようにしてくれるサービスです。

good510 2020/07/14

“アイコン一覧”

リンク

CSSで作る！吹き出しデザインのサンプル19選

今回は、画像を使わずにHTMLとCSSだけで作るで吹き出しのデザインサンプルを紹介します。シンプルなものから、円形、会話形式、LINE風のものまで一挙にまとめました。HTMLとCSSはコピペして使うことができます。レスポンシブ対応以下で紹介する吹き出しデザインは（円形のものを除き）、文字が右端まで達すると、次の行へ折り返すようなレスポンシブ対応になっています。使い方（初心者向け） CSSが反映されないときはこちらシンプルな四角い吹き出し4つ最もシンプルな形です。三角形の位置を上下左右に配置したサンプルをそれぞれ紹介します。コードを見てもらうと「#e9edff」と書かれた部分が2カ所あると思いますが、これが背景色を指定するコードです。お好みで変えて頂ければと思います。ちなみに下から伸びる三角形は疑似要素（before）で表現しています。興味のある方は下の記事に目を通してみてくださ

good510 2020/05/24

リンク

【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30

使い方 HTMLとCSSの編集方法をご存知の方は読み飛ばしてくださいませ。スキップ手順1：CSSをコピペのちほど紹介するボックスデザインのうち、気に入ったものがあればCSSをコピーします。これをブログやWebサイトのCSSファイルに貼り付けます。貼付け先はブログサービス別に以下のようになります。 link rel〜を貼る場所 WordPress[ダッシュボード][外観][テーマエディター]右側のバーの[style.css]※もちろんFTPソフトを使ってもOK はてなブログ[デザイン][][デザインCSS]スマホ用はの[フッタ]に<style></style>と入力、この中に貼付けアメブロ[マイページ][デザインの変更][CSSの編集] Livedoorブログ[ブログ設定][PC][カスタマイズ][CSS] FC2ブログ[設定][テンプレートの設定][スタイルシートの編集] Blog