プログラミング

【CSS3】list-styleのタイプをWordPressのテキストエディタで紹介してみた

プログラミング

こんにちはウルフです。

今回はCSSの「list-styleタイプ」をWordPressのテキストエディタで紹介していきます。

というのも、Wordpressのでブログを編集する時「ビジュアルエディタ」と「テキストエディタ」で編集するんですが、テキストエディタの構造ってHTMLと記載のしかたが同じなんですよね。

テキストエディタとhtml

左:VScodeでのHTML画面 右:Wordpressのテキストエディタ

何を今更と思うかもしれませんが、前までプログラミング知識がなかったから仕方がない。

せっかくなので、プログラミング知識がなくてもWordPressでブログ運営している人に向けても紹介していこうかと思いました。

また、ブログを運営していてもCSS基礎は必要です

よって、WordPressでブログを運営している人もぜひ参考にして下さい!

list-styleのタイプをWordPressのテキストエディタで紹介してみた

プログラミング

まず初めに、以下のモノを準備して下さい。

WordPressでブログ運営している人
  • かしこい
  • かわいい
  • エリーチカ

のようにリストを作成して下さい。

VScodeを利用している人

VScodeでindex.htmlを作成し、リストを作成して下さい。

テキストエディタ<style>

基本的にHTMLでCSSを記載していくときの形は

<ul style=”list-style-type: ○○;”>

このように記載します。

そして、中にある「○○」を変更することでスタイルを指定できます。(VScodeでも同様です)

それでは早速、「〇〇」の部分をいろいろ変えてみて確認していきましょう。

※ワードプレスのテキストエディタの場合、何故かリストの左側が二重になってしまいます。あくまで確認する程度にしておきましょう!

disc:黒丸にしたい場合(デフォルト)

<ul style=”list-style-type: disc;”>

  • かしこい
  • かわいい
  • えりーーーーちか!!

デフォルトで設定されています。よって、CSSを記載しても変化はありません。

circle:白丸にしたい場合

<ul style=”list-style: circle;”>

  • みんなのハート
  • 打ち抜くぞ~~
  • バァ~ン♡

まるで打ち抜いたかのような白丸が表示されます。

square:四角にしたい場合

<ul style=”list-style: square;”>

  • 今日も
  • 一日
  • 頑張るゾイ!

ちょっとわかりにくいですが、四角になっています。

decimal:数字にしたい場合

<ul style=”list-style: square;”>

  • かごの中、閉じ込めて
  • because i’m in love
  • 消さないで、このメロディ

数字で表示されました。

ちなみに、これは歌詞の一部です、これだけでわかった人は天才。

upper/lower-alpha:大文字小文字アルファベット

<ul style=”list-style: upper-alpha;”>

<ul style=”list-style: lower-alpha;”>

  • みんな~
  • 盛り上がってるか~い?
  • 盛り上がらないと~….

盛り上がらないと~?

  • ことりの
  • おやつにしちゃうぞ~
  • ちゅんちゅん♪

リストの英語表記もできるんですよね。

upperとlowerの違いとしては

  • upper ⇒大文字
  • lower ⇒小文字

upper/lower-roman:大文字小文字ローマ字

<ul style=”list-style: upper-roman;”>

<ul style=”list-style: lower-roman;”>

  • 私の
  • 名前は
  • ウルフです。
  • ラブライバーで
  • バンドリーマーで
  • NEW GAMEが大好きです。

ローマ表記もできるんですよね。

カッコイイ、、、使いどころ全くわからへんけど

none:黒丸を消したい場合

<ul style=”list-style: upper-roman;”>

リストを消したい場合は「none」をよく使用します。

プログラミング書く人はよく使うので覚えておきましょうね!

※ちなみに、ワードプレスのテキストエディタで使用しても何もおこりません。

まとめ

HTMLにCSSのスタイルを記載する場合は以下の通り

<ul style=”list-style: 〇〇;”>

〇〇に記載する例
  • disc:黒丸にしたい場合(デフォルト)
  • circle:白丸にしたい場合
  • square:四角にしたい場合
  • decimal:数字にしたい場合
  • upper/lower-alpha:大文字小文字アルファベット
  • upper/lower-roman:大文字小文字ローマ字
  • none:黒丸を消したい場合

まとめるとこんな感じですね。

後は自分でいろいろ試してみて下さい。

\\サーバー契約なら国内シェアNo.1のエックスサーバー!//

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です