【HTML/CSS】Web制作入門記事まとめ、コーディング基礎固め！

前回、2020年振り返りということで、アクセスの多い記事をまとめてご紹介しました。

webabc.hatenablog.jp

年明け初投稿の今回も、引き続きまとめ記事シリーズ第2弾。

Web制作を学ぶ上で役立つ記事をなるべく学習ステップ順にまとめていこうと思います。

入門したての方や、学習中の方などのお役に立てれば嬉しいです。

是非ご参考ください。

IEではline-heightが効かない？！Internet Explorer対応の見解

Webブラウザ界の問題児Internet Explorer、通称IE。

サイト納品の際に一安心したと思ったら後からIEでの表示がおかしいと、対応に追われるなんてことがよく起こります。

こういった問題が起きないよう、受注の際にブラウザ対応、特にIEについてどこまで対応範囲とするか、はっきりさせておくのが大事です。

今回はIE11においてline-heightが効かずデザインが崩れているという事例があったので、IEへの対応についての見解を含め、解説していきたいと思います。

【HTML/CSS】中央揃えにしたい!!のに出来ない時に見る記事 Part.3「absoluteとcalc()でのセンタリング編」

要素を中央揃えにしたい時の方法としてFlexを使うやり方などこれまで説明してきました。

webabc.hatenablog.jp

Flexが完全に使えるようになってきたのはここ数年のこと。

勿論それまでに培われてきたレイアウトのテクニックは多く存在します。

position: absoluteと、calc()関数を使った中央寄せもその方法のひとつ。

この方法は中央寄せにしたい要素と外側の要素の幅高さがしっかり決まっている時に有効なテクニックです。

フレックスが使える場合はそちらの方が手っ取り早かったりしますが、一応IE9からフル対応している技なので場合によってはこちらを採用するのも手だと思います。

また、positionを使用するので中央だけでなく自在に配置できるのでより幅広いレイアウトに対応できるので、そういった活用のためにも是非ご参考頂ければ幸いです。

【HTML/CSS】初心者向け！コーディングでよく使うタグ、プロパティまとめ

今回はWebサイト制作・コーディングについて学習し始めて間もない方向けの基礎まとめです。

よく使う基本のHTMLタグやCSSプロパティについてざっとまとめてるので、初心者の方はもちろん 、久々のコーディングでブランクがあるという方にもご参考頂ければ幸いです。

模写コーディングなどする際にコーディングが捗るよう、いつでも見返せるようブックマークなどして是非活用してください。

【HTML】サイトにファイルのダウンロードリンクを貼る方法

ウェブサイト上でユーザーに対して何らかのファイルのダウンロードを促す時があるかと思います。

今回はそういったダウンロードリンクを貼る方法について、記したいと思います。

【CSS/Google Fonts】フォントが太字にならない場合の対処法。テキストシャドウ＆ウェブフォント。

通常、CSSでテキストを太字にしたい時には、クラス等のプロパティで

「font-weight: bold;」

を指定し、そのクラスをテキストに適用します。

ただ、フォント自体がboldのウェイトに対応していなかったり、標準のウェイトが既に太字と変わらない状態だったりして、思うように文字の太さを調整出来ない時があります。

フォント指定は基本的に見ている方の端末内に存在するフォントに依存するので、こういった状況が懸念されます。

そんな「太字にならない時」に太字を適用させる対処法を今回、２つ紹介したいと思います。

ひとつは「text-shadow」を用いる方法。もうひとつは「ウェブフォント」を用いる方法です。