よみもの:利用者ページの魔改造マニュアル
|
よみものページ |
| この「よみもの」は、山城が作成したものです。 他ユーザーの編集も歓迎いたします。 |
注意[編集]
- 練習ページでの練習はトラブルの元になる可能性が高い為、サブページを使って自分だけの練習ページを作って練習してください。
- デバイスによっては表示が多少異なる為、他デバイスでの見た目がよろしくなくなる可能性があります。特にfont-size。
- 著者がCSSとHTML、MediaWiki初心者なので、情報不足や曖昧な情報がある場合があります。詳しい人が書き加えてくれることを願いましょう。
基本[編集]
基本的には
<div style="構文">文章</div>
又は
<span style="構文">文章</span>
で構文を呼びます。divとspanの違いは謎。何かしらの違いはあると思う。文字数とか
<span style="構文;構文">文章</span>
；を使うことで構文を多数同時に呼び出せます。
以下は構文のみを記載する。
文字の大きさ変更[編集]
font-size:数px
数には好きな数を入れてください。それが文字の大きさになります。;
<big>文章</big>
や
<small>文章</small>
の上位互換です。
フォントの変更[編集]
font-family:フォント名;
又は
font-family:フォント名,フォント種;
フォント名等はご自身で調べてください。
テキスト位置変更[編集]
text-align:位置
テキストの位置を変える。ただ右に寄せるだけなら{{右}}で、中央寄せは<center></center>で十分かも。
位置[編集]
- left 左
- center まんなか
- right 右
他にもjustifyとか色々あるけどよくわからなかった。教えてエロい人
背景色の変更[編集]
background:カラーコード
これを使うだけでページの見た目が一変します。カラーコードはHTMLとかで使う#FFFFFFとか#000000です。カラー選択はここからどうぞ。
グラデーション[編集]
background:linear-gradient(カラーコード1,カラーコード2)
背景にグラデーションがでます。カラーコードは2つ以上入れることが可能であり、中間色を設定できます。
枠線[編集]
border:太さ 種類 色
これはよくわからない。コードをAIに書かせるかネットで拾うのが吉。一応種類は下記に記す。
太さ[編集]
pxを使ってピクセル数とかで指定
種類[編集]
double,ridge,groove,inset,outsetは見にくいので8pxに拡大している。
| 箱、読者へ記事を読む時の前置きなどに使う |
|---|
辺のみ[編集]
影[編集]
text-shadow: 深さ 横 ぼかし 色
例
5px 5px 5px #00F
2px 2px 10px #00F
2px 10px 2px #00F
10px 2px 2px #00F
HTMLリファレンス[編集]
HTMLリファレンスってやつ。理由はよくわからないが使えないやつもあるっぽい。
打ち消し線[編集]
<s>文章</s>
文章に線が引けます。余計な事書くときにどうぞ
下線[編集]
<u>文章</u>
文章の下に線が出ます。特に重要なところにどうぞ
イタリック体[編集]
<i>文章</i>
文章が傾きます。Stylish to use for alphabets(アルファベットに使うと御洒落)。Также доступны символы кириллицы.(キリル文字も可能)。英名や学名にどうぞ。MediaWikiでは ''文章'' でも出来る為、文字数稼ぎくらいにしか用途がない
太字[編集]
<b>文章</b>
文章が太くなります。MediaWikiでは '''文章''' でも出来る。 '''文章''' のほうが入力しやすいから使い道なし。
スクロールバー付きボックス[編集]
==スクロールバー付きボックス==
同じ種類の物をコンパクトにまとめるときに有効。<div style="border: 1px solid #a0a0a0; padding: 1rem; height:200px; overflow-y:scroll">
</div>
同じ種類の物をコンパクトにまとめるときに有効。
height:250pxのところを変更すると縦向きの長さが変わる。～overflow-y:scroll">と、</div>の間に文字を入れるとボックス内に表示される- 以下のあは、スクロールを表示させるためのもの。
- ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
なんか2列にするやつ[編集]
<div style="display:flex;"> <div style="flex: 1;"> てきすと </div> <div style="flex: 1;"> てきすと2 </div> </div>
↑動作させてみるとこんな感じ(わかりやすくするために「てきすと」をborder:で囲ってある。
てきすと
てきすと2
列の方向[編集]
<div style="display:flex;flex-direction:値">
「てきすと」を並べる向きをしてする。
| 値 | 効果 |
|---|---|
| row | 左から右 |
| row-reverse | 右から左 |
| column | 上から下 |
| column-reverse | 下から上 |
まぁ、見ればわかる
row[編集]
てきすと
てきすと2
row-reverse[編集]
てきすと
てきすと2
column[編集]
てきすと
てきすと2
column-reverse[編集]
てきすと
てきすと2
応用[編集]
flexにflexを入れることができる。
てきすと１
てきすと２
てきすと３
ソース
<div style="display:flex;flex-direction:row"> <div style="flex: 1;"> <span style="border:1px solid #000">てきすと１</span> </div> <div style="flex: 1;"> <div style="display:flex;flex-direction:column"> <div style="flex: 1;"> <span style="border:1px solid #000">てきすと２</span> </div> <div style="flex: 1;"> <span style="border:1px solid #000">てきすと３</span> </div> </div> </div> </div>
多用すると脳が混乱してページが死ぬ
複雑なコードの書き方[編集]
AIに生成させる[編集]
ChatGPTに「Wikipediaで動作する」等と言った文面と欲しいプログラムを要求することでコードを書いてくれる事もあります。
出来ないことはしっかりとできないと言ってくれる為、短時間で済む(ときもある)。
Webから拾う[編集]
非推奨。一部構文は動作しませんし、少し手を加える必要あり。
CSSやHTMLを一から勉強して自分で考える[編集]
推奨。デメリットは多少の費用が掛かる。
使用例[編集]
CSSかHTMLが使われている記事を列挙する。(と言う前提のメモ欄)但し、このマニュアルを利用して書かれた記事ではないことには注意。寧ろこれらの記事を元にマニュアルが作成している。
- 利用者:山城 なんか色々使われいる。
- SCP財団 text-alignやfont-sizeなどが使われています。
- ブルースクリーン 主に背景色が使っている。
- メモ帳 (Windows) 主に枠線が使っている。他にも色々使っているように見えるが私にはコードが理解できなかったので保留。
- 太字
- Rest:削除されたジョーク/整理整頓