css3 レスポンシブイメージの設定
レスポンシブデザインwebサイト制作css3img要素を画面幅によって切り替えたい場合、以前はJavascript等でwindow幅によって画像のファイル名を変える、などの方法が取られていましたが、html5.1,で策定された「レスポンシブ...
2020-01
css3 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を参照する ...
webサイト制作 webサイトの主なレイアウト
webサイト制作webデザインレイアウトを考える時に常に独創的でユニークなレイアウトである必要はありません。それどころか訪問者の多いサイトを見れば、多くのサイトで似たようなレイアウトが採用されています。それは偶然でも手抜きでもありません。そ...
webサイト制作 サイトマップとディレクトリマップ
webサイト制作サイトマップサイトマップとは、サイトの全体像を描く見取り図であり、サイト内での情報の分類を定義するものです。サイトマップによってサイトの骨格を設計し、掲載する情報の組織化・構造化を進めていきます。サイトマップには単なる設計資...