10分でわかるかもしれない ブログの文字装飾のためだけのHTML講座

0

    こんにちわ、ちかです

    今日の日記の目標は

    とある生徒様が
    ブログ文字装飾
    CSSリファレンスを見て自由にできること

    です。

    でわでわさっそく...


    まずは span タグを使った例を見てみましょう。

    HTMLソース

    これは<span style="color:red;">赤文字</span>です

    ブラウザでの表示

    これは赤文字です

    span タグ自身に意味はありません。が
    style="..." のところにスタイルを指定することで
    <span> と </span> に囲まれた範囲を装飾することができます。

    スタイルの宣言は
    プロパティ (上記例では「color」) 半角コロン (:) 値 (上記例では「red」) 半角セミコロン (;)
    をつなげて指定します。

    style="(プロパティ):(値); (プロパティ):(値); ..."

    スタイルに指定できるプロパティをいくつか紹介するので
    下の [HTMLソース(S)] を編集して試してみてください。

    プロパティ指定可能な値(例)意味
    color

    red

    blue

    #f96

    #00ccff

    文字色
    background-coloryellow
    lime
    cyan
    #ffccff
    背景色
    font-size

    30px

    80%

    large

    文字サイズ
    border1px solid red
    2px dotted #00ff00
    境界線
    (線幅, 種類, 色 を指定)
    text-decoration

    overline

    underline

    line-through

    下線・上線・取り消し線など

    HTMLソース(S)

    いろいろ<span style="color:blue; font-size:20px; background-color:cyan; border:1px dashed green;">文字装飾</span>してみましょう

    ブラウザでの表示

    いろいろ文字装飾してみましょう

    ※ 色について

    色の指定は
    white, black, blue などの色名指定と
    #fff のような [(シャープ)(赤の強さ)(緑の強さ)(青の強さ)] による指定ができます。
    後者の場合、(赤)(緑)(青) は1桁または2桁の16進数で指定します。
    詳しくは HTMLリファレンス・カラー編 などを参照してください。


    さてさて
    ひととおり試したら
    今度は上の [HTMLソース(S)] の
    <span> と </span> を
    <p> と </p> に変えてみてください。

    p タグは段落を意味します。
    <span style="border:1px solid black;"> は Word でいう「文字罫線」に
    <p style="border:1px solid black;"> は Word でいう「段落罫線」に
    それぞれ対応すると思って問題ないです。

    (ちかは背景色とか境界線とかは p タグに設定して使うことが多いです。)


    span タグ、p タグ、style 属性の指定方法を見てきましたが
    ここまでくれば
    あとは スタイルシートリファレンス を見て
    好きなように装飾できるかと思います。
    できなかったらすみません(苦笑)

    次は RINO さんです


    スポンサーサイト

    0
      • 2020.07.31 Friday
      • -
      • 00:00
      • -
      • -
      • -
      • -
      • by スポンサードリンク

      コメント
      > satomiさん
      ありがとうございます☆
      [HTMLソース] のところを編集するとその場で結果が見れるので
      ぜひ活用・練習してみてくださいね〜!
      ちかさんへ
      10分では難しいと思うけど、できるようになったら面白そう!
      サイトもお気に入りに入れました。
      • satomi
      • 2012/03/05 10:45 PM
      コメントする








         

      教室情報

      無料体験申込



      ハロー!パソコン教室
      イトーヨーカドー大森校
      〒143-0016
      大田区大森北2-13-1
      イトーヨーカドー大森店3F

      お問合せ(お電話)
      03-3762-8600

      営業時間などの詳細はこちらをご覧ください

      ハロー!パソコン教室イトーヨーカドー大森校無料体験レッスンのお申し込みはこちらから

      ハロー!パソコン教室イトーヨーカドー大森校の地図

      MOS試験会場校

      大森校はこんなところ!


      明るく楽しいスタッフ達があなたのやりたいことを徹底的にサポートします!
      MOS資格も保持していますので、安心して何でもご質問ください!


      大森校ではMOS資格を取得された生徒様が多数いらっしゃいます!
      合格率100%を誇る教室で、あなたもきっと合格できます。

      安心の個別学習
      レッスンは集合形式ではなく、個別学習式。パーテーションで区切られた個別空間でご自分のペースでレッスンを受講いただけるのが人気の理由の一つです!

      雇用保険に加入している方へ
      教育訓練給付金制度のお知らせ
      教育訓練給付制度のお知らせ

      iPhone講座 開講中
      iPhoneの使い方を
      基礎から丁寧に学べます。

      最近の記事

      カテゴリ

      アーカイブ

      コメント

      時間割

      10:10〜
      11:10〜
      12:20〜
      13:20〜
      14:20〜 休み時間
      15:20〜
      16:20〜
      17:30〜
      18:30〜
      19:30〜
      20:30〜
      店舗都合により上記以外にお休みをいただく場合がございますので、ご来校の際は事前に教室までお問い合わせ下さい。

      その他のリンク

              

      Microsoft Office Specialist

      サイト内検索

      その他

      携帯用QRコード

      qrcode

      PR