マガジンのカバー画像

学習メモ

20
「プログラミング」で学んだことのメモ書きになります。「コード」をたくさん載せていくので、ぜひ参考にしてみてください!
運営しているクリエイター

#イラスト

【CSS】文章に「インデント」を付ける方法とは?!【学習メモ】

【CSS】文章に「インデント」を付ける方法とは?!【学習メモ】

インデント … 「字下げ」のこと

〇基本的なインデント

p { text-indent: 1em; }

「1em」というのは、「1文字分」のインデントのこと。

〇2行目以降のみインデント

p {padding-left:1em;text-indent:-1em;}

「padding-left」左側に1文字分の余白を作る。

「text-indent」を「-1em」として、最初の行だけ余

もっとみる
【CSS】ヘッダーで大活躍!「aリンク」を広げる方法とは?!【学習メモ】

【CSS】ヘッダーで大活躍!「aリンク」を広げる方法とは?!【学習メモ】

HTML

よくある「リスト」のコードです。

<body> <ul> <!-- ここにaリンクがあります --> <li><a href="hogehoge">1</a></li> <li><a href="hogehoge">2</a></li> </ul></body>

CSS

「aリンク」に対して、「display: block;」を指定してあげると、親要素(今回の場合は<li>

もっとみる
【HTML】ボックスの「表示」「非表示」を指定する!「visibility」プロパティとは?【学習メモ】

【HTML】ボックスの「表示」「非表示」を指定する!「visibility」プロパティとは?【学習メモ】

「visibility」プロパティ
要素の「表示」「非表示」を指定することができるもの。

例えば、「hover」時のみ表示したいものがあるときなどに、使うと便利。

値は3種類。

・visible … 表示

visibility: visible;

・hidden … 非表示

visibility: hidden;

・collapse … テーブル、表の「行」や「列」にこの値を指定する

もっとみる
【CSS】「ブロック要素」と「インライン要素」の違いとは?【学習メモ】

【CSS】「ブロック要素」と「インライン要素」の違いとは?【学習メモ】

・ブロック要素

開始タグと終了タグで囲った部分が、1つの「ブロック」(かたまり)になる。
要素の中身が少なくても、横幅いっぱいに表示されるため、「縦ならび」。

ex) <div>, <p>, <ul>, <li>, <h1>~<h6>, <header>, <footer>...

↓こんな感じ

<h1>ブロック要素のならび方だよ</h1><div style='width:100px; h

もっとみる