2019年5月18日オリジナルのアイコンフォントを簡単につくれる『IcoMoon』。自作のSVGアイコンづくりで活用していたけど、Web-fontも使えるので実装の方法を確認しておく。App』をクリックします。使用したいアイコンを選択します。Icons』をクリックすると、他のアイコンリストを追加できます。使用したいアイコンをクリックして、選択。Font』をクリックすると、先ほど選択したアイコンデータ一式がダウンロードされます。ダウンロード後は、画面が下のように変わります。今回、ダウンロードしたアイコンフォントの内容が表示されています。ここからコードを確認することができます。Code』という赤文字が現れますので、クリック。Webページへ実装するためのコードが表示されます。ダウンロードファイルは、Zip形式で圧縮されているので解凍します。解凍するとフォルダ内に6アイテム入っています。その中で必要なのは、2アイテムだけ。・fontフォルダ(中身ごと全部)・style.cssサイトに実装するには、上記の2アイテムをアップロードして、ページ内のヘッダーにstyle.cssのリンクを張るだけ。Code』で表示された実装コードをHTML内のアイコンフォントを使いたい場所にコピペします。ファイル名が同じなので注意が必要です!上書きを回避するには、新しくWeb-font用のフォルダを作って、それをまるごとアップロードすると安全です。本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。作ったサイトの文章や画像を簡単にコピーできないようにする方法です。画像の保存を完全に防ぐことはできません。display:inline-block。縦のラインがきれいに揃わないで困ることがある。可変で文字サイズを変更する「画面サイズに合わせて文字の大きさも変化させたい」けど、「em」や「rem」や「%」ではうまくいかない。ウインドウサイズに合わせて、画像を拡大縮小させる方法。CSSだけで解決できます。(2)このサイトについてサイト制作・グラフィック制作をしているデザイナーです。制作で躓いたことの備忘録としてこのブログを始めました。たくさんの検索結果から、実際に何度も何度も自分で試してみて、自分に合うなと思った方法やうまくいった方法をこのブログに書き留めています。プログラム関係のことはもっぱらコピペ派。自分でゴリゴリ書くことはできません。プログラムが分かる人がうらやましいです。そんな私でもなんとかサイト制作ができるのはグーグル先生と貴重な情報をおしげもなく公開してくださっているたくさんの方々のおかげ。有志のみなさまに日々感謝しつつ制作させていただいています。