新着記事
-
WEB制作
柔軟なデザインに向けたFlexboxとflex-directionの使い方
Flexboxの基本概念の紹介 Flexboxは、CSSのレイアウトモデルの1つであり、柔軟なコンテナ内での要素の配置と整列を行うための強力なツールです。従来のCSSのレイアウト手法では、要素を配置するために複雑なプロパ […]
-
WEB制作
Flexboxによる柔軟なレイアウトとプロパティについて解説
Flexbox概要 Flexboxは、CSSのレイアウトモジュールで、要素の柔軟な配置を実現します。 Flexコンテナ内のアイテムをメイン軸とクロス軸に沿って配置し、スペースの分配やサイズの制御ができます。 justif […]
-
WEB制作
CSSの単位「px・em・rem」の違いとは？使い分けを初心者向けに徹底解説【フォントサイズ・レスポンシブ対応】
CSS学習を始めたばかりの頃、コード例に書かれている「1.5em」や「1rem」といった単位表記を見て、「これは何?」と疑問に思ったことはありませんか?フォントサイズの指定は「px」しか使ったことがなく、相対単位の意味や […]
-
WEB制作
スマホ画面で横スクロールを解消する方法
スマートフォンで画面が横スクロールしてしまう問題について、以下の対処法を解説します。 問題の状態と原因 スマートフォンで画面が横スクロールすると、背景色が見えずに横に動いてしまう状態になります。この問題の原因は、body […]
-
WEB制作
CSSや画像が反映されない！正しいパスの書き方と外部ファイルの読み込み
読み込めなくて困っているんだから早く教えて！という人はこちらから 今回はWEB制作学習を始めるほとんどの人がぶつかるであろう「パス」について解説します。 今回の記事のポイントは以下の4点。 POINT パスには「絶対パス […]
-
WEB制作
before/afterって何？CSSの疑似要素の使い方について解説
CSSのプロパティで「before」と「after」というものがあります。 これらは疑似要素と言われ、CSS側で疑似的に要素を追加するというものです。 必ず使わなくてはいけないわけでないですが、このbeforeやafte […]
-
WEB制作
CSSの基本文法とファイルの書き方について解説
CSSの記述は「セレクタ」「プロパティ」「値」の3つで記述されています。 この3つを用いて記述することがCSSの基本文法です。 CSSはHTML内に記述することもできますが、推奨されておらず、一般的にはCSSファイルを別 […]
-
WEB制作
【複数行も可能！】HTMLのコメントアウトのやり方と使い方
HTMLのコメントアウトは以下の通り。 <!-- コメントアウトしています --> ショートカットキーは以下の通り コメントアウトのショートカットキー windows 「 Ctrl + / 」 Mac 「 ⌘ […]
-
WEB制作
【一発で解決】margin 0 autoが効かない理由と意味
早速ですがmargin:0 auto;が効かない時は以下のことを確認してみてください。 displayの値が「inline」「inline-block」以外になっているか widthを指定しているか positionやf […]
-
WEB制作
【CSS】マージンとパディングが効かない時の注意点と違いについて
「マージンやパディングが効かないんだけど！！」 WEB制作を学び始めたばかりの時、自分もありました。 結論から言うと、「インライン要素にかけていませんか？」 ということ。 要するに、マージンやパディングをかけている要素が […]
-
WEB制作
【10秒で解決】text-alignが効かない！displayとの関係
WEB制作を始めたばかりのうちはtext-alignが効かない！ということがよくあります。 結論から言うとtext-alignが効かないのは、text-alignをかける場所が違うからです。 text-alignが効かな […]
-
WEB制作
HTMLタグはカンニングOK！現場で使う主要タグ25種類
HTMLタグの種類は140以上。ほとんどが使われることがないので、まず今回ご紹介するタグを覚えましょう。 覚えるといっても暗記する必要はありません。 HTMLタグをはじめ、その他言語は作りながら身体に染みついていくもので […]
