Grad3
CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス
CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。 【アップデート: 2022年6月16日】 IEがサポート終了したことにあわせて、修正しました。 【アップデート: 2021年8月1日】 Flexboxの解説を2021年の現状にあわせて、修正しました。 【アップデート: 2020年8月23日】 Flexboxの解説を2020年の現状にあわせて、修正しました。 【アップデート: 2019年3月27日】 Flexboxの解説を2019年の現状にあわせて、修正しました。 【アップ
background-size－CSS3リファレンス
background-sizeプロパティは、背景画像のサイズを指定する際に使用します。 長さやパーセンテージで指定する場合、値を２つ記述すると、それぞれ記述した順に幅と高さを表します。 １つだけ指定した場合には、もう１つはautoと解釈されます。負の値を指定することはできません。 ■値 auto 自動的に算出される（初期値） contain 縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する cover 縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する 長さ 背景画像の幅・高さを指定する パーセンテージ 背景領域に対する背景画像の幅・高さのパーセンテージを指定する CSSソースは外部ファイル（sample.css）に記述 p.sample1 { width:300px; height:80px; padding:15px; bo
【CSS3】わずか2行の CSS3 でmarqueeを再現する方法。
先日、スマートフォン専用サイトの制作を依頼されまして、その際、marquee タグによるデザインを同時に打診されました。 しかしながら、HTML5ではmarqueeタグは非推奨。 今後は廃止予定のタグということで、別の方法を模索。 jQueryでの実装も考えましたが、CSS3を使ってより簡単にmarqueeを再現できるので、コチラを採用しました。 実際のコードは以下。 .marquee { overflow:-webkit-marquee; white-space:nowrap; } これだけでOK! とりあえず、Android 2.3以降のデフォルトブラウザ・iOS5以降Safariでは問題なく動作します。 他の端末や対応していないブラウザでの挙動が怪しいのが難点です。 細部までこだわるなら、動き方、動く範囲、動くスピード、繰り返す回数など、それぞれ任意に指定できます。 -webkit-
reveal.js - The HTML Presentation Framework
Hello Therereveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. Vertical SlidesSlides can be nested inside of each other. Use the Space key to navigate through all slides. Basement Level 1Nested slides are useful for adding additional detail underneath a high level horizontal slide. Basement Level 2That's it, time
[CSS3]なんでも点滅させる小ワザ ｜ しらさかブログ
CSS3のanimationプロパティ使うと、なんでも点滅させることができます！ （現在、Chrome3以降、Safari4以降でしかサポートされていません） とりあえず、CSSファイルに、下記ソースをコピペしてみましょう。 @-webkit-keyframes pulse { from { opacity: 1.0;/*透明度100%*/ } to { opacity: 0.8;/*透明度80%*/ } } .blinking{ -webkit-animation-name: pulse;/* 実行する名前 */ -webkit-animation-duration: 0.3s;/* 0.3秒かけて実行 */ -webkit-animation-iteration-count:infinite;/* 何回実行するか。infiniteで無限 */ -webkit-animation-tim
![[CSS3]なんでも点滅させる小ワザ ｜ しらさかブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/072ca1f71fdf67b5c3238bdc976312dbbbe3fa40/height=288;version=1;width=512/https%3A%2F%2Fshirasaka.tv%2Fimg%2Fogp.jpg)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
