タグ: Webサイト制作

Googleフォントをサブセット化してページの読み込みをスムーズに

おしゃれなフォントが気軽に実装できるGoogleフォント。みなさん使っていますかね?登録やダウンロード不要なので便利ですが、日本語フォントはなかなか容量が大きくてページの読み込み速度に影響が出てしまいます。そこで必要なフォントのみを指定できるサブセット化をしてみましょう!
続きを読む

Webクリエイターボックスの【Webサイト制作 動画講座】始まります!

Webクリエイターボックス、ユーチューバーになる…!ということで、YouTube動画を更新していこうかと思います。Youtubeのアカウント自体は2010年からあって、微妙にブログで紹介するときなどに動画をアップしていたんですが、完全に放置していましたね…。そのアカウントを掘り起こして、今後更新をしていこうかと思っています。
続きを読む

CSSファイルを読み込むだけ!クラスなしCSSフレームワークいろいろ

BootstrapでおなじみのCSSフレームワークでは、各要素に決められたクラス名を指定してスタイルを適用していました。ですが最近クラスを指定せず、HTMLを書くだけで整ったスタイルを適用してくれる「クラスなしCSSフレームワーク」が続々と登場しています。headタグ内にCSSファイルを読み込む記述を追加するだけでOK!学習コストもかからずとっても便利です。日本語版のデモも用意したので、どんな表示になるか確認してみてください。
続きを読む

SVG形式のファビコンを設置しよう

つ・い・に!ファビコンもSVG形式が対応されるようになりました!SVGを使えばこれまで使われてきたPNGなどのビットマップ形式とは違い、拡大縮小しても画質が劣化しません。つまり、過去記事「クリエイティブなファビコンを設置しよう」で紹介したように多くのサイズを用意する必要はありません!やったね!少し工夫すればダークモードにも対応できますよ!さっそくみていきましょう!
続きを読む

拙著「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」 の韓国語版が出版されました!

私の書いた書籍「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」の韓国語版が発売開始されました!翻訳にはノータッチですし、私自身韓国語はまったく読めないのですが、時々韓国の読者から連絡をもらったりもするのでお知らせします!
続きを読む

Webアイコンフォントの【Font Awesome】がアカウント登録必須になったので、使い方をおさらいしました

Font AwesomeはWebページ上にアイコンを表示させるためのサービス。汎用性の高いシンプルなアイコンが多数用意されています。アイコンの画像をご自身で用意しても構いませんが、このようなサービスを使うと手軽に実装でき、管理もしやすくなるでしょう。昔から愛されてきたこのFont Awesomeですが、少し前からアカウント登録が必要になりました。今回はアカウント登録の手順から基本的な使い方を紹介します。
続きを読む

メールアドレスを指定できるmailtoリンクの設定方法や便利なスクリプト

多くのWebサイトでお問い合わせにはフォームを設置しているかと思います。入力ミスのチェックなど機能のついたものも多いのですが、初心者の方には設置のハードルが高く感じるかもしれません。そんな時は手軽に導入できるmailtoリンクを使ってみましょう。リンクをクリックするとユーザーがいつも使っているメールアプリが起動するので、送信元のメールアドレスを入力する手間も省けますよ。懸念されやすい迷惑メールの対策をしているスクリプトも紹介します!
続きを読む

ブラウザー上でカスタマイズできるSVGアイコン、背景パターン、イラスト

高解像度ディスプレイでもきれに表示できるSVG形式の画像。アイコンの表示などでは一般的に普及してきたかと思います。SVG形式ではカスタマイズがしやすいところもメリットのひとつですね。今回はブラウザー上で簡単に自分好みに変更できるSVGアイコンや背景パターン、イラストを配布しているWebサイトを紹介します。
続きを読む