2019年7月の記事一覧
【CSS】文章に「インデント」を付ける方法とは？！【学習メモ】
インデント … 「字下げ」のこと
〇基本的なインデント
p { text-indent: 1em; }
「1em」というのは、「1文字分」のインデントのこと。
〇2行目以降のみインデント
p {padding-left:1em;text-indent:-1em;}
「padding-left」左側に1文字分の余白を作る。
「text-indent」を「-1em」として、最初の行だけ余
【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】「親要素」と「子要素」の違いって何？【学習メモ】
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <h1>sample</h1> <ul> <li>sample</li> <li>sample</li> <li>sample</li> </ul> <p> <a href="hogehoge"
もっとみる
【HTML】ボックスの「表示」「非表示」を指定する！「visibility」プロパティとは？【学習メモ】
「visibility」プロパティ
要素の「表示」「非表示」を指定することができるもの。
例えば、「hover」時のみ表示したいものがあるときなどに、使うと便利。
値は3種類。
・visible … 表示
visibility: visible;
・hidden … 非表示
visibility: hidden;
・collapse … テーブル、表の「行」や「列」にこの値を指定する
【CSS】「ブロック要素」と「インライン要素」の違いとは？【学習メモ】
・ブロック要素
開始タグと終了タグで囲った部分が、1つの「ブロック」(かたまり)になる。
要素の中身が少なくても、横幅いっぱいに表示されるため、「縦ならび」。
ex) <div>, <p>, <ul>, <li>, <h1>~<h6>, <header>, <footer>...
↓こんな感じ
<h1>ブロック要素のならび方だよ</h1><div style='width:100px; h
【CSS】ホームページの単位！「px」と「em」の違いとは？【学習メモ】
・px (ピクセル)
画面上にある「点」を使用した単位 (1px=1ドット)
絶対単位 (環境によって変化しない。)
・em (エム)
文字の高さを基準とした単位。
ex) font-sizeが「10px」の場合、(1em=10px)
※font-sizeを「指定していない」または「100％に指定」している場合、デフォルト値は(1em=16px)
相対単位 (環境によって変化する。)
【HTML】✉クリックすると、「メール」を起動させる方法とは？！【学習メモ】
今回はこんな感じのを作っていきたいと思います！
このアイコンをクリックすると…。
メールが起動します！
「宛先」に指定したメールアドレスが、きちんと記載されています！
ソースコード
<!DOCTYPE html><html lang="ja"><head> <meta charset="utf-8"> <link rel="stylesheet" href="https://use.fo
【CSS】「疑似要素」をつかって文頭に「〇」を付けてみる！【学習メモ】
・疑似要素とは？
CSS の 疑似要素 Pseudo-elements はセレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。 例えば ::first-line 疑似要素は、段落の最初の行のフォントを変更するために使用することができます。(MDN)
今回は「疑似要素」を「〇」として、コーディングしていきます！
・ソースコード
※<style>
【HTML】ページ内リンク「アンカーリンク」の作り方【学習メモ】
・ジャンプボタン
<a href ="#home">HOME</a>
・ジャンプ先
<h2 id="home">HOME</h2>
おすすめ記事