Lopanのスタイルガイド。
Lopan.jpの記事ページのスタイルガイドです:)。
マークアップについて
文章中の語句に意味付けするHTML要素のご紹介。Lopan.jpでこうするとこうなるという一覧です。
語句の装飾
文章中の重要な語句を強調したり、読み難そうに並んでる単語だけ浮き立たせたりするために、なるべく適切なHTML要素を使って、語句を括ります。
強調・目立たせたい
文章中の重要な単語やフレーズは<strong>
、強調したいフレーズは<em>
、文章に関連性が強く目立たせたい単語は<mark>
、読みやすさの観点から他と区別したい単語は<b>
、興味深さの観点から他と区別したい単語は<i>
で括る。
注釈・但し書きを表す
内容についての注釈や但し書きという意味合いを持たせたい文章(括弧付きで添えるような文章)は<small>
で括る。
引用であることを示す
他サイトから引用
した語句やフレーズは<q>
で括り、引用元ページや「書籍のタイトル」を表す語句は<cite>
で括る。
キーボードでの入力を表す
「lopan.jpと入力する」みたいな操作を表す時は、<kbd>
で括る。
「⌘+C」みたいな操作を説明する時は、キーひとつを<kbd>
で括って、一連の操作をさらに<kbd>
で括る。
ふりがなを振る
振り仮名を振る時は<ruby>
で括って、漢字の後に<rt>
に続けて読みがなを記述する。
Google検索の説明に表示されるかもしれない場合には、<rt>
をきちんと閉じ、読みがなを「()(丸括弧)」で囲って、その丸括弧をそれぞれ<rp>
で括っておくと安心です(2021年8月現在)。
上付き文字・下付き文字
上付き文字「E=mc2」は<sup>
、下付き文字「CO2」は<sub>
で括る。
略語の意味を表す
「HTML」など略語は<abbr>
で括り、title属性で意味や説明を付与する。
正しくなくなったことを表す
「牛すじ和山椒カレー ¥ 1,512→SOLD OUT」のように、今はもう正しくなくなった内容を取り消したい時は<s>
で括る。
編集した項目を表す
「top: 0; right: 0; bottom: 0; left: 0;inset: 0;
」みたいに、編集したことを表す時は、削除した項目を<del>
で括り、追加した項目を<ins>
で括る。
話題転換のための水平線
同じセクションの中で、話題を変えたり、閑話休題な場面には<hr>
を置く。
シーン別に以下の3種類が用意してある。
その他語句の装飾スタイル
目立たせたい単語やフレーズの特に注目してほしい語句は、<class="dot">
や、<class="sesame">
や、<class="waveline">
で括る。
:)
顔文字の表示にはi要素を使い、class="emo"
を付与します。
:)
:D
;)
;D
X)
X(
XD
:3
:9
:‹
:p
:o
XO
:/
:|
‡|
⁑|
¦‹
:ω
一覧や解説
普通の一覧
- ではみなさんは、そういうふうに川だと云われたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。
- ジョバンニさん。あなたはわかっているのでしょう。
- 大きな望遠鏡で銀河をよっく調べると銀河は大体何でしょう。
番号付き一覧
- ではカムパネルラさん。
- では。よし。
- このぼんやりと白い銀河を大きないい望遠鏡で見ますと、もうたくさんの小さな星に見えるのです。ジョバンニさんそうでしょう。
リンク一覧
用語の解説一覧
- ジョバンニ
- 孤独で空想好きな少年。歳は授業内容や仕事から思春期前とわかる。家は貧しく、母親が病気で寝込んでいるので、早朝には新聞配達、学校が終わってからは活版所でアルバイトをしている。父親は長らく家に帰っていない。漁に出ているとジョバンニは信じているが、らっこを密猟して投獄されていると噂され、近所の子供たちはそのことでジョバンニをからかう。結婚して別に住む姉がいて、料理を作ってくれたりする。
- カムパネルラ
- ジョバンニの同級生で親友。父親同士も親友だった。裕福で人気者の優等生として描かれている。彼の母親は石炭袋にいたことから亡くなっていると推察される。しかしジョバンニの「何もひどいことない」という言葉から健在な母親もいるのではないかという見方もあり、一見幸福そうなカムパネルラの複雑な生い立ちが覗われる。
- 他の同級生がジョバンニをからかうときは気の毒そうにしている。ジョバンニとともに銀河鉄道に乗り込み、共に旅する。
用語の解説ボックス(用語ひとつだけ用)
- 「素直にマークアップ」とは
- その情報が持つ役割や意図に相応しいHTMLタグを使い分けるということ。
例えば、そのページのメインコンテンツはmain要素にして、その中のコラムやセクションはsection要素、タイトルならh1要素、段落ならp要素、強調したい単語やフレーズにはstrong要素やem要素を使ったり、日時にはtime要素を使ったり、別ページへのリンクにはa要素でhref属性を指定して、別サイトへのリンクにはtarget属性を指定したり、一覧はul/li要素、用語についての説明を箇条書きしたい時にはdl/dt/dd要素を使ったり、他所の文書からの引用文はblockquote要素にしたり、フレーズならq要素を使ったりすることです。
用語の解説グリッド(用語と解説よこ並び)
- カーソルの位置からすべて読み上げ
- Caps Lock + A
- 次の項目へ進む
- Caps Lock + →
- 前の項目に戻る
- Caps Lock + ←
- ローター※を表示する
- Caps Lock + U
プロパティ解説一覧
display
<display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>
- 要素をブロック要素とインライン要素のどちらとして扱うか、およびその子要素のために使用されるレイアウト、例えば フローレイアウト、グリッド、フレックスなどを設定します。
- 正式には、 display プロパティは要素の内部と外部の表示型を設定します。外部の型は要素のフローレイアウトへの参加方法を設定し、内部の型は子要素のレイアウトを設定します。
display-outside
block
/inline
/run-in
- 要素のフローレイアウトの役割を表す、要素の外部表示種別を指定します。
脚注
- 孤独で空想好きな少年。歳は授業内容や仕事から思春期前とわかる。家は貧しく、母親が病気で寝込んでいるので、早朝には新聞配達、学校が終わってからは活版所でアルバイトをしている。
- 父親は長らく家に帰っていない。漁に出ているとジョバンニは信じているが、らっこを密猟して投獄されていると噂され、近所の子供たちはそのことでジョバンニをからかう。
- 結婚して別に住む姉がいて、料理を作ってくれたりする。
注釈
ジョバンニの同級生で親友。父親同士も親友だった。裕福で人気者の優等生として描かれている。彼の母親は石炭袋にいたことから亡くなっていると推察される。
セクションの見え方サンプル(ここはh2要素)
以下、スタイル表示確認のための段落です。
語句の装飾サンプル:重要、強調、関連性、読みやすさ、興味深さ、振り仮名、(但し書き)、削除、追加、取り消し、上付き、下付き、略語、引用
、「作品名」、セサミ強調、ドット強調、<code>
、K+B+D、テキストリンク、;)
タイトルなし枠欄
語句の装飾サンプル:重要、強調、関連性、読みやすさ、興味深さ、振り仮名、(但し書き)、削除、追加、取り消し、上付き、下付き、略語、引用
、「作品名」、セサミ強調、ドット強調、<code>
、K+B+D、テキストリンク、;)
注意事項(h3要素)
語句の装飾サンプル:重要、強調、関連性、読みやすさ、興味深さ、振り仮名、(但し書き)、削除、追加、取り消し、上付き、下付き、略語、引用
、「作品名」、セサミ強調、ドット強調、<code>
、K+B+D、テキストリンク、;)
セクション内セクション(h3要素)
語句の装飾サンプル:重要、強調、関連性、読みやすさ、興味深さ、振り仮名、(但し書き)、削除、追加、取り消し、上付き、下付き、略語、引用
、「作品名」、セサミ強調、ドット強調、<code>
、K+B+D、テキストリンク、;)
セクション内セクション(ここはh4要素)
語句の装飾サンプル:重要、強調、関連性、読みやすさ、興味深さ、振り仮名、(但し書き)、削除、追加、取り消し、上付き、下付き、略語、引用
、「作品名」、セサミ強調、ドット強調、<code>
、K+B+D、テキストリンク、;)
セクション内セクション内セクション(ここはh5要素)
語句の装飾サンプル:重要、強調、関連性、読みやすさ、興味深さ、振り仮名、(但し書き)、削除、追加、取り消し、上付き、下付き、略語、引用
、「作品名」、セサミ強調、ドット強調、<code>
、K+B+D、テキストリンク、;)
- 重要、強調、関連性、読みやすさ、興味深さ
- 振り仮名、(但し書き)、
削除、追加、取り消し
<code>
、K+B+D、テキストリンク
図版
記事中の画像、動画、表、サンプルなどのスタイル。
画像
テーブル
grid | -ms-grid | 内容 |
grid-template |
grid-template-rows |
-ms-grid-rows |
行トラックのサイズを指定する |
grid-template-columns |
-ms-grid-columns |
列トラックのサイズを指定する |
grid-gap |
grid-row-gap |
- |
行トラックの隙間の指定する |
grid-column-gap |
列トラックの隙間の指定する |
grid-area |
grid-row |
-ms-grid-row |
アイテムを配置する行トラックを指定する |
grid-column |
-ms-grid-column |
アイテムを配置する列トラックを指定する |
グリッドレイアウトと-ms-グリッドレイアウトのプロパティ対応表
iframe
複数画像横並び
Inviewアニメーション
- そのころわたくしは、モリーオ市の博物局に勤めて居りました。
- 十八等官でしたから役所のなかでも、ずうっと下の方でしたし俸給もほんのわずかでしたが、受持ちが標本の採集や整理で生れ付き好きなことでしたから、わたくしは毎日ずいぶん愉快にはたらきました。
- 殊にそのころ、モリーオ市では競馬場を植物園に拵え直すというので、その景色のいいまわりにアカシヤを植え込んだ広い地面が、切符売場や信号所の建物のついたまま、わたくしどもの役所の方へまわって来たものですから、わたくしはすぐ宿直という名前で月賦で買った小さな蓄音器と二十枚ばかりのレコードをもって、その番小屋にひとり住むことになりました。
- わたくしはそこの馬を置く場所に板で小さなしきいをつけて一疋の山羊を飼いました。
- 毎朝その乳をしぼってつめたいパンをひたしてたべ、それから黒い革のかばんへすこしの書類や雑誌を入れ、靴もきれいにみがき、並木のポプラの影法師を大股にわたって市の役所へ出て行くのでした。
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。
では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。
Lopanアイコン