サイト作成者

サイト作成者

I am a very extravagant man.

HTML/Markdown のStyle sheet reference になります。

コメントBox28(#DF8914;)

ここにタイトル

ここに文章

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<div class="box28">
    <span class="box-title">ここにタイトル</span>
    <p>ここに文章</p>
</div>

<style>
.box28 {
    position: relative;
    margin: 2em 0;
    padding: 25px 10px 7px;
    border: solid 3px #DF8914;
}
.box28 .box-title {
    position: absolute;
    display: inline-block;
    top: -2px;
    left: -2px;
    padding: 0 9px;
    height: 35px;
    line-height: 35px;
    font-size: 20px;
    background: #DF8914;
    color: #ffffff;
    font-weight: bold;
}
.box28 p {
    margin: 0; 
    padding: 1em;
}
</style>

コメントBox33(#0092ca;)

ここにタイトル

ここに文章

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<div class="box33">
    <span class="box-title">ここにタイトル</span>
    <p>ここに文章</p>
</div>

<style>
.box33 {
    position: relative;
    margin: 2em 0;
    padding: 15px 10px 7px;
    border: solid 2px #0092ca;
    border-radius: 6px;
}
.box33 .box-title {
    position: absolute;
    display: inline-block;
    top:  -15px;
    left:  15px;
    padding: 0 9px;
    height: 35px;
    line-height: 35px;
    font-size: 20px;
    background: #0092ca;
    color: #ffffff;
    font-weight: bold;
    border-radius: 6px;
}
.box33 p {
    margin: 0; 
    padding: 1em;
}
</style>

Box11(#DF1452;)

ここにタイトル

ここに文章

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<div class="box11">
    <span class="box-title">ここにタイトル</span>
    <p>ここに文章</p>
</div>

<style>
.box11 {
    position: relative;
    margin: 2em 0;
    padding: 25px 10px 7px;
    border: solid 3px #DF1452;
}
.box11 .box-title {
    position: absolute;
    display: inline-block;
    top: -2px;
    left: -2px;
    padding: 0 9px;
    height: 35px;
    line-height: 35px;
    font-size: 20px;
    background: #DF1452;
    color: #ffffff;
    font-weight: bold;
}
.box11 p {
    margin: 0; 
    padding: 1em;
}
</style>

枠で囲む

1
2
3

　<div style="font-size: 130%; padding: 20px; margin-bottom: 10px; border: 3px solid #DF1452; border-radius: 8px;">
   ここにテキストはいる
　</div>
ここにテキストはいる　font-size: 130%; border: 3px solid #DF1452; border-radius: 8px;
ここにテキストはいる　font-size: 80%; border: 3px solid #0092ca; border-radius: 12px;
ここにテキストはいる　 border: 7px dashed #DF8914; border-radius: 5px;
ここにテキストはいる　 border: 3px double #14DF20; border-radius: 5px; border-width: thick;

文字の強調

1

　`ascending = False`{:style="background: #ff0044; color: white; font-size: 150%"}

150% で白抜き文字、赤背景

　ascending = False

早見表

16進コード rgbコード color name サンプル
#ffd700 rgb(255, 215, 0) Gold 　　　
#40e0d0 rgb(0, 255, 238) Turquoise 　　　
#696969 rgb(105, 105, 105) dimgray 　　　
#e6e6fa rgb(230, 230, 250) lavender 　　　
#008080 rgb(0, 128, 128) teal 　　　
#dc143c rgb(220, 20, 60) crimson 　　　 
1
2
3
4
5
6

`git@github.com:`{:style="background: #ffd700; font-size: 120%"} <br> 
`git@github.com:`{:style="background: #40e0d0; font-size: 120%"} <br> 
`git@github.com:`{:style="background: #696969; font-size: 120%"} <br> 
`git@github.com:`{:style="background: #e6e6fa; font-size: 120%"} <br> 
`git@github.com:`{:style="background: #008080; font-size: 120%; color: white"} <br> 
`git@github.com:`{:style="background: #dc143c; font-size: 120%; color: white"} <br>

git@github.com:
git@github.com:
git@github.com:
git@github.com:
git@github.com:
git@github.com:

Style before擬似要素の使い方 h1 が”◆”から開始される。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<style>
h1:before {
content: "◆";
color: #326693;
}
/*p:before {
content: "★";
color: #b20000;
}*/
</style>

<h1>before擬似要素の使い方</h1>
<p>特定のセレクタにbefore擬似要素を追加します。</p>
<p></p>

before擬似要素の使い方

特定のセレクタにbefore擬似要素を追加します。

Box シャドー

1
2
3
4
5
6

<div style="padding: 20px; margin-bottom: 10px; border: 2px solid rgb(0, 146,202); 
 border-radius: 10px; text-align: center; background-color: rgb(0, 146,202);
 box-shadow: 6px 6px 6px rgba( 128, 128, 128, 1.0);">
 <strong style="color: rgb(255, 255, 255); 
 font-size: 24px;">東京の中心部に位置するこのレストランは、伝統的な日本料理とモダンなアレンジを融合させた独自のメニューで知られています。</strong>
</div>
東京の中心部に位置するこのレストランは、伝統的な日本料理とモダンなアレンジを融合させた独自のメニューで知られています。

Point 枠の応用

<details>
    <summary>Point 枠の応用Coding結果</summary>
    <div class="box28">
    <span class="box-title">Point</span>
    <p style="font-size: 130%; color: blue;">df = df[df['メールアドレス'].str.contains('@example.org')]　<strong>含む</strong>で抽出<br>
    df = df[~df['メールアドレス'].str.contains('@example.org')]　<strong>含まない</strong>で抽出</p>
    </div>
</details>

<style>
.box28 {
    position: relative;
    margin: 2em 0;
    padding: 25px 10px 7px;
    border: solid 5px #FFC107;
}
.box28 .box-title {
    position: absolute;
    display: inline-block;
    top: -2px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #FFC107;
    color: #ffffff;
    font-weight: bold;
}
.box28 p {
    margin: 0; 
    padding: 0;
}
</style>
Point 枠の応用Coding結果
Point

df = df[df['メールアドレス'].str.contains('@example.org')]　含むで抽出
df = df[~df['メールアドレス'].str.contains('@example.org')]　含まないで抽出

画像の拡大

1

![image](/images/200by200.png){:height="500px" width="500px"}<br>

結果 image

1

![image](/images/200by200.png)<br>

結果：原寸大 image

1
2
3
4
5
6
7
8
9
10
11
12
13

<style type="text/css">

img.example0 { zoom: 1.0; }
img.example1 { zoom: 1.5; }
img.example2 { zoom: 70%; }

</style>

<p><img src="/images/200by200.png" alt="［写真］" class="example0"> 等倍200pxby200px</p>

<p><img src="/images/200by200.png" alt="［写真］" class="example1"> 1.5倍に拡大</p>

<p><img src="/images/200by200.png" alt="［写真］" class="example2"> 70%に縮小</p>

［写真］ 等倍200pxby200px

［写真］ 1.5倍に拡大

［写真］ 70%に縮小

★関連記事★

je veux vs je voudrais

less than 1 minute read

挨拶の次にレストラン等でフランス語会話の第一歩として覚えるべき「欲しい: want ->veux」と「欲しいのですが: would like to ->voudrais」 の使い分け