【超初心者向け】HTML、CSSの覚え書き

HTML & CSS

ブログやWeb制作をWordpressから入ったけどCSSとかHTMLとかちょっと苦手、昔はHTMLちょっとかじったけどあまりよくわからないままWordppress触ってる、そんな私みたいな方や自分のための覚書です。いちいち検索して調べるのが面倒なので、同じレベルの方の助けになれば幸いです。

コメントアウトの方法

要はコード書いてるけど表示させない、機能させないようにするためのもの

HTMLだと

<!--  この間は表示されない。改行も可能だがハイフンは使わない方が良いらしい -->

CSSだと

/* 
複数行でも1行でも問題ない
改行も可能ってこと
*/

phpだと

これが最初ちとハマりました。複数行は「中身だけ」をコメントにする必要があります。1行なら簡単です。

1行のみ
// これでコメントになる

複数行は中身だけ
<?php
/*
echo "Hello World!";
*/
?>

半透明にするけど文字色はそのまま

opacity使うと全部半透明になってしまうけど、rgba使えば背景色に半透明化を指示することになるので、文字色はそのままになるという訳。

これはopacityで半透明化

HTML
<p class="hoge1">これはopacityで半透明化</p>
CSS
.hoge1 {
background-color: black;
opacity: 0.6; 
}

これはrgbaで半透明化

HTML
<p class="hoge2">これはrgbaで半透明化</p>
CSS
.hoge2 {
background-color: rgba(0, 0, 0, 0.5);
color: black;
}

てな感じでやれば上手くいきますね。rgbaの方は半透明化させた後に文字色の指示をしているので、後から読み込まれた方が優先されて文字がちゃんと出力されているという事ですね。

背景画像の上にこんな感じでテキストが乗せるにはこの手法を覚えておくと役に立ちます。

おわりに

この記事は気づいたことや必要なことが出てくるたびに追記を重ねるための記事です。同じ悩みで詰まった人の助けになれば幸いです。

タイトルとURLをコピーしました