マガジンのカバー画像

HTML,CSSの基礎

11
Progateをやった後に「もう一度復習したい」と思ったら見てください。サンプルコードを紹介しています。
運営しているクリエイター

記事一覧

【HTML,CSSの基礎】⑪imgとbackground-imageの違い

【HTML,CSSの基礎】⑪imgとbackground-imageの違い


プログラミングを挫折しないコツは楽しむことです。

この記事では「楽しく学べるWeb制作の基礎学習」をやっていきます。「Progateの復習」に見てみて下さい。

imgとbackground-imageの違いについて結論

情報として意味のある画像はimgタグ

装飾としての画像ならbackground-image

詳しく

画像がそのウェブサイトにとって必要なものならimgタグ

見た目を

もっとみる
【HTML,CSSの基礎】⑩アイコンを表示する「Font-Awesome 」

【HTML,CSSの基礎】⑩アイコンを表示する「Font-Awesome 」

こんにちは、Mac大好きです!Macが大好きで、HTML、CSS、JavaScript、Pythonなどでプログラミングをして遊んでいます。


プログラミングで挫折しないためには楽しんでやることです!

そこで今日は、駆け出しエンジニアの方向け「楽しく学べるWeb制作の基礎学習」をやっていきます。「Progateの復習」に見てみて下さい。

アイコンを表示するFont-Awesome
Webサイ

もっとみる
【HTML,CSSの基礎】⑨フッターにコピーライトマーク(著作権マーク) を表示する

【HTML,CSSの基礎】⑨フッターにコピーライトマーク(著作権マーク) を表示する

こんにちはMac大好きです!

プログラミングを挫折しないコツは楽しんでやること!

今日は、駆け出しエンジニアの方向け「楽しく学べるWeb制作の基礎学習」をやっていきます。「Progateの復習」に見てみて下さい。

フッターにコピーライトマークを表示する

Webサイトのフッター(下部)にコピーライト(著作権)マークが表示されているのを見かけることがあると思います。「C」を○で囲んだマークです

もっとみる
【HTML,CSSの基礎】⑧文字を縦方向に中央揃えする方法

【HTML,CSSの基礎】⑧文字を縦方向に中央揃えする方法

こんにちは、Mac大好きです!Macが大好きで、HTML、CSS、JavaScript、Pythonなどでプログラミングをして遊んでいます。

プログラミングは楽しんでやることが大切です!

そこで今日は、駆け出しエンジニアの方向け「楽しく学べるWeb制作の基礎学習」をやっていきます。「Progateの復習」に見てみて下さい。

文字を縦方向の中央に揃える方法文字を縦方向の中央に揃えるには、要素の

もっとみる
【HTML,CSSの基礎】⑦マウスカーソルが乗ったときにボタンの色を変える

【HTML,CSSの基礎】⑦マウスカーソルが乗ったときにボタンの色を変える

こんにちは、Mac大好きです!Macが大好きで、HTML、CSS、JavaScript、Pythonなどでプログラミングをして遊んでいます。

プログラミングは楽しんでやることが大切です!

そこで今日は、駆け出しエンジニアの方向け「楽しく学べるWeb制作の基礎学習」をやっていきます。「Progateの復習」に見てみて下さい。


今日は「マウスカーソルがのった時にボタンの色を変える」をやっていき

もっとみる
【HTML,CSSの基礎】⑥要素のサイズを文字のサイズと同じにする方法

【HTML,CSSの基礎】⑥要素のサイズを文字のサイズと同じにする方法

こんにちは、Mac大好きです!Macが大好きで、HTML、CSS、JavaScript、Pythonなどでプログラミングをして遊んでいます。

プログラミングは楽しんでやることが大切です!

そこで今日は、駆け出しエンジニアの方向け「楽しく学べるWeb制作の基礎学習」をやっていきます。「Progateの復習」に見てみて下さい。

要素(pタグ)の幅を文字と同じサイズに変える通常、p要素やdiv要素

もっとみる
【HTML,CSSの基礎】⑤nav(ナビ)メニューの作り方

【HTML,CSSの基礎】⑤nav(ナビ)メニューの作り方

こんにちは、Mac大好きです!Macが大好きで、HTML、CSS、JavaScript、Pythonなどでプログラミングをして遊んでいます。

今日は、駆け出しエンジニアの方向け「Web制作の基礎学習」をやっていきます。「Progateの復習」に見てみて下さい。

ナビゲーションメニュー(nav)の作り方「ナビゲーションメニューの作り方」を解説します。

まずは概要から。

・ナビゲーションメニュ

もっとみる
【HTML,CSSの基礎】④リンクを別のタブで開く命令

【HTML,CSSの基礎】④リンクを別のタブで開く命令

こんにちは、Mac大好きです!Macが大好きで、HTML、CSS、JavaScript、Pythonなどでプログラミングをして遊んでいます。


プログラミングは楽しんでやりましょう!楽しんでやらないと挫折につながるからです。「役に立ちそう」「お金が稼げそう」と思ってはじめると、そのうち楽しいという感情を忘れてしまいます。そのうち飽きてしまって挫折してしまうのです。

そこで今日は、駆け出しエンジ

もっとみる
【HTML,CSSの基礎】③ボタンの角を丸くする

【HTML,CSSの基礎】③ボタンの角を丸くする

こんにちは、Mac大好きです!Macが大好きで、HTML、CSS、JavaScript、Pythonなどでプログラミングをして遊んでいます。

今日は、駆け出しエンジニアの方向け「Web制作の基礎学習」をやっていきます。「Progateの復習」に見てみて下さい。

ボタン(button)の角を丸くする方法Webでよく使うボタン(button)。そんなボタンの角を丸くするスタイリングをやっていきまし

もっとみる
【HTML,CSS基礎】②画像の中央に文字をのせる

【HTML,CSS基礎】②画像の中央に文字をのせる

こんにちは、Mac大好きです!Macが大好きで、HTML、CSS、JavaScript、Pythonなどでプログラミングをして遊んでいます。

今日は、駆け出しエンジニアの方向け「Web制作の基礎学習」をやっていきます。「Progateの復習」に見てみて下さい。

画像の中央に文字をのせるHTML・画像と文字をひとつのdivタグで囲み、classをつけておく。

CSS・全体のサイズ(divのサイ

もっとみる
【HTML,CSSの基礎】①一部分だけ文字色を変える

【HTML,CSSの基礎】①一部分だけ文字色を変える

こんにちは、Mac大好きです!Macが大好きで、HTML、CSS、JavaScript、Pythonなどでプログラミングをして遊んでいます。

駆け出しエンジニアの方向け「Web制作の基礎」をご紹介します。「Progateの復習」に読んでみて下さい。

一部分だけ文字の色を変える「一部分だけ文字の色を変える」をやってみましょう!

HTML・色を変えたい部分を「span」タグで囲みます。

CSS

もっとみる