Webエンジニアのブログ

Atomはデフォルトの設定で自動アップデートされるようになっていますが、使用しているパッケージが最新バージョンに対応していなくエラーが出たりして動かないといったことが起こらないように、手動アップデートに設定しておいたほうがいいこともあります...
続きを読む>>

マルチプラットフォームで使えるAtomエディタは開発者に人気のテキストエディタで多くの方が利用されているかと思います。そんなAtomテキストエディタも使い勝手がよくなるように更新されます。新機能の追加や不具合などの修正対応がされている最新バ...
続きを読む>>

Googleの検索エンジンでWebページの表示速度が速いと、ユーザーにストレスを与えないので検索順位が上がるなどいろいろ言われている中で、表示速度を速くする方法の1つとしてHTTPリクエストを減らすという方法があります。 その1つとして画像...
続きを読む>>

最新のIllustrator CCでは、簡単に画像アセットを使うことができるようになりました。Web制作の現場ではデザインカンプから必要な画像、アイコン等をよく書き出します。また、ロゴやイラスト、アイコンといったデザインはIllustrat...
続きを読む>>

サーバにアップロードされている公開前のWebサイトやテスト環境は観覧されると困るので、アクセス制限をかけたいところです。 今回はWebサイトにベーシック認証（Basic認証）でアクセス制限をかける方法をご紹介します。 Basic認証とは、H...
続きを読む>>

Web制作においてテスト環境を準備することはよくあることです。サイト内の修正をする際に本番環境で直接作業をして、もし記述を間違えて表示を壊してしまったとなると壊れたWebサイトが見られてしまいます。 しかし、テスト環境でも公開してしまうと検...
続きを読む>>

Web制作を学習している方に向けてWebページを作成するにあたり、HTML5で最低限必要な記述のベースとCSS3のメディアクエリ（Media Queries）を使ったレスポンシブWebデザインの書き方をご紹介します。 また、後半ではちょっと...
続きを読む>>

WordPressでWebサイト（ホームページ）やブログを制作している時、タクソノミーでカテゴリ分けして記事などを分類している場合にアーカイブまたはタクソノミーのアーカイブページにカテゴリリストのリンクを載せることがあるかと思います。 タク...
続きを読む>>

画像や図などにキャプション（説明）を入れることで、ユーザーに画像や図を理解してもらいやすくなります。またテキストコンテンツとしてGoogleが画像の近くにある画像の説明として認識しやすくなるため、SEOにも効果がでます。 画像の代替となるテ...
続きを読む>>

Webデザイン上、PCとスマホのレイアウトの順番を変える時にCSSでどうしてもコントロールしきれない時があります。 そんな時に使えるCSS3のFlexboxを使ってHTMLの記述を変えずに表示順を変えるテクニックをご紹介します。  ...
続きを読む>>