プログラミングスクールを卒業し、学んだことの復習も兼ねて、HTML、CSSについて書いておこうと思います。 HTML：Hyper Text Markup Language（マークアップ言語） CSS：Cascading Style Sheets（スタイルシート言語） markupとは印をつけるという意味で、その印とはHTMLのタグですね。 つまり印をつけて、ここは何々だと宣言する言語なんですね。 なおタグとは"<>"のこと? cascadeとは「階段状の滝のような」「連鎖的に伝わる」という意味らしく、つまりstyle（装飾） sheetを上から下へ文書に次々と適用させるということみたいです。 HTML、CSSはマークアップ言語と聞いていたのですが、実はCSSはマークアップ言語じゃなかった…? ではまずHTMLから <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTMLの勉強</title> </head> <body> <h1>2020年井上計画</h1> <p>今のところなし</p> <strong>そのうち考える</strong> <footer> <p><a href="https://qiita.com/popo62520908">プライバシーポリシー</a></p> <p><a>1990 lnoueRyo Inc.</a></p> </footer> </body> </html> 結果こんな感じになります。 officeのワードみたいな感じですね。 ちなみにCSSは以下の通りです。 <style> p { color: blue } h1 { background-color: red; } </style> 初学者的にはHTML、CSSはワードでいい気がします。 HTML、CSSがどんなものかというのがこれでなんとなくわかったと思います。 次回はもう少し詳しく入っていこうと思います。
プログラミングスクールを卒業し、学んだことの復習も兼ねて、HTML、CSSについて書いておこうと思います。
HTML：Hyper Text Markup Language（マークアップ言語） CSS：Cascading Style Sheets（スタイルシート言語）
markupとは印をつけるという意味で、その印とはHTMLのタグですね。 つまり印をつけて、ここは何々だと宣言する言語なんですね。 なおタグとは"<>"のこと?
cascadeとは「階段状の滝のような」「連鎖的に伝わる」という意味らしく、つまりstyle（装飾） sheetを上から下へ文書に次々と適用させるということみたいです。
HTML、CSSはマークアップ言語と聞いていたのですが、実はCSSはマークアップ言語じゃなかった…?
ではまずHTMLから
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTMLの勉強</title> </head> <body> <h1>2020年井上計画</h1> <p>今のところなし</p> <strong>そのうち考える</strong> <footer> <p><a href="https://qiita.com/popo62520908">プライバシーポリシー</a></p> <p><a>1990 lnoueRyo Inc.</a></p> </footer> </body> </html>
結果こんな感じになります。
officeのワードみたいな感じですね。 ちなみにCSSは以下の通りです。
<style> p { color: blue } h1 { background-color: red; } </style>
初学者的にはHTML、CSSはワードでいい気がします。 HTML、CSSがどんなものかというのがこれでなんとなくわかったと思います。
次回はもう少し詳しく入っていこうと思います。
100日チャレンジの385日目 twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。 すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 385日目は、 おはようございます昨日の作業⇩●就寝前筋トレ5分、キンドル読書 10分●ブログ1記事作成●プログラミング学習385日目 2h・メンターの課題#駆け出しエンジニアとつながりたい#100DaysOfCode#早起きチャレンジ— ぱぺまぺ@社畜✕投資✕ブロガー (@ppmp65) July 28, 2020
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。 すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 385日目は、
おはようございます昨日の作業⇩●就寝前筋トレ5分、キンドル読書 10分●ブログ1記事作成●プログラミング学習385日目 2h・メンターの課題#駆け出しエンジニアとつながりたい#100DaysOfCode#早起きチャレンジ— ぱぺまぺ@社畜✕投資✕ブロガー (@ppmp65) July 28, 2020
おはようございます昨日の作業⇩●就寝前筋トレ5分、キンドル読書 10分●ブログ1記事作成●プログラミング学習385日目 2h・メンターの課題#駆け出しエンジニアとつながりたい#100DaysOfCode#早起きチャレンジ
どうも、7noteです。今回はcssで使ってはいけないclass名、使わない方がいいclass名について。 ホームページ制作でclassは多くの場面で使用しますが、使えなかったり、使うのをやめておいた方がいいclass名があります。誰かに教えてもらわないとなかなか知らないこともあるのでわかりやすくまとめてみました。 使ってはいけないclass名 1.[アルファベット文字][数字][ハイフン（-）][アンダースコア（_）]以外の文字はダメ 正確にはこのように定義されています。 文字[a-zA-Z0-9]およびISO 10646のU+0080以上の文字、さらにハイフン（-）およびアンダースコア（_）のみ使える。 なので、これらの文字以外はclass名で使用することはできません。アルファベットか数字かハイフン(-)かアンダースコア(_)以外は使わないようにしましょう。使う時はこの4種類だけで「class="abc_01"」みたいなclassをつけるようにしましょう。 2.頭文字に、『数字[0-9]、2つのハイフン[--]、ハイフンの直後の数字(-[0-9])』はダメ 例を書くとこんな感じになります。 使ってはいけないclass名.html <!-- 使ってはいけないclass名の例 --> <p class="1point">ワンポイントアドバイス</p> <!-- 頭文字に数字ダメ --> <p class="--ready">準備</p> <!-- 頭文字にハイフン2個ダメ --> <p class="-1go">出発</p> <!-- 頭文字にハイフン&数字ダメ --> 使わない方がいいclass名 ここから先はルールで決まっているわけではないが、避けた方がいいclass名の付け方について紹介していきます。 1.既存の要素名（タグ）やid名と同じclass名は避ける 単純にややこしいから。 2.見た目のままのclass名は避ける（これけっこう大事） 赤文字の箇所に対してストレートにclass="red"とつけてしまうとどうなるか。 「赤文字になっているとこ、赤やめて下線に変えて〜。」 なんてことになったら悲惨です。クラス名も一緒に変えなければならなくなってしまいます。 もちろんredとつけた方がいい場面もありますが、その赤文字の意味が強調させたいという意図であれば、英語の強調という意味のemphasisなどをつける方が綺麗なclass名と言えるでしょう。もしくはもっとわかりやすい英語でpointなどをつけるなど、とにかく見た目通りのclass名はつけないようにしましょう。 class名は意味や構造を考えてつけるようにしましょう！ 3.他の人が見たときに意味が理解しにくいclass名は避ける 上の2.で「emphasis」をつけたほうが・・・とか自分で書いてますが、チームでソースを触る人全員が英単語を理解できているかと言われると怪しいことが多いと思います。基本的に英語でclass名をつけることが多いですが、あまりにも聞き慣れない単語は素直に日本語のclass名をつけてもいいかなと考えています。 4.ハイフン(-)とアンダースコア(_)は統一する 単純にややこしいから。 まとめ class名はBEMなどの付け方などもあるので気になる方は調べてみてください！ まだ経験が浅いとclass名はめっっっっちゃ悩む事多いと思いますが、ある程度慣れてきたらマイルールなどを決めてスラスラとclass名をつけられるようにしておくとGOOD!です。 おそまつ！ （コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）
ホームページ制作でclassは多くの場面で使用しますが、使えなかったり、使うのをやめておいた方がいいclass名があります。誰かに教えてもらわないとなかなか知らないこともあるのでわかりやすくまとめてみました。
正確にはこのように定義されています。
文字[a-zA-Z0-9]およびISO 10646のU+0080以上の文字、さらにハイフン（-）およびアンダースコア（_）のみ使える。
なので、これらの文字以外はclass名で使用することはできません。アルファベットか数字かハイフン(-)かアンダースコア(_)以外は使わないようにしましょう。使う時はこの4種類だけで「class="abc_01"」みたいなclassをつけるようにしましょう。
_
例を書くとこんな感じになります。
<!-- 使ってはいけないclass名の例 --> <p class="1point">ワンポイントアドバイス</p> <!-- 頭文字に数字ダメ --> <p class="--ready">準備</p> <!-- 頭文字にハイフン2個ダメ --> <p class="-1go">出発</p> <!-- 頭文字にハイフン&数字ダメ -->
ここから先はルールで決まっているわけではないが、避けた方がいいclass名の付け方について紹介していきます。
単純にややこしいから。
赤文字の箇所に対してストレートにclass="red"とつけてしまうとどうなるか。
「赤文字になっているとこ、赤やめて下線に変えて〜。」
なんてことになったら悲惨です。クラス名も一緒に変えなければならなくなってしまいます。
もちろんredとつけた方がいい場面もありますが、その赤文字の意味が強調させたいという意図であれば、英語の強調という意味のemphasisなどをつける方が綺麗なclass名と言えるでしょう。もしくはもっとわかりやすい英語でpointなどをつけるなど、とにかく見た目通りのclass名はつけないようにしましょう。 class名は意味や構造を考えてつけるようにしましょう！
上の2.で「emphasis」をつけたほうが・・・とか自分で書いてますが、チームでソースを触る人全員が英単語を理解できているかと言われると怪しいことが多いと思います。基本的に英語でclass名をつけることが多いですが、あまりにも聞き慣れない単語は素直に日本語のclass名をつけてもいいかなと考えています。
class名はBEMなどの付け方などもあるので気になる方は調べてみてください！ まだ経験が浅いとclass名はめっっっっちゃ悩む事多いと思いますが、ある程度慣れてきたらマイルールなどを決めてスラスラとclass名をつけられるようにしておくとGOOD!です。
（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）
