css
画像の配置
こんにちは。すーさんです。
HTMLで画像やテキストをレイアウトする時に、よく使うパターンなのに忘れてしまって毎回調べていることについて、備忘録を兼ねてまとめておきます。
今回は画像を配置したときにできる謎の隙間についてです。
○画像を並べたときにできる余白をなくす
数枚の画像を連続して並べたときに、意図しない余白ができることがあります。
HTML：
<body>
<img src=”img/rect1.png” alt=”rect1″>
<img src=”img/rect2.png” alt=”rect2″>
<br>
<img src=”img/rect2.png” alt=”rect2″>
<img src=”img/rect1.png” alt=”rect1″>
</body>
これを以下のように変更します。
CSS:
div {
line-height: 0;
}
HTML：
<body>
<div>
<img src=”img/rect1.png” alt=”rect1″><img src=”img/rect2.png” alt=”rect2″><br>
<img src=”img/rect2.png” alt=”rect2″><img src=”img/rect1.png” alt=”rect1″>
</div>
</body>
○divで囲んだ画像の余白をなくす
divタグで画像を囲むことはよくあるのですが、その場合にも何もしないと画像の下に余白ができます。(分かりやすいように、背景色を設定しています)
HTML：
<div>
<img src=”img/rect3.png” alt=”rect3″>
</div>
この場合は、下記のようにCSSで指定すると余白を消すことができます。
CSS：
img{
display: block;
}
まだあるのですが、今回はここまでにします。
知られていないCSSのコツ : 簡単な自動的CSSナンバリング
フェノメナ技術担当のレミです。
HTMLの基礎をご存知の方には、番号付きのリストといえば<ol>タグを思いつく人は少なくないでしょう。
しかし、あるCSSプロパティを使うことで <ol> だけではなく、どのHTMLエレメントでもナンバリングを使うことができるようになります。
更に、HTMLに一切数字を記述せずに、細かい目次まで自動的に作れてしまうのです！
Gracefull Degradation と Progressive Enhancement の概念紹介
こんにちは
フェノメナ技術担当のレミです。
今日はGracefull Degradation (グレイスフル デグラデーション) と Progressive Enhancement (プログレッシブ エンハンスメント)、という概念について紹介させて頂きたいと思います。
英語でウェブ技術に関する記事を読む方は、よく見たことのある言葉かと思います。
この二つについての定義は様々であり、困難なことだという印象を持った方は少なくないでしょう。でも実は、非常に簡単なことです。
Gracefull DegradationとProgressive Enhancementの最もポイントとなる要素をわかりやすく説明させて頂きます。
window, document, body のonload,onreadyイベントのそれぞれの違いの解説
フェノメナ技術担当のレミです。JavaScriptを書くにあたって、onload や onreadyの様なイベントを使うことは少なくはないです。
ここでは、最初にページがロードしたときにアクションを起こしたいといった場合を想定します。
さて、
body.onload
body.onready
document.onload
document.onready
window.onload
window.onready
。。。のどれを使えば良いのでしょうか。
このブログから情報発信しているUIデザイン専門家集団のホームページ :
フェノメナエンターテインメント株式会社