Let's have a hobby!

多趣味な管理人が綴る雑記趣味ブログ   ~趣味を持とう!~

テンプレート
え?趣味が多い?そんなの関係な~い!人生、楽しく送らなきゃ。
せっかく与えられた 「人生」という名の時間 を自分の思うままに使って何が悪い!

~Enjoy your life!~


貴方は、 人目くらいの訪問者です。

【はてブロ限定!】すぐに役立つHTML できれば使いたい編

前回の記事はコチラ↓

www.kasyainu.com


 

前回は、簡単かつ便利なモノを紹介しました。

今までの事ができていれば、ブログの表現の幅がグッと引き上がる事でしょう。

パソコンをする人と講師

今回は、前書き編」「基本編」「簡単&便利編」「できれば使いたい編」「使わない?編の4つ目となります。CSSが混ざってくるので、チョイと複雑です。

でも、表現の幅が大きく広がるので、頑張ってみる価値あり

 

「一部に背景を設定」「一部を囲う」「半角自動改行」の3つを見ていきましょう。

 

 

CSSって?

「HTML」の記事なのにCSSってなんやねん!

なんて、声が聞こえてきそうなので、ザックリと解説しますね(^^;)

 

まずはWikipediaさんに頼ります(笑)

Cascading Style Sheets(CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート)とは、HTML や XML の要素をどのように修飾(表示)するかを指示する、W3Cによる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。

CSSはHTMLで表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ、新たなデザイン機能を備える。また、以下のような特徴を持つ。

  • ページを表示するメディアに合わせてスタイルシートを切り替えることで、メディアごとに表示を変化させることができる
  • ユーザーエージェント(多くの場合ウェブブラウザ)、ウェブサイト制作者、ユーザがそれぞれ定義したCSSのもたらす効果を重ね合わせる(カスケードする)ことができる

 

「ウィキペディアを引用する」『フリー百科事典 ウィキペディア日本語版』より。
2016年6月19日 (日) 21:27 UTC 参照:Cascading Style Sheets - Wikipedia

お~、なるほどね?

 

作りながら学ぶ HTML/CSSデザインの教科書

作りながら学ぶ HTML/CSSデザインの教科書

 

 

原則的な住み分けがこういう事。

  • HTML...文字!
  • CSS...飾り!

HTMLではできないようなデザインが、CSSでできてしまうのです!

そんな訳で、コレが分かると、表現技法飛躍的に広がります。

 

CSSの構造

じゃあ、CSSをどうやって入れるのか?

大きく分けて、2つあります。

HTMLに入れるか、外に出すかです。

 

HTMLに組み込む

HTMLの中に入れるのは、はてなブログではややこしくなるので、 今回は割愛します。

はてなブログでなくとも、CSSは別にした方がメリットが多い(HTMLがスッキリする、読み込みが早くなるetc...)です。

 

HTMLの外に作る

はてなブログの場合は、コチラがメイン。

「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」

ココにCSSを書き込むことで、ブログ記事のHTMLに反映させることができます。

Web上での見え方HTMLCSS

 

色を付けてみる。

 

 

<p align="center">

色を付けてみる。

</p>

 

 

p{

color: red;

 

こんな具合です。前回を踏まえて真ん中揃えも入れてみました。

流石に、セルを4つ並べるのは気が引けたので、CSSだけを改めて取り出してみます。

CSS意味

 

p{

color:red;

 }

 

 

p範囲の指定開始

色は赤

p範囲の指定終了

 

 

単純でしょ?

見たまま編集の「大見出し」を設定すると、HTMLは<h4>~</h4>となります。ココをいじりたかったら、pのトコロをh4に変えてやるだけです。

 

 

CSSでは、デザインを決められるんだ~くらいに覚えておけば合格点です('ω')

 

一部に背景を設定

 こういうやつです。

Web上での見え方HTMLCSS

 

色を付けてみる。

一段落だけの時はの中でOK。

 

 

<div class="back-gray">

<p>

色を付けてみる。

</p>

<p>

一段落だけの時は<p>の中でOK。

</p>

</div>

 

 

.back-gray{

background: #f0f0f0;

padding: 30px;

margin: 5px;

}

 

HTML
  1. 「class="〇〇"」クラスタグ
    CSSの中での〇〇で指定した装飾を着けます。入れる文字は自由です。

CSS

  1. 「.〇〇{△△;}」
    HTMLで指定したclassの内容を指定します。
  2. 「background: 〇〇;」
    背景を指定します。〇〇に入るのは、カラーコードです。
  3. 「padding: 〇〇px;」
    文字からの上下左右の余白を指定します。ココが背景の領域(色がつくところ)になります。値の数が1つだと上下左右。2つだと上下と左右。3つだと上と左右と下。4つだと上と右と下と左。
  4. 「marigin: 〇〇px;」
    背景の領域の外側をどのくらい空けるかを指定します。

目立たせたいトコロに指定すれば、goodですね!

注意

「見たまま編集」では、変化がないので気を付けましょう。確認したい場合は「プレビュー」でみましょう。

一部を囲う

コレは、上記の「一部に背景を設定」とまるっきり同じになります。

一応、分けましたが、考え方は同じ。背景の指定を線に変更するというだけです。

Web上での見え方HTMLCSS

 

枠で囲ってみる。

一段落だけの時はの中でOK。

 

 

<div class="border">

<p>

枠で囲ってみる。

</p>

<p>

一段落だけの時は<p>の中でOK。

</p>

</div>

 

 

.border{

border: 2px solid #444444;

padding: 30px;

margin: 5px;

}

 

みたいな感じ。

  1. 「border: 〇〇px △△ ◇◇;」
    指定した個所を線で囲います。〇〇は太さ。△△は線のスタイル。◇◇は色。

新しく出てくるのは、コレだけですね。

注意

「見たまま編集」では、変化がないので気を付けましょう。確認したい場合は「プレビュー」でみましょう。

 

スタイルいろいろ

線のスタイルは色々あります。△△に入れるモノです。見ていきましょう。

  1. 「none」
    何も表示されません。指定しないのと同じ。初期状態。
  2. 「hidden」
    こちらも何も表示されません。これも、何も指定しないのと同じ。
  3. 「solid」
    1本線。
  4. 「double」
    二重線。
  5. 「dashed」
    破線。
  6. 「dotted」
    点線。
  7. 「groove」
    立体的に窪んだ線。
  8. 「ridge」
    立体的に浮き出た線。
  9. 「inset」
    左上が暗く、右下が明るい線。全体が窪んだ様に見える。
  10. 「outset」
    左上が明るく、右下が暗い線。全体が浮き出た様に見える。

基本はこんな感じです。工夫のしようによって表現の幅が広がりますね。

 

半角自動改行

まずは、コチラをご覧ください。

 

3.14159265358979323846264338327950288419716939937510582097494459230781640628620899862803482534211706798214808651

 

円周率ですが…

ブログの表示枠から逸脱しますよね?サイドバー領域すら超えて伸びています。もっと伸ばせばいくらでも伸びます(笑)

 

何故、ぶち抜けるのか?

理由は簡単。

 

「半角」だから。

 

それだけです。

日本語は、単語の途中で改行されてしまっても読む事ができますね?全角である日本語は、どんな位置であろうと、(何も指定しなければ)問答無用で改行されます。

 

でも、半角である英語は出来ません。どうしても切りたい場合は「-(ハイフン)」を入れるルールです。

英語は、意味の区切れにスペースが入ります。コレが、改行のチャンスであると認識し、手頃な位置で改行してくれます。これは、半角であれば、英語でも数字でも同じです。

 

...では、半角スペースが無かったら?

意味の切れ目を見出すことができず、ズルズルと改行できないまま引っ張ってしまいます。

これが、ぶち抜ける原因です。

 

対処法

ココでCSSの出番です。もはやHTMLは関係ありません(笑)

「半角で、意味の切れ目が分からない時は、端まで来たら改行しちゃってイイよ!」って、教えてあげればいいのです。

p {word-break: break-all;}

コレだけ、CSSに書き込みましょう。

範囲指定は「p」にしました。

はてなブログにおいて、見たまま編集での文章は、必ず「<p>~</p>」の段落タグに挟まれます。なので、実質的にすべての文章に適応させるのです。

 

すると先ほどの円周率は、こうなります。

3.14159265358979323846264338327950288419716939937510582097494459230781640628620899862803482534211706798214808651

途中で強制改行されましたね!

 

一件落着ですヽ(^。^)ノ

 

【オマケ】「目次」をつける

 意外と分からない人が多いらしいので、書いておきます。

この記事の冒頭にあるような、箇条書きの目次。見出しだけが並んでいてクリックすると、そこに飛んでくれるものです。

これは、はてなブログ限定の機能です。

staff.hatenablog.com

 

目次を入れたい場所にコレを入れましょう。

[:contents]

どの編集方法でも、コレを書くだけで自動的に見出しが生成されるのです!

※このブログでは、目次をCSSで色々イジっていますので、デフォルトとは見え方が異なります。

 

まとめ

  • 大事な文章に背景を付けると読みやすい!
  • 囲う事もできる!
  • スペースの無い半角連チャンは改行できない→「自動改行」を!
  • 記事に「目次」があると分かりやすい!

 

スラスラわかるCSSデザインのきほん

スラスラわかるCSSデザインのきほん

 
わかばちゃんと学ぶ Webサイト制作の基本

わかばちゃんと学ぶ Webサイト制作の基本

 

 

以上で「できれば使いたい編」終了です。

次回は最終回。「使わない?編」です。使い道が少なかったり、知らなくても問題ないようなモノを集めてみました。

知ってると、なんかの時に役立つかなー?って程度のモノです。

でも、こういう小さな差が大切だったりしますよ!

 


次回の記事はコチラ↓

www.kasyainu.com



Copyright (C) 2012-2017 Let's have a hobby! All Rights Reserved.