20200729のCSSに関する記事は3件です。

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>

結果こんな感じになります。

qiita.png

officeのワードみたいな感じですね。
ちなみにCSSは以下の通りです。

<style>
    p {
        color: blue
    }
    h1 {
        background-color: red;
    }
</style>

qiita2.png

初学者的にはHTML、CSSはワードでいい気がします。
HTML、CSSがどんなものかというのがこれでなんとなくわかったと思います。

次回はもう少し詳しく入っていこうと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

初心者によるプログラミング学習ログ 385日目

100日チャレンジの385日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
385日目は、

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【初心者でもわかる】cssで使ってはいけないclass名、使わない方がいいclass名

どうも、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!です。

おそまつ!

(コメント・質問・ソースの指摘等なんでもウェルカムです!初心者の方でも気軽に質問ください!)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む