CSSで簡単な三角形を作るコツ!

triangle-css-cover2

皆さん

技術担当のレミです。

CSSで、どうやって正方形が作れるのだろうか?

> それは、簡単ですよ!あらゆるHTMLエレメントは正方形・長方形が基本ですから。。

ただし、三角形はどうでしょう?

あなたならそれをどうやってそれをCSSで実現しますか?

この記事では、CSSで簡単に三角形を作るためのコツを教えます。

続きを読む

HTMLだけでモーダルを作る方法

cover-image-dialog-html

こんにちは!

フェノメなの開発担当のレミです!

さて、タイトルを見てHTMLだけでモーダルが作れるの?と思った方は少なくないかもしれないですが、はい、作れます。

完全にHTMLネイティブのモーダルです。

続きを読む

画像の配置 その2

こんにちは。すーさんです。

前回に引き続き、画像の配置についてまとめておきたいと思います。
前回は余白の削除でしたが、今回は位置の調整について記載します。
※参考図は位置が分かりやすいようにdivに枠線をつけています。

続きを読む

画像の配置

こんにちは。すーさんです。

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>

fig1

 

 

 

 

 

 

 

これを以下のように変更します。
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>
 

こうすると、余白なく連続して画像を配置することができます。

fig2

 

 

 

 

 

 

 

 ○divで囲んだ画像の余白をなくす
 divタグで画像を囲むことはよくあるのですが、その場合にも何もしないと画像の下に余白ができます。(分かりやすいように、背景色を設定しています)

HTML:
    <div>
        <img src=”img/rect3.png” alt=”rect3″>
    </div>

fig3

 

 

 

 

この場合は、下記のようにCSSで指定すると余白を消すことができます。
CSS:
img{
    display: block;
}

fig4

 

 

 

 

まだあるのですが、今回はここまでにします。

知られていないCSSのコツ : 簡単な自動的CSSナンバリング

numbering-cover

フェノメナ技術担当のレミです。

HTMLの基礎をご存知の方には、番号付きのリストといえば<ol>タグを思いつく人は少なくないでしょう。

しかし、あるCSSプロパティを使うことで <ol> だけではなく、どのHTMLエレメントでもナンバリングを使うことができるようになります。

更に、HTMLに一切数字を記述せずに、細かい目次まで自動的に作れてしまうのです!

続きを読む

Gracefull Degradation と Progressive Enhancement の概念紹介

こんにちは

フェノメナ技術担当のレミです。

今日はGracefull Degradation (グレイスフル デグラデーション) と Progressive Enhancement (プログレッシブ エンハンスメント)、という概念について紹介させて頂きたいと思います。

英語でウェブ技術に関する記事を読む方は、よく見たことのある言葉かと思います。

この二つについての定義は様々であり、困難なことだという印象を持った方は少なくないでしょう。でも実は、非常に簡単なことです。

Gracefull DegradationとProgressive Enhancementの最もポイントとなる要素をわかりやすく説明させて頂きます。

続きを読む

このブログから情報発信しているUIデザイン専門家集団のホームページ :
フェノメナエンターテインメント株式会社