【CSS】Flexboxとcalc()で簡単レスポンシブ対応3カラムカードレイアウト！ | JunJunWeb.Net
CSSのFlexboxとcalc()関数を使って簡単にレスポンシブ対応3カラムカードレイアウトを作成する方法を備忘録としてまとめておきます。デスクトップ表示時は3カラム、タブレット表示時は2カラム、モバイル表示は1カラムにするなどのレイアウトをいちいち幅やマージンを細かく計算して実装する必要がないので、自分的には重宝しています。※注）calc()関数はモダンブラウザにサポートされていて使いやすいですが、FlexboxはIE6-9（IE10はベンダープレフィックスで対応）には対応していないので旧IE6-9をサポートするサイトを構築する場合は注意が必要です。 3カラムカードレイアウトデモ 下のデモのようなカードレイアウトが簡単にできます。ウインドウ幅を変えるとカラム数が変化します。 カードレイアウト1 Flexboxとcale()を使ってかんたんにカードレイアウトをつくる手順のご紹介 カードレ
Webサイトの背景に動画を簡単設置できるJavaScriptライブラリ「bideo.js」 | JunJunWeb.Net
最近は、Webサイトの背景に映像を配置しているものが増えてきました。今回、クライアントの要望があり、背景映像を設置したサイトを制作するにあたり、bideo.jsというスクリプトを使ってみたので設置手順をまとめてみました。bideo.jsは背景動画をブラウザいっぱいまたは、指定したコンテナ内に表示することができます。また、bideo.js単体で動作し、軽量でレスポンシブにも対応なので、これらのWebサイトに使用していきやすいスクリプトだと思います。 bideo.jsの設置手順 まず、bideo.jsのサイトにアクセスしてスクリプトをダウンロードしてきます。以下のサイトにアクセスして [ VIEW ON GITHUB ] をクリックするとGitHubからダウンロードできます。 bideo.jpのダウンロードサイト ページにスクリプトを読み込ませる 背景動画を使用するページにスクリプトを読み込ま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
