css3 cssのdisplay:grid を使ってグリッドレイアウトを作ってみる
css3CSSグリッドレイアウトは、 表と同様に簡単に段組等が作れ、グリッドレイアウトによって要素を列と行に整列させることができます。CSSグリッドを使用する事で表で実現するよりもより複雑なレイアウトが可能で簡単に実現できます。またflex...
css3
css3 css3 cssのクラス命名規則
css3webサイト制作小・中規模でのサイト制作では、それほど明確なcss設計をしなくても問題は起こりませんが、大規模案件になるとhtmlもcssもかなりの量になり、css設計がないと保守性が悪くなってしまったり、意図しないところに影響して...
css3 cssだけでドロワーメニューを作る
css3授業ではjqueryを使ってハンバーガーメニューを作成しましたが、jqueryを使わずにcssのみでも作成出来ます。ただ要素の使い方が非常に癖があり、これはこれで解り辛さがあります。また、細かい要素の指定方法が必要になるので、「~」...
css3 object-fitを使って動画を要素にはめ込む
css3object-fitプロパティは、置換要素（img要素やvideo要素など）をボックスにどのようにはめ込むかを指定する際に使用します。fill置換要素（img要素やvideo要素など）をボックスサイズに合わせて縦横比を維持しないでリ...
css3 レスポンシブイメージの設定
レスポンシブデザインwebサイト制作css3img要素を画面幅によって切り替えたい場合、以前はJavascript等でwindow幅によって画像のファイル名を変える、などの方法が取られていましたが、html5.1,で策定された「レスポンシブ...
css3 background-attachmentを使ったパララックス 風サイトの作成
css3パララックスとは視差の効果を用いて、サイトに動きをつける事です。多くの場合はスクロールする際に複数の要素に異なるスピードにスクロールするように設定する事で視差が生じ、結果としてレイヤー構造を意識出来る重層的なデザインになります。po...
css3 background-clipとtext-fill-colorを使ってcssを使って文字で画像を切り抜く
css3以前、Photoshopでクリッピングマスクを使い、文字で画像を切り抜く加工を行いましたが、css3の「background-clip」と「text-fill-color」を使う事で同じような表現が出来るようになります。backgr...
css3 画像や要素をcssでクリッピングする「clip-path」
css3clip-pathプロパティclip-pathCSSプロパティは要素のどの部分を表示するかを定義するクリッピング領域を作ります。クリッピング領域の内側が表示され、外側は隠されます。クリッピング領域はインラインや外部SVGを参照する ...
css3 スマートフォンの時だけを有効にする
css3スマートフォンやタブレットでウェブサイトを見ている時、ボタンにタップすると通話発信ができるようにするためには電話番号用のtelリンクを設定する必要がありますが、一部のスマートフォンでは、telリンクを設定していない、ただの文字列もリ...
css3 スマホ時に横スクロールのUIを実装
css3最近はスマホ時のUIで横スクロールのを採用するアプリやWebサイトをよく見かけます。ある程度のコンテンツ数がある場合に横スクロールを採用する事でスマホの様な小さい画面でも1つ1つの画像をある程度大きく見せる事が出来るというメリットが...