rie– Author –

疑似要素ってなに？ 疑似要素とは、見た目だけ「あるように見せる」要素のこと！つまり…HTMLには書かれていないけど、CSSだけで、前や後ろに文字やマークを追加できる仕組みです。 htmlに星マークはないですが、CSSだけで表示させることができます。 こん...

チェックボックスとは 一言で言うと…「はい・いいえ」「する・しない」など、選ぶかどうかを決める時に使います。よくある使い方の例として①利用規約に同意しますサービスを使う前に、「ルールに同意しますか？」というときのhtmlコードがこちら↓インプッ...

みなさん、Webサイトを見ていて「リンク」にマウスを乗せた時、ポインター（マウスの矢印）が"指の形"に変わるの、見たことありますよね。実はあの「指マーク」、マウスを乗せたという"状態"に反応して、見た目が変わっているんです。でも、HTMLのコードを...

属性とは（おさらい） 属性とは「タグの中に書かれている　ひとことメモ　を見て、CSSデザインを当てる方法です！＊属性を理解する記事はこちら→「 属性 」って何？ タグだけでは物足りない！属性で伝わるhtml class名を使ったデザインの仕方 ・テキストボ...

今回は「子孫セレクタ」「子セレクタ」「隣接セレクタ」という３つのセレクタを使って、シンプルで読みやすいブログ記事を一緒に作ってみましょう！↓これを作ります htmlコードの作成 htmlコードを書きましょう！ ・emmet機能を使って簡単作成！ ・クラス...

「要素」はHTMLの超基本！タグの意味や構造をしっかり理解することで、読みやすくて正しいコードが書けるようになりますよ！今回は、要素の基本と構造の仕組みをわかりやすくまとめています。 要素のおさらい 要素とは→開始タグ＋内容＋閉じタグ＝要素 要...

・余白には「外側」と「内側」があります。今回は「内側の余白」＝paddingだけに注目！・「文字が端っこにくっついちゃう」「背景色はつけたけど、なんだか窮屈…」などの悩みを解決します！ paddingとはどこのこと？ ・ボタンを例にして説明します・paddin...

今回は「学校のルール」にたとえて、わかりやすく説明します！ CSSの優先順位ってなに？ ・同じ場所に複数のCSSがあると、どれか1つだけが有効になる・それを決めるのが「セレクタの強さ」「優先順位」 学校で例えるセレクタの優先順位 実際のコードで書い...

・CSSってよく聞くけど、「セレクタ」って何？今回は、セレクタとは何か？初心者が知っておきたい３つのセレクタを優しく解説します。・このブログを読む前にこれを読めばさらに理解する記事↓これで完璧！外部 CSS の作り方完全ガイドclass と id の違いを...

HTMLやCSSでを練習していると、「タグをいちいち全部書くのは大変…」そんなあなたに知って欲しいのが、VS Codeに入っている「Emmet（エメット）」です Emmet（エメット）って何？ Emmetとは、HTMLやCSSのコードを短く書いて、【 TABキー 】で一気に展開で...