- 2025年6月24日
viewportとは?HTMLでの設定方法についてまとめてみた!
はじめに viewportとは、PCやスマホ、タブレットなどのデバイスごとにコンテンツの表示領域を指定するためのHTMLのmeta要素(name属性に指定する値)です。直訳すると「表示領域」を意味し、「ビューポート」と読みます。このmeta viewportを正しく設定することで、レスポンシブデザインがうまく機能し、SEOにも良い影響を与えることが期待できます。 逆に、viewportを設定しない […]
はじめに viewportとは、PCやスマホ、タブレットなどのデバイスごとにコンテンツの表示領域を指定するためのHTMLのmeta要素(name属性に指定する値)です。直訳すると「表示領域」を意味し、「ビューポート」と読みます。このmeta viewportを正しく設定することで、レスポンシブデザインがうまく機能し、SEOにも良い影響を与えることが期待できます。 逆に、viewportを設定しない […]
WordPressでソースコードを美しく表示!Urvanov Syntax Highlighterの使い方と設定方法 HTML・CSS・PHPなどのプログラミング系記事を執筆する際、ソースコードを記事中にきれいに埋め込みたいと思ったことはありませんか? そんなときにおすすめなのが、「Urvanov Syntax Highlighter」というプラグインです。 Urvanov Syntax High […]
多くの人が「毎回アクセスするたびにパスワードを思い出せず、結局再設定することになる」という経験を持っているのではないでしょうか。 本稿では、パスワードにまつわる対策や通説、技術の実態について、それぞれの課題とともに解説していきます。 パスワードは便利さと安全性を両立できているのか? パスワードとは、あらかじめ設定した合言葉で本人確認を行う仕組みです。専門的には「記憶情報を使った認証方式」と呼ばれて […]
Gmailの設定手順 1. Gmailにログイン まずはGmailにログインします。※Gmailを利用するにはGoogleアカウントが必要です。 2. 設定画面を開く 画面右上の歯車アイコンをクリックし、「設定」を選択します。 【アカウントとインポート】 「アカウントとインポート」タブを開き、「他のアカウントでメールを確認」の項目にある[メールアカウントを追加する]をクリックします。 3. メール […]
普段、メールクライアントとしてGmailを使用していますが、GmailではGmail以外のアドレス、たとえば会社の独自ドメインのメールなどは、すぐに受信トレイに届かないことがあります。 「すぐにメールを確認したいのに…」と思う場面もありますよね。そこで、独自ドメインのメールをすぐに受信する簡単な方法をご紹介します。 独自ドメインのメールの受信する設定方法 1.設定 → すべての設定を表示 まずGm […]
WordPressでソースコードを美しく表示・埋め込むプラグイン6選 WordPressでは標準のコードブロックを使ってHTMLやCSSなどのソースコードを表示できます。ただし、キーワードの色分けや特定の行だけを目立たせるシンタックスハイライト機能は標準では備わっていません。ソースコードをより見やすく、読みやすく埋め込みたい場合は、専用プラグインの活用がおすすめです。 今回は実際に6つのプラグイン […]
Flexbox(フレックスボックス)の使い方まとめ 一見便利そうで、実際には少しややこしい…そんなCSSの「Flexbox(フレックスボックス)」について、使い方をわかりやすく整理しました。 Flexboxの基本的な考え方 Flexboxは、要素を効率よく並べたいときに使えるCSSのレイアウト手法です。特に「横並び」にしたい場面でよく使われます。 使うときはまず、並べたい子要素(item)を一つの […]
ページ読み込み中の白い画面、気になりませんか? ローディングアニメーションの導入でユーザーの不安を解消! Webページを開いたとき、数秒間真っ白な画面が続くと「ちゃんと読み込まれているのかな?」と不安になることはありませんか?そんなときに役立つのがローディングアニメーション(ローダー)です。 ローダーを設置することで、ユーザーに「ページを読み込み中です」ということを明確に伝えることができます。また […]
【CSS入門】スクロール時に要素を固定するには? positionプロパティの2つの指定方法を解説 Webサイトを閲覧していると、スクロールしてもヘッダーが常に画面の上部に表示されているサイトを見かけたことがあるのではないでしょうか。「自分のサイトにも取り入れてみたいけど、どうやって実装するのかわからない」「CSSだけでできるの?」そんな疑問をお持ちの方も多いと思います。 このような固定表示は、C […]
はじめに パララックス・追従ヘッダー・固定サイドバーに便利! かつてはInternet Explorer(IE)非対応のため、position: sticky; を使うにはポリフィルを入れるか、position: fixed; で代用するしかありませんでした。しかし、IEのサポートが終了した今、stickyは安心して使えるプロパティになっています。 この記事では、position: sticky; […]