webサイト制作の勉強|2017月7月クラスブログ

webサイト制作の勉強に関する解説ブログです。

css3

CSS3 filterでの画像加工

今までPhotoshopで行っていた、ぼかしやグレースケールなどの加工がcssだけで可能になりました。 それにより、フェルタ毎に複数の画像を用意する必要がなくなります。 cssのfilterプロパティで出来る事 grayscale(グレースケール) saturate(彩度) sepia…

Flexboxの使い方

Flexbox(Flexible Box Layout Module)はCSS3の新しいレイアウトモジュールで、複雑なレイアウトを今までより少ないコードでフレキシブルなボックスを組むことが出来ます。以前からあった技術ですが、各ブラウザーによって書き方が違ったり、仕様が変わった…

スクロールアニメーション「SCROLL TRIGGER」の実装

ページのスクロールと連動して文字や画像に様々なエフェクトで要素が表示されていくスクロールアニメーション、Javascriptプラグイン「SCROLL TRIGGER」 jQuery不要で動くので動作も軽く、比較的簡単に設定できます。 ScrollTrigger - Scroll based animatio…

SVGを使ったアニメーション

carlphilippebrenner.comtympanus.netgardenstudio.com.brjakearchibald.com SVGとは? SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。 ベクター画像は画像をビットマップ形式ではなく、…

CSS3によるアニメーション・animation

CSS3によるアニメーションは大きく分けて、トランジション(transition)とアニメーション(animation)の2つに別ける事が出来ます。CSS3におけるトランジション(transition)とアニメーション(animation)の違い 「transition」 動かすために:hoverなど…

画像をレスポンシブに対応させる(可変にする)

画像をレスポンシブに対応させる為にはたった2種類のやり方しかありません。img画像であればフルードイメージ化させる。background画像であれば、background-sizeの指定をする。 この2種類の使い方と特徴を覚えれば、画像に関しては問題なくレスポンシブに…

縦書きとrubyタグの使い方

「webは横書きが当たり前」そんな常識は変化しつつあります。 実はwebにおける縦書きの取り組みは、Internet Explorer5.5(2000年)が独自に実装していましたが、他のブラウザーでは実装されていませんでした。CSS3の策定を機会に最新の主要なウェブブラウザは…

覚えると便利なnth-child()

これまでの授業でもCSS3の疑似クラス「:nth-child(odd)」「:nth-child(even)」や「:nth-child(3)」は使って来ましたが、()の内に数式を入れる事で非常に便利になります。「:nth-child(2n+1)」= 「:nth-child(odd)」(奇数のみ指定)計算式 n=0: 2*0+1= 1 =…

SVGの使い方

SVGとは? SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。 ベクター画像は画像をビットマップ形式ではなく、線や面などの図形の集合体として扱うため、見る環境に応じて最適な表示が可能…

Flexboxの応用

前回の記事でFlexboxの便利さがなんとなく判ったと思います。今回はもう少し具体的な使い方をしていきます。 今回は 高さが分からないフッタを常に最下部に表示 高さが分からない要素を天地左右の中央に配置 Flexboxを使った柔軟なグリッド philipwalton.git…