HTML&CSS

HTML&CSS

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

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

css

HTML&CSS

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

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

html

HTML&CSS

【HTML】pとbr改行に使うのは?タグの意味を理解しよう

こんにちは。菜笑[なえ] (@nae310_)です。 今回はHTMLタグについて以下2点解説していきます。 <p>は段落 <br>は改行 <p>と<br>の具体的な使用例 <p>は段落 pタグはParagraphの略称で、段落を表すという意味があります。 そしてブラウザのデフォルトCSSでもpタグにはmarginが付与されています。 なので改行する際に使いたくなるかもしれませんが、ひと段落の文章を改行のために複数のpタグで囲むのは本来の使い方ではないと ...

css

HTML&CSS

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

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

css

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; ...

bootstrap

HTML&CSS

Bootstrap3とBootstrap4 グリッドシステムの違い

自分はいつもBootstrapを書く時にここを参考にしていました。 Bootstrap3日本語リファレンス これをみると モバイル[Extra small devices]:〜767px:col-xs- タブレット[Small devices]:768px〜991px:col-sm- デスクトップ[Medium devices]:792px〜1199px:col-md- デスクトップ[Large devices]:1200px〜:col-lg- となっているわけです。 で、これを元に760pxの画面でco ...