HTML/CSS（Part2）

＜参考：HTML・CSSのコード紹介（Part2）です。＞

・文字のグラデーション及び左→右表示動作させる場合

[HTML]

下図の赤枠追記。

[CSS]

・文字に黄色の塗りつぶしがある左→右にスクロールさせたい場合。

[HTML]

下図赤枠追記。

[CSS]

・塗りつぶしにグラデーションや疎クロールなどの動きを加えないならば。下記のように

HTML文のみで対応かのうです。

下記のオレンジ色をHTML文の該当文字が含まれている個所にstyleプロパティを追記すればよい。

例）●間食</p><b><p style="background-color: yellow; display: inline-block; text-align: left;">塗りつぶし対象の文字の記載。</p></b>

・HTMLのブロックについて

　ブロックレベル：<p>タグや<h1>タグのように横全体の幅をとる。

　インラインレベル：画像、リンク、アンカータグのように自分の幅しかとらない。

・HTMLで作成したボタンの、角を丸くする場合（本サイトで利用：非推奨ですがこんな記載方法もあろとのことで事例を紹介します。）

[HTML]

<button style="border-radius:10px;" ><a href="https://goshin-it.blogspot.com/2023/08/blog-post.html

">はじめに</a></button>

この色の部分は、CSSコードを埋め込んだ部分

・CSSでの色表現（RGB）の説明

例）RGB(255,0,0)

数字の左から：赤色、緑色、青色となりこれは色の③現職です。

数字は0～255で表現され

0は、赤色が含まれない、255は赤色を最大限に含むことを表す。

RGB(0,0,0)→黒色、RGB(255,255,255)→白色。

・CSSでのアリファチャネルの事例紹介（色に透明度を表現する場合）

記載方法h：rgba（255,0,0,1）

上記4桁目がアルファシャネル：１～０で表現。１：不透明、０：透明

・メディアクエリの記載でよく間違えるので紹介します。

例）

@media (min-width:600px) and (max-width:800px){

    h1{

        color: palevioletred;

    }

}

ビューの幅が600pxから800PXはh1にスタイル適用する。

min-width:600px：600pxを超えるとスタイル適用。

max-width:800px：800pxまでスタイル適用。

・モバイルビューが横になった場合のスタイルの当て方を紹介します。

例）

プロパティはMDMで探せばいいが面倒なのでノウハウ集としてみ持っていたので記載しました。

@media(orientation: landscape){

    body{

        background-color: magenta;

    }

}

※　MDMからの見つけ方で、すぐ見つける方法があれば教えてください。

・CGI（Common Gateway Intertace）：異なる機器間での通信をやり取りする。Webサーバを動的な処理を行う仕組みで、PerlやC言語で新たにHTMLファイルが作成される。子の仕組みよりWebページは、急速に発展した。

ページトップへ▲