CSS

【HTML/CSS】ファイルパスの書き方

こんにちは。菜笑[なえ] (@nae310_)です。今回はファイルパスの書き方についてです。 HTML, CSSを勉強し始めた方が、最初につまずくポイントが「ファイルパス」だと思います。自分もプログラミング講師をしていて「画像が反映されません」「CSSを書いたのに何も変わりません」という質問をよく受けます。ほとんどの場合がファイルパスの書き方が間違っているんですね。なので、今回はこの「ファイルパス」について完全に理解していただこうと思います！大事なポイントは３つだけファイルパスを理解する ...

HTML&CSS

【CSS】レスポンシブ対応のステップナビの実装方法【コピペOK】

こんにちは。菜笑[なえ] (@nae310_)です。今回はレスポンシブ対応のステップナビの実装方法についての備忘録です。コピペ用コードはCSS用とSCSS用２種類用意しています。完成図今回はPC版のみ文字を表示して、SP版ではシンプルに数字だけにしました。 PC版（画面幅769px以上） SP版（画面幅768px以下）完成コード [コピペOK] HTMLはどちらも共通です。 CSS用 See the Pen step nav css by NaeSato (@N310) on CodePen. ...

HTML&CSS

【CSS】Flexboxを使用しただけで要素の高さがそろう理由を解説

こんにちは。菜笑なえです。今回はCSSでFlexboxを使用しただけで要素の高さがそろう理由を解説していきます。こちらの記事で要素の高さをそろえるサンプルコードとポイントは解説したので、コピペで使えるコードが見たい方はこちらもご覧ください。 Flexboxを使用しただけで要素の高さがそろう理由まずはこちらのサンプルコードをご覧ください。黄色の孫要素(p)の高さがそろって、青色の孫要素(p)の色が違います。 See the Pen display flex-failed01 by NaeSato ( ...

HTML&CSS

【CSS】Flexboxを使用して要素の高さをそろえる方法【ポイント4つ】

本文こんにちは。菜笑なえです。 CSSで要素の高さをそろえるのって、どうすればいいんだろうと悩みますよね。 jQueryのプラグインとかもありますが、CSSでも可能なので解説していきます。実際のサンプルもあります。 CSS Flexboxを使用して要素の高さをそろえる方法【ポイント4つ】完成コード（コピペOK） See the Pen display flex-complete by NaeSato (@N310) on CodePen. 4つのポイント親要素(ul)にdisplay:flex; ...