新着記事
-
WEB制作
モバイルファーストで学ぶ！メディアクエリの実践的なブレークポイント設定術
「メディアクエリのブレークポイントって、どこに設定すればいいの?」「min-widthとmax-widthの違いがよくわからない…」そんな悩みを抱えていませんか? レスポンシブデザインの実装で最初につまずくの […]
-
SEO
Web制作者が現場で実践すべきSEO対策の基本|コーディング時に押さえるべきポイント
「クライアントからSEOに強いサイトを作ってほしいと言われたけど、何から手をつければいいか分からない…」「コーディング時にSEOって意識したほうがいいの?」そんな悩みを抱えていませんか? Web制作の現場では、デザインや […]
-
WEB制作
【初心者向け】CSSのclamp()関数でレスポンシブデザインを楽にする実践ガイド
「スマホで見たらフォントが小さすぎる…」「タブレットだとレイアウトが崩れる…」そんな経験、ありませんか? レスポンシブデザインの実装で、メディアクエリを何個も書いて疲れていませんか? 実は、CSSのclamp()関数を使 […]
-
WEB制作
CSSのz-indexが効かない！原因と5つの解決方法を初心者向けに解説
「z-indexで999を指定したのに、要素が前面に表示されない…」「モーダルが背景の下に隠れてしまう…」 CSS学習中のあなたは、こんな悩みを抱えていませんか？実はz-indexが効かない原因のほとんどは、positi […]
-
WEB制作
rel=”noopener noreferrer”はなぜ必要？target=”_blank”の安全対策を初心者向けに徹底解説
「外部リンクにtarget="_blank"を使うときは、rel="noopener noreferrer"も一緒に書いてね」と言われて、よくわからないままコピペしていませんか？ 実は、target=”_bl […]
-
WEB制作
スマホで100vhがズレる問題の回避策（svh/lvh/dvhと実装例）
「スマホで100vhを指定したのに、画面からはみ出してスクロールが発生してしまう…」こんな経験はありませんか？PCでは問題なく全画面表示できていたのに、スマホのアドレスバーやツールバーのせいで意図しない余白やズレが生じる […]
-
WEB制作
コンテナに入っている要素をはみ出し、画面いっぱいに表示する方法
ウェブサイトのほとんどは、下記の画像のように、コンテナと呼ばれる大枠の中にコンテンツを作成し、margin:0 auto;などで真ん中寄せにしています。 しかし、このようにコンテナ内に入れるとデザインによっては不都合が生 […]
-
WEB制作
【完全ガイド】HTMLのmetaタグの必要性と使い方
HTMLのmetaタグはウェブページに関する重要な情報を提供するための要素です。metaタグは、検索エンジンやブラウザに対してウェブページの内容や目的を伝える役割を果たします。 ウェブサイトのメタ情報は、検索エンジンがウ […]
-
WEB制作
Flexboxの参考事例、効果的なレイアウトの実例
Flexboxの概要と基本原則 Flexboxは、Webデザインにおけるレイアウトの柔軟性を向上させるための強力なツールです。このセクションでは、Flexboxの基本的な概要と原則について解説します。 Flexboxは、 […]
-
WEB制作
柔軟なデザインに向けたFlexboxとflex-directionの使い方
Flexboxの基本概念の紹介 Flexboxは、CSSのレイアウトモデルの1つであり、柔軟なコンテナ内での要素の配置と整列を行うための強力なツールです。従来のCSSのレイアウト手法では、要素を配置するために複雑なプロパ […]
-
WEB制作
Flexboxによる柔軟なレイアウトとプロパティについて解説
Flexbox概要 Flexboxは、CSSのレイアウトモジュールで、要素の柔軟な配置を実現します。 Flexコンテナ内のアイテムをメイン軸とクロス軸に沿って配置し、スペースの分配やサイズの制御ができます。 justif […]
-
WEB制作
【超便利】ジェネレーターを一括で管理できるFrontend Toolkitの使い方
WEB制作をやっていると、「ジェネレーター」を使うことが多々あると思います。 例えば、三角を作りたい時に横幅、高さ、方向、色などを指定することで、一発でCSSのコードを表示してくれるものや、HEX値をRGBに変換してくれ […]