HTML内にCSSを書き込む(Writing CSS in HTML)

このサイトはamebaowndで作成しています。

HTML/CSSカスタムができるところも良きです。

ネットで検索すれば、HTML/CSSコピペで実装できるコードが充実しています。

（プログラムではない＆コピペ前提の記事たちは、著作権気にせずOK）

ただ参考書にはHTML/CSSの両方書いてあるけど、自分のサイト管理画面には「コード」としか書いてない…どう書けばいいのやら。

コーディング未経験だけどサイトちょっとさわりたい方へ、HTML内でのCSS記述を記録します。

<style>
・・・
</style>

・・・にCSSを書き、そのあとHTML部分を書く。

これで実装できます。

amebaowndの管理画面

1. 「HTML」を押す
2. ブロック配置
3. コード記入←ココにHTML/CSS

HTMLが身体とすれば、CSSは洋服です。

形(ex:padding/margin/width)や色(color)、触れたときの挙動(hover)など、防御かけとくか毒避けつけるか、的なといったことを指定できます。

もちろん体に直書き(style属性)こともできますが、長かったり共有するときは場所を書き分けたほうが見やすいです。

以下コード（DATAidm8トップにある「依頼」ボタンの場合）

*HTMLのアンダーライン部分は、リンク先がメール起動＆件名入力コマンドになっています。

<style>
a.btn {
display: block;
text-align: center;
vertical-align: middle;

text-decoration: none;

width: 120px;

padding: 1rem 4rem;

margin: auto;

border: 2px solid #00a497;

color: #00a497;

border-radius: 100vh;

transition: 0.5s;

font-weight: bold;

}

a.btn:hover {

color: #fff;

background: #00a497;

}

</style>

<a href="mailto:dataidm8@gmail.com?subject=【contact】" class="btn">依頼/contact</a>

********

This site is creating in "amebaownd".

It can for HTML/CSS customisation.

If you search on the internet, you can find a lot of code that can be implemented by copying and pasting HTML/CSS.

(Articles that are not programs & are supposed to be copied and pasted are OK without worrying about copyright).

But the reference book says both HTML/CSS, but this site management screen only says 'code'... How to write it?

For those who have no coding experience but want to touch the site a little, I record the CSS description within the HTML.

<style>
・・・
</style>

... to write the CSS and then the HTML part.

You can now implement it.

The administration screen of amebaownd

1. Press 'HTML'.
2. Block placement
3. Enter code ←HTML/CSS here

If HTML is the body, CSS is the clothes.

You can specify things like shape (e.g. padding/margin/width), colour (colour), behaviour on touch (hover).

Of course, you can also write directly on the body (style attribute), but if it is long or shared, it is easier to see if you write in different places.

↑ Please see the above section for code (For the 'Request' button at the top of the DATAidm8)

*The underlined part of the HTML is the link to the Email Activation & Subject Entry command.