css3 object-fitを使って動画を要素にはめ込む
css3object-fitプロパティは、置換要素（img要素やvideo要素など）をボックスにどのようにはめ込むかを指定する際に使用します。fill置換要素（img要素やvideo要素など）をボックスサイズに合わせて縦横比を維持しないでリ...
web-design
css3 Photoshop GIFアニメーション
PhotoshopGIFアニメーション（ジフアニメーション、GIF animation）は、Graphics Interchange Format (GIF) の「マルチイメージ」を使ったアニメーション。アニメーションGIF (animat...
css3 レスポンシブイメージの設定
レスポンシブデザインwebサイト制作css3img要素を画面幅によって切り替えたい場合、以前はJavascript等でwindow幅によって画像のファイル名を変える、などの方法が取られていましたが、html5.1,で策定された「レスポンシブ...
Photoshop トンマナを合わせたバナー作り
Photoshopwebデザイントンマナ とは、「トーン＆マナー」の略で、 広告 におけるデザインの一貫性を持たせることを指します。 また、ブランドのイメージカラーとホームページのデザインカラーを合わせる必要があるなど、「 トンマナ 」は企...
css3 background-attachmentを使ったパララックス 風サイトの作成
css3パララックスとは視差の効果を用いて、サイトに動きをつける事です。多くの場合はスクロールする際に複数の要素に異なるスピードにスクロールするように設定する事で視差が生じ、結果としてレイヤー構造を意識出来る重層的なデザインになります。po...
webサイト制作 ワイヤーフレーム の作成
webサイト制作webデザインワイヤーフレームとは「サイトの設計図」です。サイトを作成する前に「何を・どこに・どのように」画面に配置するかを明らかにする事で、実際の作成作業をスムーズに進める事が出来ます。また複数人で作業する場合やクライアン...
webサイト制作 cssで作るメガドロップダウンメニュー
webサイト制作メガドロップダウンメニュー最近よく見かけるメガドロップダウンメニュー。特にコーポレートサイトなど情報量が多いサイトでは、リンク先のページに飛んでからさらにそのページの中から目当てのコンテンツを探さなければならない、といった手...
css3 background-clipとtext-fill-colorを使ってcssを使って文字で画像を切り抜く
css3以前、Photoshopでクリッピングマスクを使い、文字で画像を切り抜く加工を行いましたが、css3の「background-clip」と「text-fill-color」を使う事で同じような表現が出来るようになります。backgr...
jQuery スクロールに合わせて要素にアニメーションをつける「Animate on scroll library」
jQueryスクロールに合わせて「Fade」「Flip」「slide」「Zoom」の4種類のアニメーションを簡単に実装出来、「duration」などの細かい設定も行えるスクロールアニメーションのプラグインAOSを実装してみましょう。mich...
css3 画像や要素をcssでクリッピングする「clip-path」
css3clip-pathプロパティclip-pathCSSプロパティは要素のどの部分を表示するかを定義するクリッピング領域を作ります。クリッピング領域の内側が表示され、外側は隠されます。クリッピング領域はインラインや外部SVGを参照する ...