Basics– category –
-
【初心者向け】外部CSSとは？作り方・リンク方法を完全ガイド
Web制作を学び始めると「CSSはHTMLのどこに書けばいいの？」と迷う方も多いでしょう。特に複数ページで同じデザインを使いたいときに便利なのが 外部CSS です。 この記事では、外部CSSとは何か、作り方、HTMLとのリンク方法 を初心者向けに... -
【初心者向け】JavaScriptでborder-radiusを指定する方法まとめ｜CSSとの違いと実例コード
【初心者向け】JavaScriptでborder-radiusを指定する方法まとめ｜CSSとの違いと実例コード CSSでよく使う border-radius は、JavaScriptからも簡単に指定できます。本記事では、四隅すべてを同じ値にする方法から、個別指定、楕円形、さらにはアニメーショ... -
初心者向け｜画像を透過する方法まとめ【CSSPhotoshopで背景を透明にする】2025
初心者向け｜画像を透過する方法まとめ【CSS・Photoshopで背景を透明にする】 「画像を透明にしたいけど、どうやってやるの？」と悩んでいませんか？画像の透過には 「画像全体を透過する方法」と「一部だけ透過する方法」 の2種類があります。本記事では... -
JavaScript の “this” について
初心者向けに徹底解説！JavaScriptのthisが指すものを理解する4つのルール2025 JavaScriptを学んでいると、多くの人がつまずくのが「this」です。「thisって一体何を指しているの？」「関数によって動きが違うのはなぜ？」と疑問に思ったことはありません... -
【HTML入門】!DOCTYPE htmlとは？初心者向けに最初の1行を超やさしく解説！
HTMLファイルを作るとき、最初の1行に書く「<!DOCTYPE html>」。この短いコードには、「これからHTML5の文書が始まりますよ！」という大切な役割があります。もし書き忘れてしまうと、ブラウザが誤って古い形式で表示してしまうことも。この記事では... -
【CSS初心者向け】transformの使い方を徹底解説｜画像や文字を動かす・回す・拡大する基本まとめ
【CSS初心者向け】transformの使い方を徹底解説｜画像や文字を動かす・回す・拡大する基本まとめ CSSのtransform（トランスフォーム）は、要素を動かしたり、回転させたり、拡大・縮小したりするためのプロパティです。アニメーションやデザイン演出でもよ... -
【初心者向け】テキストとアイコンがズレる原因と直し方｜Flexboxで水平に揃える方法をわかりやすく解説
【初心者向け】テキストとアイコンがズレる原因と解決方法｜align-itemsで簡単に水平揃えにする方法 「テキストとアイコンを横並びにしたら、なぜかアイコンだけ下にズレてしまう…」こんな経験はありませんか？ 特に、display: flex; を使って横並びにした... -
【初心者向け】画像の上に文字を重ねる方法｜positionをやさしく解説します
【初心者向け】画像の上に文字を重ねる方法｜positionをやさしく解説します Webサイトを作っていると「画像の上に見出しを乗せたい！」「ボタンを少しだけズラしたい！」「要素を重ねてオシャレにしたい！」という場面がよくあります。 そんな時に必ず使う... -
【初心者向け】模写コーディングで必須のmax-width解説｜余白デザインの基本
【初心者の備忘録】模写コーディングでつまずいたポイント｜max-widthを最初に設定しよう コーディング学習を進める中で、初心者の私がよくやってしまうミスを備忘録としてまとめていきます^^同じようなところで詰まっている方の参考になれば嬉しいです！ ... -
【初心者向け】display:none; が効かない時の対処法｜レスポンシブ模写でよくあるミスと直し方
【初心者向け】display:none; が効かない時の対処法｜レスポンシブ模写でよくあるミスと直し方 初心者向け模写を最近やっています^^ そこで初心者の私がよくやってしまうミスをご紹介します！ 皆さんの参考になればなぁーと思いつつもほぼ私の備忘録でござ...