[phoe-icon name="fa-inbox fa-lg"]　文章にメリハリをつけるボックス

いわゆる囲み記事をつくるとき、boxのHTML+CSSで、さまざまなデザインのボックスを作ることができます。このブログでも、文章の性格に応じて、いくつかの異なるボックスを使い分けたいと思っています。

Simplicityテーマのオリジナルボックス

ボックスに関しては、本ブログのテーマとして採用しているSimplicityオリジナルのボックスも初めからいくつか用意されているので便利です。Simplicityで最初から用意されているボックスは、次のとおりです。

本ブログのオリジナルボックス

次に、このブログで頻繁に使いたいと思っているボックスのデザインを、CSSつきでご紹介したいと思います。

ボックス１

CSS

/*  ボックス　単線　 */
.box_single {
    padding: 0.5em 1em;
    margin: 2em 0;
    border: solid 2px #4ec4d3;
}
.box_single p {
    margin: 0; 
    padding: 0;
}

これは一番単純なボックスです。単線で囲っています。各種の説明、具体例の紹介などに適しています。リストのタグをつけてボックスの中に表示することもしばしばあります。

ボックス２

CSS

/*  ボックス　二重線  */
.box_double {
    padding: 0.5em 1em;
    margin: 2em 0;
    border: double 5px #4ec4d3;
}
.box_double p {
    margin: 0; 
    padding: 0;
}

単線よりも、枠を強調したいときには、この二重線の枠を使います。情報がより重要である場合、読者にとくに読んでもらいたいと思うコンテンツの場合に使うことが多いと思います。

ボックス３

CSS

/*  ボックス影つき   */
.box_shadow{
     padding: 10px 10px;
     border-radius:4px;
     border:1px solid #3cb371;
     box-shadow:1px 1px 1px 1px rgba(0, 0, 0, 0.4);
     margin: 10px 0px　;
     width: 96.5%;   
}

これは、シャドウ付き見出しとやや紛らわしいですが、ハイライトしたいコンテンツを載せる場合に使えるかもしれません。

ボックス４

CSS

/*  ボックスPoint    */
.box_point {
    border: 2px solid #3cb371 ;
    border-radius: 4px;
    margin: 2em 0;
    padding: 2em;
    position: relative;
}
.box_point::before {
    background-color: #fff;
    color: #3cb371;
    content: "POINT";
    font-weight: bold;
    left: 1em;
    padding: 0 .5em;
    position: absolute;
    top: -1em;
}

これは、文字通り、ポイントとなる事柄を示すために用いられます。テキストや解説文などで、しばしば利用されています。

ボックス５

CSS

/*  ボックス　見出し付き  */

.box_title {
    position:relative;
    padding: 20px;
    margin: 60px 0;
    width: 90%;
    border: 1px solid #3cb371;
    border-radius:0 4px 4px 4px ;
    color: #2E2E2E;    
}
.box_title span{
    position:absolute;
    top: 0px;
    left: -1px;
    width: 100%;
    padding: 5px 0 5px 20px;
    background-color: #3cb371;
    border: 2px solid #3cb371;
    box-shadow: 2px 0 1px #3cb371;
    border-radius:4px 4px 0 0;
    box-sizing: border-box;
    color:#fff;
    font-weight:500;
    letter-spacing:.1.5em;
    line-height: 1em;
}

このボックスは、非常に活用範囲の広いボックスです。ボックスに自由な見出しをつけられるので、一種のコラム記事を載せることが容易になります。

以上、本ブログで使っているボックスをご紹介しました。ボックスは、ブログにメリハリをつけ、読者にどのような内容に注目してほしいかをアピールする上で重要な役割を果たします。本ブログでも適宜活用したいと思っています。

こちらの記事も、あわせてお読み下さい

http://medialabo.info/blog/post-656/