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でのアリファチャネルの事例紹介（色に透明度を表現する場合）
記載方法：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ページは、急速に発展した。
・CSSの記述方法
外部参照：HTMLの<head>タグ内に<link>タグを記述し*.cssファイルを読み込む記述方法。一般的。
内部再衣装：HTML内に<style>タグを記述する方法。（非推奨）
インライン：HTMLタグ内にスタイルを記述する方法。（非推奨）
マージンの簡略化
例margin 10px 20px 30px 40px;→上10px、右20px、下30px、左40px。時計回りに指定
margin 10px 20px 30px;→上は10px、左右は20px、下は30px。
margin 10px 20px;→上下10px、左右20px。
paddingの場合も簡略化の記述方法はmarginと同じ。
マージンの相殺：Ａ要素とＢ要素がありＡ要素の下にbotomマージンが100pxありB要素のトップマージンに50PXある場合ＡとＢを結合してもマージンは150ｐｘとならないことをマージンの相殺という。
左右のマージンは相殺されない。
パディング・ボーだについては、上下左右すべて相殺されない。
borderの記述の例
border : 10px soile #ff0000;→10pxは線の太さ、soileは線の種類、色指定の例。
参考
・アイコン：
Bootstrap
コメント
コメントを投稿
貴重なご意見ありがとうございます。お客様から頂いたコメントは、紳士に受止め、今後の本ブログの運用に参考とさせてもらいます。