ユーザーブロマガは2021年10月7日(予定)をもちましてサービスを終了します

画像を多用しても読みやすいHTMLソースコードを配布
閉じる
閉じる

新しい記事を投稿しました。シェアして読者に伝えましょう

×

画像を多用しても読みやすいHTMLソースコードを配布

2013-04-22 16:28

    崩れないページデザイン

    「鍛造さんのページデザインって画像多用しても崩れてないですよね」とついさっき言われました。

    確かに画像を多用していると見たまま編集では思った通りの結果が得られなかったりします。

    画像を左へ寄せて講座系記事なんか書いているときは、PCだと綺麗に成形されているのに、スマホで見てみると残念な結果になりがちです。

    ということで今回私が使っているHTMLコードを配布しますね。

    利用はご自由にどうぞ。


    HTMLソースコード

    <div style="text-indent:1em;line-height:1.5;margin:0;">

    <h2 style="text-indent:0em;">見出し</h2>

    <img data-ubi="画像のID" src="画像のURL" width="200" style="display:block;margin-left:0px;margin-right:5px;float:left;" alt="">

    <p>いろはにほへと</p>

    <p>ちりぬるを</p>

    <p>わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせす</p>

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


    解説

    前述のHTMLコードを使うとNicoHack!第五回 AndroidOSで至高のギーク環境を手に入れる!みたいなページデザインになります。

    HTMLの構造はこんな感じで<div〜/div>を1つのグループとしてまとめているんです。

    特徴は自動的に文頭へ1文字分のインデントを加えてくれることですね。

    文章が長文化しても読みやすくなってます。小説とかでも使えますね。

    このコードを用いると講座系記事がすっきりとした読みやすいデザインとなるのでオススメです。

    まあこんな感じでページデザイン崩れず読みやすさを意識した記事作りを私は行なっています。

    上手く画像が扱えないと悩んでる人は活用してみてくださいね。

    以上です。長文にお付き合いいただきありがとうございました。



    広告
    コメントを書く
    コメントをするには、
    ログインして下さい。