vanillaice (Akira)

vanillaice (Akira)

なかなかこう浸透しないですよね (´・ω・`)
HTML5では意味・構造を司るHTMLと 装飾を司るCSSを分けて書かなければいけないという一つの大きなルール
従来のHTML4というのはHTML自体で装飾が行われていましたので
頭を切り替えるのが大変なようです

文字を太くする
文字を大きくする
文字に打ち消し線を引く
文字に色をつける
要素の位置合わせを左寄せ以外にする
表や画像の周りにボーダーをつける
表の背景に色をつけたり画像を敷いたりする
等々

上記全て「装飾」に分類されます
文字関連などはほとんどがそうですね
そして「位置の合わせ」これも装飾の分野です
webの基本というのは「左寄せ」ですから それ以外に変更するのは「装飾」扱いです

例えば
<font>
というタグがありますよね
文字に関する取り決めを扱うためのタグです
これもHTML5では廃止になっています
廃止になったらいつかwebページでは使えなくなるのか
と言えば その可能性は低いと思います
フォント = テキスト
ですから webページからテキストが消えてしまったら大変なことです
各ブラウザ単位で恒久的にサポートされていくだろうと予想されています
ただし
そのページの規格・構成がHTML5になっていないのならば という前提で良いと思います
テンプレートの一番初めに
「以下の内容はHTMLバージョン4.01ですよ」
「以下の内容は4でstrictですよ」
「以下の内容はXHTMLですよ」
「以下の内容はHTML5ですよ」
といった宣言が行われますが
その宣言がHTML5なのであれば 廃止と認定されている
<font>
タグは使えないと思ってください

ならばHTML4のものを使えば楽だ
と思われるかもしれませんが
いずれはどこのサイトもHTML5が「主流」であり「基本」になっていきます
例えばどこかのサイトへ行って いつもの要領で表を作成しようとします
ところがそのレイアウトが全く受け付けてもらえない
何故だろう
それはそのサイト自体がHTML5で書かれており 5に準ずるタグ構成しか扱えないのかもしれません

今回はHTML5で扱えるfloatのソース雛形です
tableについては過去記事にありますのでご参照ください
あくまで雛形ですので 他にも書き方はありますし ご自分で変更するべきところは変更しつつお使いください

見本を掲載しますので ブラウザ幅をなるべく小さくしてご確認ください
横幅が広いと文字が下へ繰り越さずに載ってしまうので(笑)


パターン①

bycicle-greyscale-wooden-box-photo-hd-wallpaper_R_zps180995bas.jpgLorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur luctus elementum libero quis ornare. Maecenas quis fermentum quam, vitae dictum nibh. Pellentesque at ante bibendum mauris dapibus tristique ut sit amet erat. Aliquam volutpat massa at justo consectetur congue. Aenean volutpat et dolor in cursus. Fusce arcu urna, auctor vitae augue in, interdum mattis nunc. Nunc efficitur mauris sed vulputate facilisis. Nullam consectetur odio felis, et pretium nulla iaculis at. Donec placerat mauris vel dolor cursus, at pulvinar sem tristique. Sed gravida, nisl id suscipit imperdiet, erat mi pellentesque quam, non iaculis mi tortor at libero. Maecenas tincidunt lacus id dapibus sagittis. Quisque tincidunt ullamcorper sapien eu fringilla.



パターン②

bycicle-greyscale-wooden-box-photo-hd-wallpaper_R_zps180995bas.jpgLorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur luctus elementum libero quis ornare. Maecenas quis fermentum quam, vitae dictum nibh. Pellentesque at ante bibendum mauris dapibus tristique ut sit amet erat. Aliquam volutpat massa at justo consectetur congue. Aenean volutpat et dolor in cursus. Fusce arcu urna, auctor vitae augue in, interdum mattis nunc. Nunc efficitur mauris sed vulputate facilisis. Nullam consectetur odio felis, et pretium nulla iaculis at. Donec placerat mauris vel dolor cursus, at pulvinar sem tristique. Sed gravida, nisl id suscipit imperdiet, erat mi pellentesque quam, non iaculis mi tortor at libero. Maecenas tincidunt lacus id dapibus sagittis. Quisque tincidunt ullamcorper sapien eu fringilla.



手順としてはソースをそのまま記事作成画面にコピペで貼り付け
必要箇所を変更するだけです

①雛形

<a href="画像アドレス" target="_blank"><img src="画像アドレス" alt="代替テキスト" style="width: 150px; height: auto; float: left; margin-right: 20px;"></a>ここに文章
<div style="clear: both;"></div>


②雛形

<a href="画像アドレス" target="_blank"><img src="画像アドレス" alt="代替テキスト" style="width: 150px; height: auto; float: right; margin-left: 20px;"></a>ここに文章
<div style="clear: both;"></div>



-------------

まず
<a>
開始タグから始まって
<img>画像の内容
を挟んで終了タグ
</a>
まで
こちらはFC2エディターの以下のツールから自動生成です



実際の内容は
<a href="画像アドレス" target="_blank"><img src="画像アドレス" alt="代替テキスト" border="0" width="150" height="94" />


こんな風なんですけどもね
この赤字の部分があまりよろしくないんです (´・ω・`)

★ 代替テキストの部分はエディターが画像アドレスの末尾を拾って自動的に挿入されますが
SEOを気にされる方は自分で適切な文字列を入れた方が良いですね
例えば京都の写真ならば

alt="京都の秋"

こんな感じで
画像から検索された方が辿りつく可能性がグンとUPします

★ border や width 及び height をHTMLで直接指定している点
こちらも余力があれば変更されると良いと思います
その方がより valid(正確, 妥当, 適切)なコード内容になります
書き方は width か height いずれかのサイズだけ数値記述すれば良いです
で もう一方へは auto 指定
そして末尾のスラッシュも不要です

一番重要なのは

<div style="clear: both;"></div>

これを絶対に忘れないことです
floatというのは後続のレイアウトに影響を及ぼしますので
floatが終了したことを宣言し さらに通常の状態に戻す必要があります
そのための記述が上の通り

本当はもっと粋なやり方がありますし
私のテンプレに限定しますとfloat解除の仕方は別の方法があるのですが
汎用的に使える内容 一番わかりやすい簡単な内容 ということでこの雛形です
floatが終わったらすぐに書く
と覚えておくと良いですね

この雛形ソースを貼り付けてfloat自体を生成し
その次に エディターツールを使用した文字装飾 です
floatさせる文章を書きながらツールを使うのではなく
文章を書き終えた上で 該当文字列をドラッグ選択してからツール使用
この順番
装飾しながら文章を書くと大抵失敗します(笑)
(この内容は一つ前の記事と関連します)

float: 画像を寄せたい方向;

margin-方向: 数値px; (画像のどちらにいくつの空白を作るか)



ちなみに個人的には日本語訳の「回り込み」という表現がしっくりこない (´・ω・`)
「浮かせ」ですね 本来の意味や挙動はね(笑)
関連記事

Comments 4

There are no comments yet.
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/10/04 (Sun) 18:43 | EDIT | REPLY |   
Akira  
To W3Cバリデーションの件 内緒さん

ありがとうございますe-257

確認ですが、私のそのページをバリデートにかけた、ということでお間違いないでしょうか。
えっと。心当たりはあります(笑)
エラーの判定になってる所はFacebook 及び Twitterシェアの

not a URL code point

だと思います。
これ何故エラーかと言いますと、私の「記事タイトル」のつけ方に問題があります。

Blackout/ Breathe Carolina

こう書いてます。
この中に「半角スペース」が2か所ありますよね。
これが「エラー」です (´・ω・`)
要するにW3Cは「文字エンティティ使いなさい」ってことを言ってます。
文字エンティティ = 一部の特殊記号を実体文字ではなく参照文字表記にしてしっかり書く(エスケープ)

半角スペースと改行は連続して並んでいると全て改行の扱いになってしまうことがあったり、混同される文字なんです。
それを避けるために実体文字を使うな、ってことですね (´・ω・`)
以下 コメント欄で文字エンティティ使うと実体文字に変換されますのでなんのこっちゃかもしれませんが...。


半角スペース =   (あんど えぬ びー えす ぴー せみころん) no break space
& = & (あんど えー えむ ぴー せみころん ) ampasand
" = " (あんど きゅー ゆー おー てぃー せみころん) (double)quotation

これらがそうです。
というわけで、内緒さんのエラーも同様に
記事タイトルに半角スペースが入っているのが原因です。
めんどくさいね ^^;

あんまりこう、必要以上にバリデーションに拘るのも良くないと思いますよ (´・ω・`)
だって私たちは日本という国で大変特殊な「日本語」を扱う人種ですよね。
そもそもアルファベットと日本語ではバイト数から違うわけです。
あと、FC2で純粋な100点満点を取るのは不可能ってのもあります。
私は「バリデーションクリア」を謳ってはいますけれど、あくまでも私が書いたテンプレ内容のみです。
FC2の仕様によるalt抜けなんかは無視((((笑)
ie8のセキュリティサポートが終了したら本格的にHTML5準拠を進める可能性もありますけどね。
あまり期待せず待つ(笑)

* 該当ページ(blackout) 修正しましたので再度バリデート確認お願いします。

2015/10/05 (Mon) 10:02 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/10/05 (Mon) 14:32 | EDIT | REPLY |   
Akira  
To validationの件 内緒さん

あらー ( ̄∀ ̄;)
HTMLソースの内容を触ってしまった、ということでしょうかね。
コメント欄を利用しての説明がとっても難しいんです。
エンティティ文字を入れて内容を送信(submit)した時点で実態文字に変換されてしまいます(笑)

Facebook等、SNSアイコン以降のレイアウトが崩れてしまったということですので、一旦そちらは破棄されまして再度DLされると良いかな、と思います。
もちろんカスタマイズ済みの内容も失われてしまいますが。
ソースコード自体は正しい記述ですので、not a URL code point が出るということは記事タイトル記述以外に考えられませんですー (´・ω・`)

&
"
半角スペース
¥

これら全て引っかかります。

2015/10/05 (Mon) 19:58 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
該当テンプレートの専用記事にお願いします。無関係な記事でのコメントはお控えください。
テンプレートカテゴリ