Tuesday,September 27,2016

CSSで作るH3&H4タグの簡単な装飾方法

H3_H4tag_eye

SeesaaブログのH3タグは、デフォルト設定では、もともと記事タイトルに使われていました。

Seesaaブログのデフォルト設定

SeesaaブログのHタグは少し特殊で、h1はブログタイトル、h2は日付けになっていました。
H3タグは、記事タイトルだったため、記事中の段落タイトルとしては使えませんでした。

以前H2タグを記事タイトルに日付をdiv要素で指定するように、HtmlとCSSを編集していました。

Seesaaブログの見出しタグを適正タグへ変更した

記事中の見出し用に H4タグ を自作追加していましたが、今回 H3タグ を新たにCSSへ追加したので、簡単な H3、H4タグ の装飾法として紹介してみます。

記事中見出しの装飾

ブログのデザインによって様々な装飾方法がありますが、一般的によく見るシンプルなデザインを追加してみました。

H3タグのCSS

現在使用中の装飾はこんな感じ。

H3_H4tag2

左側に太めのラインが入ってるだけのシンプルなものです。

CSSソースコードはこちら。

h3 {
border-left: 10px solid #74A681;
margin: 50px 0 10px 0;
padding: 5px 10px;
font-size:16px;
font-weight:bold;
font-family:arial, Helvetica;
}

● border-left: 10px solid #74A681;

左側の太めなラインです。10px 使ってボックスっぽく見えるようにしています。
色はブログに合わせて選びました。

● margin: 50px 0 10px 0;

見出し周りの余白を指定しています。
上に 50px 下に 10px の余白を指定しています。

● padding: 5px 10px;

テキスト文字とラインの間隔を指定しています。
こちらも全体のバランスを見て、適宜変更します。

● font-size:16px;

フォントサイズは、見出しですので目立つように、少し大きめにしました。

● font-weight:bold;

同じく目立つように 太字 にしています。

● font-family:arial, Helvetica;

フォントの指定です。自分のブログデザインに合わせて好きなフォントを選びます。

H4タグのCSS

現在の装飾。

H3_H4tag1

上記のH3タグに下線が追加されたものです。
セットで使うと見た目のバランスもちょうどよいですね。

ソースコードはこちら。

h4 {
border-bottom:1px solid #74A681;
border-left: 5px solid #74A681;
margin: 30px 0 10px 0;
padding: 2px 10px;
font-size:14px;
font-weight:bold;
font-family:arial, Helvetica;
}

● border-bottom:1px solid #74A681;

1px の実線で下線部分を描いています。

● border-left: 5px solid #74A681;

左側の太めなラインです。こちらは 5px にして、下線部分とのバランスを揃えています。
当然、色は下線部分と合わせます。

● margin: 30px 0 10px 0;

周りとの余白の指定は、H3タグ と比べてやや狭くしています。
文中の小見出しとして使うことが多いので、行間が広すぎないようにしました。

● padding: 2px 10px;

テキスト文字と線との余白も、やや少なめです。

● font-size:14px;

フォントサイズは、ほぼ本文と同じです。

● font-weight:bold;

太字にしているので、本文中でも若干大きく見えるよう錯覚します。

● font-family:arial, Helvetica;

フォント指定です。別で指定していれば省略しても良いです。

まとめ

見出しとしてはシンプルで、CSSも基本的なものばかりです。

シンプルなおかげでアレンジもしやすいです。
線の種類を変えても良いし、上や右に追加してもよいです。背景に色を追加して、文字を白抜きにしても良いでしょう。
アレンジの仕方は無数にありそうですね。

posted by taks at 19:29 | Comment(0) | TrackBack(0) | SeeSaaカスタマイズ
Tuesday,September 20,2016

PORLEXコーヒーミルmini を購入した

Porlex_mini_eye

着実にコーヒー沼への歩みを進めています。挽きたてのコーヒーを飲みたい衝動にかられ、ミルを購入してしまいました。

コーヒーミル

ドリップ用のコーヒー粉ではなく、コーヒー豆を購入して自分で挽くための器具です。
粗挽きや細挽きなどコーヒー豆の種類や自分の好みに合わせて挽くことで、味の違いを楽しめます。

また、市販のコーヒー粉では、空気に触れる面積が広いので酸化したり、抽出時にうまく膨らまないなど味に影響するマイナス面が目立ちますが、豆の状態で保管しておくと空気に触れる範囲も少なくて済むというメリットもあります。また、引き立てのコーヒーは、お湯を注いだときの膨らみ方も違います。

コーヒーミルの種類

コーヒーミルは沢山の種類が販売されていますが、大別すると手動式と電動式に分かれます。

手動式は、デザインが優れたものが多く、アンティーク調や携帯性に優れたものなど雰囲気を楽しむのにも向いています。手動ですので挽くスピード等によってばらつきが出てきます。 電動式は、豆を入れてボタン一つでOKなお手軽さが魅力です。飲みたいと思った時、時間をかけずにすぐに準備できます。また、粗さや挽くスピードも一定ですので、安定した味を楽しめます。

・手動式

コーヒー器具では有名なカリタの据え置き型コーヒーミル。コンパクトで場所も取らず、値段もお手頃。

同じくカリタの据え置き型。アンティーク調のデザインで、置いておくだけでも雰囲気抜群です。

こちらもコーヒー器具メーカーでは有名なハリオのコーヒーミル。モダンなデザインで挽き具合を見ながら操作できます。

セラミック製の家庭用キッチン用品を扱う国産メーカー。セラミック刃を使っているため、切れ味が変わりにくく手入れも楽。コンパクトなミニタイプはアウトドアにも最適。

電動式

電動式といえばコレ!と言われるほど安定的な人気を誇るカリタのナイスカットミル。お値段もそれなり。

ドイツのラッセルホブス社製電動コーヒーミル。ドイツらしい機能美溢れるデザインがクール。

電動コーヒーミルと言えば大型のものが多い中、小型で取り回しやすく置き場所にも困らないコンパクトタイプ。

今回はコンパクトで、手入れもかんたんそうな PORLEX コーヒーミル mini を選択しました。
電動式のお手軽感も魅力ですが、始めたばかりなので、一手間一手間が楽しい時期なんですよね。

開封の儀

Porlex_mini01
外箱正面

Porlex_mini02
背面

Porlex_mini03
側面1

Porlex_mini04
側面2

Porlex_mini05
内容物

  • 本体
  • 取扱い説明書

Porlex_mini06
手動式のレバーは、ラバー製の収納部に収めることができます。
失くしてしまう心配が減りますね。

Porlex_mini07
意外と大きいレバーです。

Porlex_mini08
本体上部蓋を外して豆を入れます。20g入れることができます。
挽かれたコーヒー豆は、下部の容器に入ります。

Porlex_mini09
セラミック刃の部分。ネジを回して粗さを調整します。
20段くらいのノッチが付いています。

Porlex_mini10
完全にばらした状態。
セラミック刃もばらせるので、洗いやすいです。

Porlex_mini11
ハンドルを付けた状態。

Porlex_mini12
ハンドルは嵌めるだけといった感じです。

作りがしっかりしているので、ガタついたりすることもなく、安っぽい感じもしません。
ドリップコーヒー用なので、中粗挽きにすることが多いですが、手に伝わる感触を確かめながら挽いてるとなかなか楽しいです。コーヒーを飲む前の儀式みたいなものですね。

まとめ

豆を挽き始めたということは、コーヒー沼に両足とも嵌ったということでしょうか。
今後さらに深みに嵌っていくのが、目に見えるようですね。

アウトドアなど外に持ち出して使うこともできるコンパクトタイプですが、思いの外使いやすいです。
セラミックの刃は、洗うときも手を怪我する心配がないので安心できます。コーヒー豆は思いの外油分が出るので、引いた後の手入れは重要です。
手入れのしやすさもポイント高いですね。

posted by taks at 09:08 | Comment(0) | TrackBack(0) | 日記
Tuesday,September 13,2016

テーブルタグの表をCSSで見やすく色をつける!

table_CSS_eye

HTML で表を作るには table タグを使いますが、見やすい表にするには、枠線や色を付けたりといろいろ加工が必要になってきます。
ブログ記事中に挿入する程度の簡単な表には、そこまで凝ったものは必要ありませんが、見やすい表にはしておきたいですね。

表を見やすく装飾する

マークダウン記法を使うと HTML で直接記述するより簡単に表が作れます。

tableタグはMarkdown記法を使うと簡単だった

マークダウン記法で書いたソースを HTML へ変換しただけだと、通常枠線や色付もない何の装飾もされていない状態の HTML が出力されます。

ブログ側に CSS の設定がされていれば、そのまま投稿できますので、CSS を設定して見やすい表が表示されるようにします。

CSSの設定

見やすい表というと、枠線と色付けでシンプルに表示させたものが良いと思います。
できれば1行おきに色が付いていると、より見やすいのではないでしょうか。

CSSの設定は、こちらのサイトを参考にさせていただきました。

CSS3セレクタで1行ごとにテーブルに背景色をつける|Webpark

とても分かりやすくて、勉強になります。

実際に自分のサイトに登録した CSS がこちらになります。

/* テーブル */
.text table {
    width: auto;
    border: 1px solid #555555;
    border-collapse: collapse;
    border-spacing: 0;
}
th {
    color: #333;
    padding: 5px;
    border-bottom: 1px solid #555555;
    border-left: 1px solid #555555;
    background: #597869;
    font-weight: bold;
    line-height: 120%;
    text-align: center;
}
td {
    padding: 5px;
    border-bottom: 1px solid #555555;
    border-left: 1px solid #555555;
}
tr:nth-child(2n+1) {
    background: #C2EAE0;
}

.text table { }

表全体にかかる設定です。ここでは枠の大きさや枠線についての基本設定をしています。

最初の .text は、当ブログの記事部分のクラスタです。記事本文中の table タグにのみ適用するよう指定しています。

  • width: auto; ・・・ 横幅を自動的にあわせる
  • border: 1px solid #555555; ・・・ 枠線の指定。太さ1px 線の種類solid 線色#555555
  • border-collapse: cpllapse; ・・・ 隣のセルの枠線を重ねて表示する
  • border-spacing: 0; ・・・ 隣のセルとの枠線の間隔

th { }

表最上段の標題部分の設定です。

  • color: #333; ・・・ 文字の色
  • padding: 5px; ・・・ 枠線から文字までの間隔
  • border-bottom: 1px solid #555555; ・・・ セルの底部分枠線の指定。太さ1px 線の種類solid 線色#555555
  • border-left: 1px solid #555555; ・・・ セルの左側枠線の指定。太さ1px 線の種類solid 線色#555555
  • background: #597869; ・・・ セル背景色の指定
  • font-weight: bold; ・・・ 文字を太字に
  • line-height: 120%; ・・・ セル内文字の行間。セル内に2行入力した時の行間
  • text-aline: center; ・・・ 文字の中央揃え

td { }

表2段目からの本体部分の設定です。

  • padding: 5px; ・・・ 枠線から文字までの間隔
  • border-bottom: 1px solid #555555; ・・・ セルの底部分枠線の指定。太さ1px 線の種類solid 線色#555555
  • border-left: 1px solid #555555; ・・・ セルの左側枠線の指定。太さ1px 線の種類solid 線色#555555

tr:nth-child(2n+1) { }

選択した行にのみ適用する設定です。

  • background: #C2EAE0; ・・・ セル(行)の背景色を指定

行の指定はいくつか方法があります。

CSSの記述 指定箇所
tr:nth-child(n) n番目のtrに適用
tr:nth-child(odd) 奇数番目のtrに適用
tr:nth-child(2n+1) 奇数番目のtrに適用
tr:nth-child(even) 偶数番目のtrに適用
tr:nth-child(2n) 偶数番目のtrに適用
tr:nth-child(3n) 3,6,9,12…番目のtrに適用
tr:nth-child(3n+1) 1,4,7,10…番目のtrに適用

シンプルですが、かなり見やすくなりました。

まとめ

表組みというのは、それほど頻繁には使わないと思っていましたが、実は記述が面倒だから無意識に避けていたような気がしてきました。
マークダウン記法と今回の CSS 設定を使えば、驚くほど簡単に表が完成してしまいます。

一度設定してしまえば、Sublime Text のようなマークダウン記法対応のエディタとの併用で、快適に記事や文章を書き進められます。

細かなことの積み重ねで、執筆環境を改善していくと、書くのが楽しくなってきますね。
改善内容も記事ネタになって一石二鳥ですね。

posted by taks at 19:06 | Comment(0) | TrackBack(0) | SeeSaaカスタマイズ
Tuesday,September 06,2016

tableタグはMarkdown記法を使うと簡単だった

table_markdown

それほど頻繁に使うわけではありませんが、記事中に表組を入れる時には、tableタグを使います。
頻繁に使わないからこそ、いざ使おうとした時に忘れてしまっていたり、なによりHTMLの記述がとても面倒です。

tableタグ

こんな表を作ってみました。

項 目 ドリップコーヒー インスタントコーヒー
美味しい まあまあ
手間 手間がかかる 簡単
価格 道具代がかかる コーヒー代のみ

CSSで装飾しているため線や色の表示は実際のデフォルトと違いますが、最上段は、標題で太字の中央揃え。
2段目移行は、左の列が左寄せ、中央は中央揃え、右の列は右寄せにしています。

Htmlでは

HTMLでは、列や行の結合や装飾など複雑な表でも自由に作ることができます。
その分コードは膨大な量になってしまいます。

上の表を普通にHTMLで記述すると、このようになります。

<table>
<thead>
<tr>
<th align="left">項 目</th>
<th align="center">ドリップコーヒー</th>
<th align="right">インスタントコーヒー</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">味</td>
<td align="center">美味しい</td>
<td align="right">まあまあ</td>
</tr>
<tr>
<td align="left">手間</td>
<td align="center">手間がかかる</td>
<td align="right">簡単</td>
</tr>
<tr>
<td align="left">価格</td>
<td align="center">道具代がかかる</td>
<td align="right">コーヒー代のみ</td>
</tr>
</tbody>
</table>

僅かな表組みでも非常に長いコードになってしまいますね。
特に右寄せなどを列ごとに変えたい時など、面倒です。

Markdown記法では

Markdown記法では、複雑な表組を作成するには向いてませんが、数列・数段程度のシンプルな表であれば、非常に簡単に作成できます。

|項 目|ドリップコーヒー|インスタントコーヒー|
|:---|:---:|---:|
|味|美味しい|まあまあ|
|手間|手間がかかる|簡単|
|価格|道具代がかかる|コーヒー代のみ

各項目の区切りに " | " を、文字の位置指定に " : " と " - " を入れるだけです。
左寄せは " :--- " 中央揃えは " :---: " 右寄せは " ---: " を列ごとに指定します。

各セル内の文字列前後のスペースは無視されますので、もっと視覚的に分かりやすく書くこともできます。

| 項 目  |   ドリップコーヒー   |  インスタントコーヒー  |
|:----- |    :----------:    |     -------------:  |
|味      |     美味しい         |             まあまあ |
|手間    |    手間がかかる     |                  簡単 |
|価格    |    道具代がかかる   |        コーヒー代のみ |

こんな書き方をしても、HTMLへ出力すると同じコードになります。

まとめ

スニペットが使えるとタグでも割と作成しやすくなると思いますが、マークダウン記法での最大の利点は、視覚的に分かりやすいことですね。
HTMLタグでの記述は、完成形を想像しながらの作業ですが、視覚的に記述できるマークダウン記法の場合はイメージしやすいです。
ベース部分をマークダウン記法で記述して、HTML変換後細かな修正をしていくという使い方もありだと思います。

SublimeText3を使い始めて、スニペット機能やマークダウン記法の素晴らしさを実感しています。
もっと早く出会いたかった♪

posted by taks at 09:30 | Comment(0) | TrackBack(0) | PC
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。