-
属性セレクタとは、classなしでもデザインできる便利ワザ!
属性とは(おさらい) 属性とは「タグの中に書かれている ひとことメモ を見て、CSSデザインを当てる方法です!*属性を理解する記事はこちら→「 属性 」って何? タグだけでは物足りない!属性で伝わるhtml class名を使ったデザインの仕方 ・テキストボ... -
【初心者向け】npmとは?Web制作でよく使う「便利ツール」の正体をわかりやすく解説!
【初心者向け】npmとは?Web制作でよく使う「便利ツール」の正体をわかりやすく解説! 「npmって何?」「JavaScriptの勉強を始めたら出てきたけどよくわからない…」 そんな初心者の方に向けて、npmとは何か?どんな場面で使うのか?を、やさしく・具体的に... -
子孫クタ・子セレクタ・隣接セレクタの基本的な書き方
今回は「子孫セレクタ」「子セレクタ」「隣接セレクタ」という3つのセレクタを使って、シンプルで読みやすいブログ記事を一緒に作ってみましょう!↓これを作ります htmlコードの作成 htmlコードを書きましょう! ・emmet機能を使って簡単作成! ・クラス... -
スクロールでふわっと表示されるアニメーションの実装方法【初心者向け・コピペOK】
スクロールでふわっと表示されるアニメーションの実装方法【初心者向け・コピペOK】 Webサイトをおしゃれに見せたい!そんなときに使えるのが「スクロールでふわっと表示されるアニメーション」です。 この投稿では、初心者の方でも理解できるように、HTML... -
親からひ孫まで!要素の世代物語
「要素」はHTMLの超基本!タグの意味や構造をしっかり理解することで、読みやすくて正しいコードが書けるようになりますよ!今回は、要素の基本と構造の仕組みをわかりやすくまとめています。 要素のおさらい 要素とは→開始タグ+内容+閉じタグ=要素 要... -
【CSS】フォントサイズにcalc()を使うとどうなる?使い方とレスポンシブ対応のコツを解説!
CSSでフォントサイズを指定するとき、pxやremだけを使っていませんか?最近は、レスポンシブに対応するために calc() を使う方法が注目されています。 この記事では、calc()の基本的な使い方から、フォントサイズでの具体的な活用例、さらに注意点までをわ... -
内側の余白って何?CSSのpaddingで読みやすさが変わる!
・余白には「外側」と「内側」があります。今回は「内側の余白」=paddingだけに注目!・「文字が端っこにくっついちゃう」「背景色はつけたけど、なんだか窮屈…」などの悩みを解決します! paddingとはどこのこと? ・ボタンを例にして説明します・paddin... -
「CSSのルール」誰が一番エライ?学校を例えで学ぶ、セレクタの力関係
今回は「学校のルール」にたとえて、わかりやすく説明します! CSSの優先順位ってなに? ・同じ場所に複数のCSSがあると、どれか1つだけが有効になる・それを決めるのが「セレクタの強さ」「優先順位」 学校で例えるセレクタの優先順位 実際のコードで書い... -
【初心者向け】JavaScriptでDOMを操作する方法とイベントの使い方をやさしく解説!
JavaScriptを使ってHTMLの内容を動的に変更したり、クリックや入力などのユーザー操作に反応したいなら「DOM操作」と「イベント処理」は必須です。この記事では、DOMの基本的な操作方法と、よく使うイベントの書き方を、初心者向けに図やコード例を交えて... -
【完全初心者向け】JavaScriptの配列とオブジェクトの違いと使い方をゼロから解説!図解・コード例付き
🔰 JavaScript初心者がつまずく「配列」と「オブジェクト」って何? JavaScriptでよく登場する「配列」と「オブジェクト」。データをまとめて管理するために欠かせない存在です。 でも「どう使うの?」「何が違うの?」という声、多いですよね。 こ...