- 運営しているクリエイター
#PC
【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"
もっとみる【CSS】ホームページの単位!「px」と「em」の違いとは?【学習メモ】
・px (ピクセル)
画面上にある「点」を使用した単位 (1px=1ドット)
絶対単位 (環境によって変化しない。)
・em (エム)
文字の高さを基準とした単位。
ex) font-sizeが「10px」の場合、(1em=10px)
※font-sizeを「指定していない」または「100%に指定」している場合、デフォルト値は(1em=16px)
相対単位 (環境によって変化する。)
【HTML】ページ内リンク「アンカーリンク」の作り方【学習メモ】
・ジャンプボタン
<a href ="#home">HOME</a>
・ジャンプ先
<h2 id="home">HOME</h2>
おすすめ記事
【CSS】テキストを「左揃え」のまま「中央寄せ」にする方法【学習メモ】
・html
<div id="about-item"> <p>おさかな / osakana<br> 00年生まれの19歳。<br> 高校生の頃からプログラミングを勉強しはじめ、現在はWeb系の受諾開発企業で「Webコーダー」として働いています。<br> また、「ライター」として「クラウドソーシングサービス」でのお仕事経験もあります。<br> 今後は、個人での「W
【jQuery】ページ内リンクを「スクロール」する方法とは?!【学習メモ】
HTML
<a href ="#HOME">HOME</a>
jQuery(2系、3系)
<script type="text/javascript"> $(function() { $('a[href^="#"]').click(function() { var speed = 400; var href = $(this).attr("href"); var targ
【HTML】「表」の作り方【学習メモ】
<table border="1" width="50%" height="800"> <tr bgcolor="#f5f5f5"> <th>コーディング</th> <th>ライティング</th> </tr> <tr> <td>html</td> <td>html</td> </tr> <tr> <td>html</td> <td>html</td>
もっとみる【CSS】「margin」と「padding」の使い分け【学習メモ】
!ボックス要素の「border」を基準にして、使い分ける。
・「margin」
borderの外側に余白を付けたい場合。
要素と要素の間隔調整、余白に背景を適用したくない場合などに使用する。
マージンの相殺があるので、基本的には「上」以外に付ける。
・「padding」
borderの内側に余白を付けたい場合。
余白に背景が適用される。
「width」「height」の値に含まれないので、
【CSS】「background」と「background-color」の違いとは?「学習メモ」
・疑問点
background: red;background-color: red;
どちらの書き方でも、「red」が反映されるけど、どう区別するのか?
・background
ショートハンドの書き方。
ショートハンドとは、複数のプロパティを一括指定する方法。
ショートハンドの方が、コード行数を少なくできるので通信量が減り、速度が早くなる。
・background-color
「ba
【HTML】<link rel="canonical">「カノニカル」について【学習メモ】
”canonical”(カノニカル)とは?
rel=“canonical”とは、ページ内容が類似もしくは重複しているURLが複数存在する場合に、検索エンジンからのページ評価が分散されないよう、正規のURLがどれなのかを検索エンジンに示すために用いる記述です。 [SEO HACKS]
例)
サイト1↓
http://www.example.com/osakana/
サイト2↓
http: