--
    --.--

    スポンサーサイト

    上記の広告は1ヶ月以上更新のないブログに表示されています。
    新しい記事を書く事で広告が消せます。

    このエントリーをはてなブックマークに追加
    2013
    12.23

    またCSSいじってみた(クラスの新設、疑似要素の付加など)

    一足先に、メリークリスマス(^o^)/

    今日はクリスマスにちなんだネタ…ではありません(笑)
    基本このブログはAppleScriptの紹介とか、
    ブログの機能拡張の練習とか、
    プログラミング言語の学習メモとかがメイン。
    あんまりテーマがブレると見づらいでしょうから^-^;;

    今回のネタは、CSSをいじって、htmlのタグだけで
    こんな感じの装飾ができるようにする方法をご紹介します。
    同じようなことをしたい人がいたら参考になれば幸いです(^-^)


    以前に導入したcodeタグ

    以前BootstrapのCSSを参考にして
    ブログのテンプレートのCSSを書き換えることで、

    ブログ本文に
    <code>ホニャララ</code>
    と書くと
    ホニャララ
    と表示できるようにしました(以前の記事)。

    つまり、CSSを書き換えて<code>タグを新設した形です。
    簡単に使えて重宝しています。



    このcodeタグの問題点

    <code>タグの中身が1行の時は良いのですが…
    2行以上にまたがるとこんな感じになってしまいます。
    <code>タグの中身が複数行にまたがると、ぶつ切りの細長い枠線になってしまってカッコ悪い(汗)
    私のイメージと違うorz


    イメージ通りに表示させるため、CSSに新たな設定を書き込むことにしました。
    やりたいことは
    ・複数行全体を枠で囲みたい。
    ・自分勝手に<code2>みたいなタグを新設するのはお行儀が悪いので、
     できれば<div class="code2">といった感じで使える新しいクラスで対処したい。


    ※このブログにはSyntax Highlighterを導入しているので、
    複数行のソースコードをカラフルに表示させることもできるのですが
    簡単なソースの説明に使うにはちょっと大げさだったり、
    カラーリングがかえって邪魔な時があるので(^-^;)




    CSSについて少し勉強

    初心者なのでCSSの基本をメモ書き。

    ・CSSはセレクタとプロパティで構成されている。
    セレクタは<code2>とかclass="code2"とかid="code2"といった、スタイルを設定する対象、
    プロパティはセレクタに対するスタイル情報。
    ・セレクタはcodeと書けばタグ(<code2>)、.codeと書けばクラス、#codeと書けばIDとして扱われる。
    ・セレクタは階層構造の形で指定することもできる。
     「<main>の中の<code2>」ならmain code2と表せる。
    ・複数のセレクタで共通するプロパティを一度に設定できる。
     「<main>と<code2>」ならmain, code2と表せる。
    ・プロパティは{}で囲んで複数のプロパティを設定できる。
    ・プロパティの位置指定の数値は時計回りの順(上・右・下・左)。
     値を1つにすると上下左右すべてその値になる。値2つだと上下と左右の値になる。
    ・表示がおかしくなったら、まずは;のつけ忘れと{}の加不足をチェック。
    ・z-indexで重なりの順番を指定できる。相対的に値が低い方が下に来る。



    とりあえずうまくいった

    最初にいきなり.code2クラスを作ろうとしたのですが、
    何故かうまくいきませんでした(未解決)。
    どうしたものかとテンプレートのCSSを眺めてみると…
    私のテンプレートでは本文の表示に使うクラスを
    .main .emojiといった感じで指定していた
    ので、それを真似たら成功しました!

    2013.12.24追記
    枠の背景の右下にcodeの文字を入れてみました。
    CSSの:after疑似要素 (pseudo-element)を利用したもので、IE7とかでは無効らしいです。

    参考:blockquoteタグをCSSだけで格好良いデザインにする【画像不要】 | おーとえすとさいと

    /* codeタグと複数行のコード用のcode2クラス */

    .code2, code {
    font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
    font-size: 90% !important;
    color: #222 !important;
    background-color: #EEE;
    border: 1px solid #BBB;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    margin: 3px;
    }
    code {
    padding: 2px 4px;
    }
    .main .code2 {
    display: block !important;
    padding: 10px !important;
    line-height: 1.4 !important;
    white-space: pre-wrap;
    word-break: break-all;
    word-wrap: break-word;
    width: auto;
    position: relative;
    z-index: 1;
    }
    .main .code2:after{
    content:"code";
    font-size: 18pt;
    line-height:0em;
    font-family: Verdana,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',"MS Pゴシック",sans-serif;
    color: #ccc;
    position: absolute;
    right: 8px;
    bottom: 18px;
    z-index: -1;
    }

    ・3行目~:これまで使っていた<code>タグと、
     新たに追加するcode2クラスで共通するプロパティを先に設定
    ・14行目~:<code>タグの設定
    ・17行目~:.mainクラス内のcode2クラスの設定(今回望んでたもの)
    2013.12.24追記
    ・25・26行目と28行目〜:code2クラスの右の背景に文字を表示させるための設定




    実際にcode2クラスを使って書いてみる

    クラスは単独では使えないので、<div>タグ等の中にcode2クラスを仕込んで使います。

    以下のようにブログの本文に書き込むと
    <div class="code2">タグの中身が複数行にまたがっても、大きなボックスで表示される。こんな感じにしたかったんです♪
    改行しても大丈夫!</div>

    ブログではこんな風に表示されます。
    タグの中身が複数行にまたがっても、大きなボックスで表示される。こんな感じにしたかったんです♪
    改行しても大丈夫!

    ソースコードだとやたら長いことがあるので、
    単語単位でなくても行を折り返すように設定しました。
    思い通りの表示にできて満足です(^-^)



    2013.12.24追記
    同様に<blockquote>タグに”とかquoteの文字をバックに入れてみました。

    疑似要素を使ってblockquoteタグもいじってみました。

    引用元:どこそこより
    関連記事

    このエントリーをはてなブックマークに追加
    トラックバックURL
    http://w6o6n.blog.fc2.com/tb.php/96-be82ce42
    トラックバック
    コメント
    管理者にだけ表示を許可する
     
    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。