はてなブックマーク

Twitter facebook Google+ LINE こんにちは。ビータイズのWeb職人まいたけです。 ホームページを自分で作成している時、「文字は極力画像を使ってはいけない」というケースが多々あるかと思います。例えばAMP※対応するとき等も含めてページの表示スピードを上げたい時や、よりhtmlを検索エンジンに認識されやすい構造にする必要がある時（いわゆるSEO対策）ですね。 今回の記事は、例えばメインビジュアルは画像を使いたいけど文字だけはブラウザの打ち文字※で表示したい時に役立つものですので、是非試してみてください。 ※AMPとは？ AMPとはGoogleやTwitterなどが参加するAMPプロジェクトが構築した「Accelerated Mobile Pages」の略で、主にモバイル向けのホームページを高速で表示するための仕組みのことです。高速で表示させるため、htmlやCSS、

Twitter facebook Google+ LINE ホームページ作成に欠かせないのが、HTMLを記述するためのテキストエディタです。 テキストエディタは世の中に無数に存在しています。今回はその中でもマイクロソフトが無償で提供しているVisual Studio Code（以下VSCode）というテキストエディタを紹介いたします。 VSCodeはダウンロード、インストール、使用に関して料金が発生することはありません。自由に使えるという意味でフリーソフトという種類に属しています（この「フリー」は「無料」ではなく「自由」という意味です）。 VSCodeの特徴としては、マイクロソフトが長期間開発してきた開発環境の良い所取りがされていることと、マイクロソフト社内でも使われていて、精力的にアップデートされていることです。特定の機能は最初から何も設定せずにそのまま使うことが出来ます。 VSCode

Twitter facebook Google+ LINE こんにちは、ビータイズのWeb職人まいたけです。 長年愛用していたMac Book Air（2011年製）ではついに業務に耐えられなくなってきたので最近MacBook Proに乗り換えました。環境やアプリケーションの同期もMacは簡単で移行自体はスムーズに完了。 でも、新しいMacは「Retina対応ディスプレイ」だったのです。今更！と思われるかもしれませんが、まいたけはスマホもAndroidなのでいわゆるRetinaディスプレイを自分で常用するのは初めてでした。文字がはっきり、画像もキレイなのですが、でもMacでのWeb制作にあたっては困ったことが…。 Retinaで困ったこと１：Webサイトの画像がボヤけて見える こちらに関しては結論から言いますが、「慣れ」です。 この問題に関してはWeb制作というよりはサイトを利用するユーザ

Twitter facebook Google+ LINE こんにちは。ビータイズのWeb職人まいたけです。 みなさんは「favicon（ファビコン）」というものをご存知ですか？　ホームページのタブで表示される、小さな画像のことです。今回は、この小さなタブ画像「favicon」と、スマートフォン等でお気に入りに追加したときに使用される画像「touch-icon」について、作り方や設定方法を解説します。 本ページの内容は、htmlの基本を理解していることを前提に掲載しています。 それぞれ基本知識をまとめた記事もありますので、htmlやホームページ制作にあまり詳しくない方、学び始めたばかりの方はこちらも 参考にしてみてください。 以下の記事では、ホームページ制作に必要なhtmlの基本や書き方を解説しています。