マガジンのカバー画像

学習メモ

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

#PC

【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>

もっとみる
【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)

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

もっとみる
【CSS】テキストを「左揃え」のまま「中央寄せ」にする方法【学習メモ】

【CSS】テキストを「左揃え」のまま「中央寄せ」にする方法【学習メモ】



・html

<div id="about-item"> <p>おさかな / osakana<br> 00年生まれの19歳。<br> 高校生の頃からプログラミングを勉強しはじめ、現在はWeb系の受諾開発企業で「Webコーダー」として働いています。<br> また、「ライター」として「クラウドソーシングサービス」でのお仕事経験もあります。<br> 今後は、個人での「W

もっとみる
【HTML】「表」の作り方【学習メモ】

【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」の使い分け【学習メモ】

【CSS】「margin」と「padding」の使い分け【学習メモ】

!ボックス要素の「border」を基準にして、使い分ける。

・「margin」

borderの外側に余白を付けたい場合。
要素と要素の間隔調整、余白に背景を適用したくない場合などに使用する。
マージンの相殺があるので、基本的には「上」以外に付ける。

・「padding」

borderの内側に余白を付けたい場合。
余白に背景が適用される。
「width」「height」の値に含まれないので、

もっとみる
【CSS】「background」と「background-color」の違いとは?「学習メモ」

【CSS】「background」と「background-color」の違いとは?「学習メモ」

・疑問点

background: red;background-color: red;

どちらの書き方でも、「red」が反映されるけど、どう区別するのか?

・background
ショートハンドの書き方。

ショートハンドとは、複数のプロパティを一括指定する方法。

ショートハンドの方が、コード行数を少なくできるので通信量が減り、速度が早くなる。

・background-color
「ba

もっとみる
【HTML】<link rel="canonical">「カノニカル」について【学習メモ】

【HTML】<link rel="canonical">「カノニカル」について【学習メモ】

”canonical”(カノニカル)とは?

rel=“canonical”とは、ページ内容が類似もしくは重複しているURLが複数存在する場合に、検索エンジンからのページ評価が分散されないよう、正規のURLがどれなのかを検索エンジンに示すために用いる記述です。 [SEO HACKS]

例)

サイト1↓

http://www.example.com/osakana/

サイト2↓

http:

もっとみる
【CSS】<transition>で「ふわっと」色を変える方法…!【学習メモ】

【CSS】<transition>で「ふわっと」色を変える方法…!【学習メモ】

transition: all 0.3s ease;  

上記は複数のプロパティをまとめたもの。

個別に書くと、下記のようになる。

transition-property: background;transition-duration: 0.3s;transition-timing-function: ease;

・all

全てのプロパティに対して。

・0

もっとみる