投稿者：Y

ラベル：blogger

公開：2020年8月12日

更新：2020年10月15日

ボックス内に文字を表示する

コード

<div style="

border: solid 2px rgb(0, 0, 0);

border-radius:10px;

box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);

margin: 10px;

padding: 5px;

background-color: #f7f7f7;

font-weight: bold;

ここに文章を書くと、divタグで囲まれた範囲の文章にstyle属性で設定したスタイルが反映されます。border(枠線),box-shadow(ボックスの影),margin(ボックス外側の余白),padding(ボックス内側の余白),background-color(背景色),font-weight(文字の太さ)を指定しています。

</div>

表示

解説

borderプロパティ

枠線の種類を指定

・solid:一本線

・2px:線の太さは2px(ピクセル)

・rgb(0, 0, 0, 0):線の色のred,green.blueは全て0(黒色)

border-radiusプロパティ

枠線の角丸を4隅まとめて指定

・10px:丸みは半径10pxの円

box-shadowプロパティ

ボックスに影を指定

・0 3px 4px:水平方向には動かさない垂直方向(下)3px移動ぼかし距離は5px

・rgba(0, 0, 0, 0.25):色のred,green.blueは全て0,alpha(透明度)は0.25

marginプロパティ

ボックス外側の余白を指定

・10px: 余白は10px

paddingプロパティ

ボックス内側の余白を指定

・5px: 余白は5px

background-colorプロパティ

背景色を指定

・#f7f7f7:背景色は薄いグレー色

font-weightプロパティ

文字の太さを指定

・bold:文字は太字

ボックス内に引用文を表示する

コード

<blockquote style="

border: solid 2px rgb(0, 0, 0);

border-radius:10px;

box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);

margin: 10px;

padding: 5px;

background-color: #f7f7f7;

『これは引用されたテキストの例文です。』

</blockquote>

表示

『これは引用されたテキストの例文です。』

解説

blockquoteタグ

・テキストを引用

・cite属性で引用元のURLを記述

ブログカードを作る

コード

<a href="https://503597.blogspot.com/2020/08/6-table.html" target="_blank">[tableタグ]BloggerブログにHTMLで表を作成する</a>

</div>

表示

[tableタグ]BloggerブログにHTMLで表を作成する

解説

imgタグ

画像を表示する

・src属性で「https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNIxRvAEU_h5iZgCZf1FZOZBHTeBGQM0yMDrpyw2eMYpeffQ0-g-Dn9GaVUl3hRlcFuU9d2uU6TB-o4DD1_v40VUhDB1vtUO6QPWc8nJQ4vcIsfTANFp1YorBl4cBZvwcMy-XikOciAiU/s908/table.PNG」を指定

aタグ

リンクをする

・href属性で「https://503597.blogspot.com/2020/08/6-table.html」を指定

・target属性で新しいタブでリンクを開くように指定

Bloggerブログ

メニュー

[style属性] BloggerブログにCSS:Cascading Style Sheetsで装飾をする