マガジンのカバー画像

学習メモ

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

2019年7月の記事一覧

【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

もっとみる
【Web】「URL」と「ドメイン」の違いって何?!【学習メモ】

【Web】「URL」と「ドメイン」の違いって何?!【学習メモ】

・URL

「IPアドレス」を人間が読みやすいように変換した、「Web上の住所」。
「スキーム」「ドメイン」「パス」で構成される文字列のこと。

・ドメイン

1つのWebサイトにつき、必ず1つ割り当てられている。
他のWebサイトと名前が被ることは絶対にない。

・スキーム

Webサーバーと通信する手段を指定するもの。

・パス

ドメインの中から表示したいページを特定するための情報。

※も

もっとみる
【CSS】ホームページの単位!「px」と「em」の違いとは?【学習メモ】

【CSS】ホームページの単位!「px」と「em」の違いとは?【学習メモ】

・px (ピクセル)

画面上にある「点」を使用した単位 (1px=1ドット)

絶対単位 (環境によって変化しない。)

・em (エム)

文字の高さを基準とした単位。
ex) font-sizeが「10px」の場合、(1em=10px)
※font-sizeを「指定していない」または「100%に指定」している場合、デフォルト値は(1em=16px)

相対単位 (環境によって変化する。)

もっとみる
【HTML】✉クリックすると、「メール」を起動させる方法とは?!【学習メモ】

【HTML】✉クリックすると、「メール」を起動させる方法とは?!【学習メモ】

今回はこんな感じのを作っていきたいと思います!

このアイコンをクリックすると…。

メールが起動します!

「宛先」に指定したメールアドレスが、きちんと記載されています!

ソースコード

<!DOCTYPE html><html lang="ja"><head> <meta charset="utf-8"> <link rel="stylesheet" href="https://use.fo

もっとみる
【CSS】「疑似要素」をつかって文頭に「〇」を付けてみる!【学習メモ】

【CSS】「疑似要素」をつかって文頭に「〇」を付けてみる!【学習メモ】

・疑似要素とは?

CSS の 疑似要素 Pseudo-elements はセレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。 例えば ::first-line 疑似要素は、段落の最初の行のフォントを変更するために使用することができます。(MDN)

今回は「疑似要素」を「〇」として、コーディングしていきます!

・ソースコード

※<style>

もっとみる