センタリング＆グラデについてꕤ
- カテゴリ：日記
- 2022/05/02 22:54:52
〇
本文はここに入力してください。改行はShift+Enterで！
〇
おっしゃっていたページのデコは↑の感じかな？？？
そのまま張り付けただけですけど…
私の場合は可能でした。
なんでだろう？？
一応このｈｔｍｌ版も張り付けておきますね♫♦*ﾟ¨
<div align="center">
<p>〇</p>
<div style="display:inline-block;
padding:2px;
border:2px solid #FFE3F6;
border-radius:8px;">
<div style="display:inline-block;
background: linear-gradient( #FFE3F6,#FFFFFF);
padding:10px; border-radius:8px;">本文はここに入力してください。改行はShift+Enterで！
</div></div>
<p>〇</p>
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
グラデをばにらさんはお望みなんですよね？？
おせっかいながら…少し説明させてもらいますねꕤ
（と、あとセンタリングも）
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
〇
ここにテキスト
〇
<div align="center">
<p style="text-align: center;">〇</p></div>
<div align="center">
<div style="display:inline-block;
margin:20px auto;
padding: 8px;
box-shadow: 5px 5px 6px #918e54;margin: 8px;
background: -moz-linear-gradient(180deg,#918e54,#f7f39c,#918e54);
background:-webkit-linear-gradient(180deg,#918e54,#f7f39c,#918e54);
background: linear-gradient(to right, 180deg,#918e54,#f7f39c,#918e54);">
<div style="padding:0.5em 1em;">ここにテキスト</div></div></div>
<p style="text-align: center;">〇</p>
【解説】
<div align="center">
センタリング全体
<p style="text-align: center;">
文字のセンタリング
display:inline-block
文字の長さによって枠の幅が自在に変わる
background: -moz-linear-gradient(180deg,#918e54,#f7f39c,#918e54)
グラデの命令文で濃い青の数字は角度を示す。
この例の場合は180度で縦になってる状態。
もし横にグラデを入れたければ90degの表記になり
もし斜めにグラデを入れたければ45degまたは135degの表記になる。
後ろの＃〇〇〇〇〇〇はグラデを入れたい順番に色番号を入れる。
細かくグラデをしたい場合は＃〇〇〇〇〇〇の色数を好きなだけ増やすと可能。
(例;
background: -moz-linear-gradient(180deg,#918e54,#f7f39c,#918e54,#f7f39c,#918e54)
⇒これで5色のグラデになる。この場合は同じ色を繰り返し入れてるので縞々っぽく見えるかな？
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
プログラミングは何種類か文章の書き方があるようですꕤ
使い勝手の良いもの、もしかしたらほかにもあるかもしれません♫
（※一応説明のため、
勝手に文字に色を付けて説明はしてるけど実際は一色です。
…ってゆーか、逆に見づらくなっていたらすみません！！！(>_<)）
