プログラミング Tomoyuki

Progate（プロゲート）でHTML&CSSの学習メモ



 

こんにちは。Tomoyuki（@tomoyuki65）です。

2019年からまたプログラミングにも力を入れようと決めたので、Progate（プロゲート）でRubyプログラミングやってみた！で書いた通り、Progateという学習サイトで勉強しています。

その中で、HTMLとCSSの部分において、忘れがちだけど覚えておきたいことを、この記事に記録として残していきます。

 

目次

Webサイトの基本的な全体レイアウト

 

コードで書いた場合

<body>
  <!-- ヘッダー -->
  <header>
  </header>

  <!-- メイン -->
  <div class="main">
  </div>

  <!-- フッター -->
  <footer>
  </footer>
</body>

ヘッダーとフッターのみよく使われるため、専用のタグがある。

 

ブロック要素は改行される

例えばタグ「div」はブロック要素のため改行されて縦に並ぶが、タグ「a」はブロック要素ではないので改行されない。

 

ブロック要素を横並びにするには？

ブロック要素を横並びにするには、CSSで「float」プロパティを設定する。

例えば、「float: left;」

 

リストのマークを非表示にする方法

通常、リストでは以下のように左にマークが表示される。

  •  例１
  •  例２

 

リストのマークを非表示にするには、CSSで「list-style: none;」を設定する。

 

ブロック要素、インラインブロック要素、インライン要素の違い

 

文字の下に線を引く方法

文字の下に線を引くには、CSSで「border」プロパティを設定する。

例えば、「border: 太さ　種類　色;」→「border: 1px solid red;」

 

ボックスモデル

 

複数のセレクタに同じCSSを設定する方法

h1, p {
  color: red;
}

 

背景画像を設定する方法

背景画像を設定するには、CSSで「background-image」プロパティを設定する。

例えば、「background-image: url(画像のURL);」

背景画像を設定すると横幅が足りないと同じ画像を繰り返し表示するが、一枚の画像で表示範囲を埋めたい場合、さらに「background-size: cover;」プロパティを設定する。

 

要素を中央配置する方法

要素を中央配置したい場合、CSSで「margin: 0 auto;」プロパティを設定する。

 

要素を透過させる方法

要素を透過させるには、CSSで「opacity」プロパティを設定する。

例えば、「opacity: 透過度;」

透過度は「0〜1」の範囲で指定可能。（0が薄い）

 

背景画像だけ透過したい場合

「opacity」は要素全体を透過してしまう。

背景画像だけ透過したい場合、CSSで「background-color」プロパティを設定する。

例えば、「background-color: rgba(1,2,3,0.5);」で、4つめのパラメータが透過度

 

文字の間隔を指定する方法

文字の間隔を指定するには、CSSで「letter-spacing」プロパティを設定する。

例えば、「letter-spacing: 0.5px;」

 

要素の種類を変更する方法

要素の種類にはブロック、インラインブロック、インラインがあるが、要素の種類を変更するには、CSSで「display」プロパティを設定する。

例えば、「display: 種類;」

種類は、「block」、「inline-block」、「inline」で指定する。

 

クラス名は複数指定可能

divタグなどでクラス名を付ける場合があるが、クラス名は半角スペースで区切れば複数指定可能。

例えば「class=”btn blue”」

 

カーソルが乗った時の状態をCSSで設定する方法

カーソルが乗った時の状態をCSSで設定するには、「セレクタ:hover」を使う。

.btn:hover {
 カーソルが乗った時の設定
}

 

要素の角を丸める方法

要素の角を丸めるには、CSSで「border-radius」プロパティを設定する。

例えば、「border-radius: 10px」

 

インライン要素、インラインブロック要素の中央配置

インライン要素などを中央配置するには、CSSで「text-align」プロパティを設定する。

例えば、「text-align: center;」

 

アイコンを使いたい場合

例えばTwitterなどのアイコンを使いたい場合、「Font Awesome」というサイトを利用する。

HTMLの「head」で<link rel=”stylesheet” href=”スタイルシートURL”>を指定し、「Font Awesome」のCSSファイルを読み込む。

その後、「<span class=”fa fa-twitter”></span>」のようにしてアイコンを表示。

 

カーソルを乗せた時にアニメーションを使いたい場合

カーソルを乗せた時にアニメーションを使うには、「transition」プロパティを使う。

例えば、「transition: 変化の対象 変化の時間」→「transition: all 1s;」

この時、hoverと一緒に使うこと。

 

行間の指定など、要素の縦方向に中央配置

行間の指定や、要素を縦方向に中央配置するには、CSSで「line-height」プロパティを設定する。

例えば、「line-height: 15px;」

 

要素のクリック範囲を広げる

例えばaタグでボタンを作った場合はクリック範囲が狭いが、ブロック要素に変更すれば範囲が広がる。

 

文字の太さを設定する

文字の太さを設定するには、CSSで「font-weight」プロパティを設定する。

例えば、「font-weight: normal;」

h1タグなどはデフォルトで「bold」が設定されているため、変更したい場合は「font-weight: normal;」を設定する。

 

親要素内の子要素を均等に横に並べる方法

親要素内の子要素を均等に横に並べるには、「width」プロパティで%を使う。

例えば、「width: 25%;」

 

要素同士を重ねる方法

要素同士を重ねるには、CSSで「position」プロパティを使う。

position: absolute;
top: 1px;
left: 1px;

「position」プロパティでは、基準位置（通常は画面左上）から、レイアウトを指定して重ねることが可能。

基準位置を変える場合は、CSSで「position: relative;」プロパティを使う。

例えば親要素に「position: relative;」を指定し、子要素に「position: absolute;」で位置を指定すれば重ねることが可能。

 

影をつける方法

要素に影をつけるには、CSSで「box-shadow」プロパティを使う。

例えば、「box-shadow: 水平方向 垂直方向 色;」→「box-shadow: 10px 10px red;」

 

カーソルの種類を変更する方法

カーソルの種類を変更するには、CSSで「cursor」プロパティを設定する。

例えば、「cursor: pointer;」

 

クリック時の状態を変化させる方法

ボタンを作る場合など、クリック時の状態を変化させたい場合は、「セレクタ:active」を使う。

例えばボタンを作って凹ませたい場合👇

.btn {
  position: relative
  top: 6px;
  box-shadow: none;
}

 

ヘッダーなど、画面上に要素を固定する方法

画面上に要素を固定するには、CSSで「position: fixed;」プロパティを使う。

例えばヘッダーを固定する場合👇

header {
  position: fixed;
  top: 0;
}

 

要素の重なり順を変更する方法

要素を固定した場合、要素の重なり順に注意が必要。

要素の重なり順を変更するには、「z-index」プロパティを使う。（positionプロパティと併用）

例えば、「z-index: 10」

数値が大きいほど前面に表示される。

 

レスポンシブデザインにするには？

最近はタブレットやスマホの画面サイズに対応するため、レスポンシブデザインは必須。

そんなレスポンシブデザインにするには、CSSでメディアクエリを設定する。

例えば、最大幅が1000px以下の時にCSSを適用するには次の通り。

@media (max-width: 1000px) {

  /* CSSを記述 */

}

メディアクエリの条件は、ブレイクポイントと呼び、スマホは670px以下、タブレットは670px〜1000pxを想定する。

 

レイアウトが崩れないようにするには？

paddingでレイアウト崩れを防ぐため、「box-sizing: border-box;」を設定する。

通常の要素の幅は「width + padding + border」だが、border-boxなら要素の幅はwidthになる。

※marginは含まれないので注意

尚、以下のように、要素全体に設定する。

* {
  box-sizing: border-box;  
}

 

vewportを設定する

タブレットやスマホでメディアクエリを有効にするには、<head>タグ内にvewportの設定が必要。ただし、暗記は不要。

例「<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>」

 

レスポンシブデザイン用のCSSは分ける

レスポンシブデザイン用のCSS「responsive.css」とし、通常のCSSとは分けて記述する。

レスポンシブデザイン用のCSS「responsive.css」をHTMLで読み込む際には、vewportより後に記述すること。

 

floatと親要素の高さ

通常は親要素の高さは子要素を含む高さになるが、子要素が全てfloatの時に親要素の高さが0になる性質があるのに注意。

その場合、子要素の最後に空のタグ<div class=”clear”></div>を作り、CSSで「clear: left;」でfloatを解除するのがよく使うテクニック。

 

画面サイズが大きい場合は？

CSSで「max-width」プロパティを設定し、画面幅の上限を指定する。

例としては以下の通り。

.contaner {
  max-width: 1170px;
  width: 100% /* その上限内で幅を最大にする */
}

 

スマホの場合のヘッダーメニュー

スマホの場合、ヘッダーメニューが表示しきれないため、アイコン「三のようなやつ」に変更する。

通常ではアイコンを非表示「display: none;」に設定しておき、スマホの場合だけ表示「display: block;」させる。（スマホの場合はヘッダーメニューを非表示にするのを忘れずに）

尚、メニューアイコンはHTMLで「<span class=”fa fa-bars menu-icon”></span>」を設定し、CSSでレイアウトを整える。

 

最後に

プログラミングは暗記する必要はありませんが、引き出しを増やす必要はあります。

例えば、「そういえばこのやり方前に勉強したな・・」と思った時に、どこを調べればその情報が載っているかを知っていることが大事です。

この記事も、そんな使い方をする時に参考になれば幸いです。

 

合わせて読みたい👇

プログラミングスクールおすすめは？比較一覧まとめ

2019年4月28日

IT・Webエンジニア転職サイト・エージェントおすすめ比較一覧まとめ

2019年4月29日

 

The following two tabs change content below.
Twitter のプロフィールMy YouTube channel

Tomoyuki

SEを5年経験後、全くの未経験ながら思い切ってブロガーに転身し、月間13万PVを達成。その後コロナの影響も受け、以前から興味があったWeb系エンジニアへのキャリアチェンジを決意。現在はWeb系エンジニアとして働きながら、プロゲーマーとしても活躍できるように活動中。








シェアはこちらから


【2024年】おすすめのゲーミングPC

モンハンワイルズの発売日とPC版（Steam版）の推薦スペックが公開されたので、おすすめのゲーミングPCをご紹介！

>> ゲーミングPCの詳細はこちら

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

RECOMMENDこちらの記事も人気です。