サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
webdesignday.jp
WEBDESIGNDAY > INSPIRATION > Technique > CSS > 【CSS】object-fitはCSSだけで画像をコンテナーにフィットさせてトリミングもできるとっても素晴らしいプロパティー 【CSS】object-fitはCSSだけで画像をコンテナーにフィットさせてトリミングもできるとっても素晴らしいプロパティー 公開日:2020/05/03 /最終更新日:2020/05/25 CSS PICKUP Technique CSSプロパティーの「object-fit」を使えば、簡単にCSSだけで画像を指定したサイズ(コンテナー)にフィットさせて、かつ、はみ出すの部分はトリミングができてしまいます。要は画像として配置しているのに、「background-size」と同じことができてしまいます。 そこで今日は、素晴らしいCSSプロパティー「object-fit」を色々
【Web デザイン】ローディング・オープニングアニメーションがかっこいいWEBサイト13選 公開日:2018/11/30 /最終更新日:2019/07/04 jQuery・JS Technique Web デザイン ひと昔前までは、ローディングアニメーションと言えばCSSアニメーションで円がクルクル回ってるだけだったり、ロゴが中央に表示されて消えていくだけだった印象ですが、今は趣向が凝ったローディングアニメーションのサイトがたくさんあります。 また、ローディングとは違いますが、あえてオープニングに数秒の短いアニメーションを見せてからサイトを表示する、といったサイトも見受けられるようになりました。秀逸なアニメメーションはブランディングを高め、ユーザーのサイトへのクリエイティブの期待値をあげます。 今回はそんな「ローディング・オープニングアニメーションがかっこいいWEBサイト」を集めて見ました
【CSS】Sassは絶対使った方が良いよ!使い方入門編 公開日:2019/06/29 /最終更新日:2020/05/25 CSS Technique WEBデザイナーであれば1度は「Sass」という言葉を聞いたことがあるのでは?と思います。今回は「Sassには興味があるけどまだ導入できていない」、「そもそもSassって何?」という方向けに、Sassの入門的な記事を書いてみました。 結論から先に言うと、初めてCSSを覚えた時のような新鮮な気持ちになり、コーディングがめちゃくちゃ楽しくなります。さらに、通常のCSSでのコーディングよりはるかに作業効率が向上しますので良いことづくし!導入しないのはもったいないです。 Sassとは? そもそも「Sass」とは何でしょうか? Sassは「Syntactically Awesome StyleSheet」の略です。 Syntactically = 文法
【CSS】フルスクリーン・レンスポンシブに最適なViewport (vw・vh)を覚える 公開日:2018/12/04 /最終更新日:2019/02/09 CSS Technique CSSでボックスの幅や高さを指定する場合、パーセント(%)やピクセル(px)で指定することが多いと思います。しかしViewport(vw・vh)はフルスクリーン・レンスポンシブに適したCSSの単位です。今回はこのViewport (vw・vh)を解説して行きたいと思います。 Viewportとは? まずはViewportに触れたいと思います。Viewportとは「表示領域」です。Webサイトにおいては、ブラウザの幅と高さがViewportに当たります。 Viewportは「ブラウザの幅と高さを基準にしている」ため、ブラウザのサイズが変更される度に値が変化して行きます。これがフルスクリーン・レンスポンシブに最適
【jQuery・CSS】jQueryとCSSで作るアコーディオンメニュー 公開日:2019/06/03 /最終更新日:2020/05/08 CSS jQuery・JS Technique 先日「【CSS】CSSだけで作るアコーディオンメニュー」という記事を書きましたが、お役に立てたようで、意外とページビューも良くてありがたい限りです。今回はそれにあやかってせっかくなのでjQueryとCSSで作るアコーディオンメニューもやっていきたいと思います。 どちらの方法でも問題はありませんが、テクニックの引き出しは多いに越したことはないですからね。ちなみに私はこっちのjQueryとCSSで作る派です。
昨年くらいから見かけるようになった印象の「スプリットレイアウト」のサイト。今回は「スプリットレイアウト」を取り入れる際の参考になるサイトをまとめてご紹介します。 目次 スプリットレイアウトとは? スクロール一体タイプ スクロール分割タイプ スプリットレイアウトとは?「スプリットレイアウト」は「スプリットスクリーン」と言っている方もいますが同じものです。その名のとおりスプリット=分割するデザインレイアウトのことです。画面を縦2つに分割して見せることで左右の対比が生まれデザインの印象が変わり... HTML <div class="split"> <div class="split-item split-left"> <div class="split-left__inner"> left </div><!--split-left__inner--> </div><!--split-item
【CSS】CSSだけで作るドロップダウンメニュー(多階層) 公開日:2019/06/13 /最終更新日:2019/06/30 CSS Technique 今回はグローバルメニューの登竜門、ドロップダウンメニューをCSSだけで作っていきたいと思います。「transition」でアニメーションさせつつ、ひ孫階層まで対応したコードになります。 「なるべくコードはシンプルにわかりやすく」を意識して書いて行きます。細かく分けて解説入れながらやっていきますので、「うんちくなんいかいらない!」という方は、最後までジャンプしてください。最後に全てのコードを記載します。 親階層 まずは親階層です。 HTML <ul class="gnav"> <li><a href="">Menu1</a></li> <li><a href="">Menu2</a></li> <li><a href="">Menu3</a
【jQuery・CSS】意外と簡単!モーダルウィンドウをプラグインなしで作る 公開日:2019/05/21 /最終更新日:2020/05/07 CSS jQuery・JS PICKUP Technique モーダルウィンドウを実装するjQueryプラグインはたくさんありますが、わざわざプラグインを使わなくても、意外と簡単にモーダルウィンドウを実装することができます。自分で実装できれば、仕組みを理解しているのでカスタマイズやメンテもしやすいのが最大のメリットです。 また、モーダルウィンドウのメリットやデメリットにも触れつつ、サンプルで確認しながらプラグインなしで作っていきます! モーダルウィンドウとは? 素材サイトなどを見ているとよく出てくる、会員登録を促す画像やボタンが全画面にオーバーレイして表示されるやつです。 モーダルウィンドウが表示されると、閉じるか、指定の動作を完了するまで他の操作
レスポンシブレイアウトでのスマホビューが圧倒的に増えて来た昨今、アコーディオンメニューは、狭い画面でユーザーが必要な情報を任意で表示することができ、ユーザビリティの観点から見ても重要なテクニックの1つです。 ということで、今回はjQueryなしでCSSだけで作るアコーディオンメニューをやっていきたいと思います。 今更、説明も不要かと思いますが一応確認しておきましょう。下にある通り、クリックで開閉ができるメニューのことです。 クリックで開く1hello.world!クリックで開く2hello.world!クリックで開く3hello.world!クリックで開く4hello.world! 基本的なやり方 どうやって実装するかを簡単に説明します。 labelをクリックする アコーディオンメニューのクリック部分になります。 labelクリックでチェックボックスにチェックを付けたり外したりする チェッ
【Web デザイン】縦書きを取り入れたデザインの優れたサイト10選 公開日:2017/10/25 /最終更新日:2019/02/09 Web デザイン 以前、「デザインの参考にしたい「和風」テイストの良質サイト5選」と言う記事を書きました。その中で紹介したサイトにも縦書きのテクニックは取り入れられておりましたが、「和風デザインじゃない」サイトでも縦書きを取り入れているデザインの優れたサイトはたくさんあります。 今回は「縦書きを取り入れたデザインの優れたサイト」を集めてみました。 1.和風デザインで縦書き まずは王道の和風デザインで縦書きを取り入れたサイトです。 あきた舞妓 -akitamaiko- ファーストビューが和紙のような背景にロゴマークのみ。ファーストビューは色々盛り込みたくなりますがこのいさぎよいシンプルさがグッド。こちらのサイトは縦書きは画像で表示しています。 【公式】灯屋 迎
【CSS】animation・keyframesを徹底解説 公開日:2019/01/20 /最終更新日:2019/07/05 CSS Technique 今回は「animation」、「keyframes」について、細かく徹底的に解説していきます。 「animation」、「keyframes」については知ってはいましたが、アニメーションさせるなら「transition」でいいんじゃない?と思って使っていませんでした。 しかし、当サイトのGALLERYに掲載するサイトを日々収集していると、面白いアニメーションをさせているサイトにたくさん出会います。気になるとコードまで調べて見てみるのですが、たくさんのサイトで「animation」、「keyframes」が使われておりました。 そこで、私もWeb制作者の端くれとして、これを機にしっかりと身につけようと、今回の記事をアップするに至りました。
CSSプロパティーの「object-fit」を使えば、簡単にCSSだけで画像を指定したサイズ(コンテナー)にフィットさせて、かつ、はみ出すの部分はトリミングができてしまいます。要は画像として配置しているのに、「backg […]
雑誌では昔からよく使われていた境界線をあえて外す「ブロークングリッドレイアウト」。ここ最近のWebサイトの表現手法として、多くのWebサイトで取り入れられるようになってきました。 今回は、印象的でオリジナリティーも出しやすい、「ブロークングリッドレイアウト」のサイトを集めましたので、ぜひデザインの参考にしてください。 ブロークングリッドレイアウトとは? 「グリッドレイアウト」というレイアウト手法を聞いたことがある方は多いと思いますが、レイアウトする際、決められたグリッドに沿って要素を整列して配置することで、とても見やすいデザインが可能です。 しかし規則正しく並べられた要素は見やすい反面、単調になりがちです。 「ブロークングリッドレイアウト」は、正しい規則の境界線をポイントであえて外すことで、ユーザーの視線を惹きつけ、印象的なデザインを作り出します。 ブロークングリッドレイアウトの特徴 では
HTML <body> <a class="menu"> <span class="menu__line menu__line--top"></span> <span class="menu__line menu__line--center"></span> <span class="menu__line menu__line--bottom"></span> </a> <nav class="gnav"> <div class="gnav__wrap"> <ul class="gnav__menu"> <li class="gnav__menu__item"><a href="">About</a></li> <li class="gnav__menu__item"><a href="">Works</a></li> <li class="gnav__menu__item"><a hre
【CSS】画像やテキストを縦横中央に配置する方法4つ 公開日:2017/11/24 /最終更新日:2020/05/08 CSS Technique 要素をブロックの縦横中央に配置するというシーンはたくさんあります。 横の中央揃えは簡単です。「margin:0 auto」か「text-align:center」で指定できます。ですが、縦中央揃えは「margin:auto 0」というわけにはいかないのが残念というか難点です。 そこで今回は「画像やテキストを縦横中央に配置する方法4つ」を確認していきます。 HTML ベースとなる共通HTMLです。 <div class="box"> <div class="inner"> <div class="content"> <h2 class="title">title</h2> <p class="text"> content here </p> </
以前「縦書きを取り入れたデザインの優れたサイト10選」という記事を書きましたので今回は実践編をやりつつ、色々検証してみます。(IE以外はMac環境での検証です。) 1.CSSで縦書きを設定 writing-modeプロパティ 縦書きは「writing-mode:vertical-rl;」だけで簡単に設定することができます。「vertical」が縦という意味で、「rl」は「right(右)」から「left(左)」という意味です。 「vertical-rl」以外にも設定値がありますので下記を確認ください。 horizontal-tb
Googleマップを埋め込んだサイトはよく見かけますが、そのまま埋め込んだだけだとレスポンシブに対応できません。ですので今回は「Googleマップをレンスポンシブに対応させる方法」をやっていきたいと思います。 まずはGoogleマップを埋め込む ご存知方も多いと思いますが、まずはGoogleマップをサイトに埋め込みむ方法を確認しましょう。 Googleマップにアクセスします。 https://www.google.co.jp/maps/ 画面左にある検索ボックスで表示したい場所を検索します。今回は新宿駅にしました。 そして同じく左のメニューにある「共有」をクリックします。 するとこんな感じのポップアップが出てきますので、「地図を埋め込む」をクリックします。表示が変わりiframeのタグが出てきますので、コピーします。 iframeのサイズを大・中・小やカスタムサイズから選べますが、今回はサ
1.jQueryで下スクロールなのか上スクロールなのか判別してクラスを付与、削除する 最初にHTMLです。 <header class="site-header flex flex--bet"> <h1 class="site-logo"> <img class="site-logo__img" src="images/logo.png" alt="logo"> </h1> <nav class="gnav"> <ul class="gnav__menu flex flex--bet"> <li class="gnav__menu__item"> <a class="gnav__menu__item__link" href="#sec1">SECTION1</a> </li> <li class="gnav__menu__item"> <a class="gnav__menu__item_
ヘッダー・ナビゲーションを固定表示させるアイデア5つ 公開日:2017/12/28 /最終更新日:2019/02/09 CSS jQuery・JS Technique 最初から固定表示 基本なので言わずもがなですが一応。単なる固定表示ならCSSの「position: fixed;」だけです。簡単ですね。 HTML <header class="site-header"> <h1 class="site-logo"><img src="images/logo.png" alt="WEBDESIGNDAY"></h1> <nav class="gnav"> <ul class="gnav__menu"> <li class="gnav__menu__item"><a href="">About</a></li> <li class="gnav__menu__item"><a href="">W
簡単に動画をWebサイトに設置できるので、Webサイト用に動画をアップする機会も多くなってきました。ですが、動画は画像に比べるとファイルサイズが大きくなりがちです。 動画ファイルサイズを下げたくても、専用ソフトはないし、かといってフリーソフト入れるのもなぁ、という場合もあるかと思います。 そこで今回は、フリーソフトいらず!動画ファイルサイズをオンラインで軽くする方法2つ!をご紹介します。
【jQuery】CDNならこのサイトが超便利!jsDelivrの使い方 公開日:2017/11/09 /最終更新日:2019/02/09 jQuery・JS Technique 前回、「超簡単!CDNのjQueryを読み込む方法」というのを書きましたが、Web制作をする上では、様々なjQueryのプラグインも使用する機会が多いと思います。 jQuery本体と同様に、プラグインも毎回ダウンロードしてサーバーへアップして、、、というのは面倒です。そこで便利なのが「jsDelivr」というサイトです。 プラグイン全て、というわけにはいきませんが、かなりの数のプラグインをホストしていますし、よく使うCDNをコレクションして一括でソースコードをコピーして貼り付けられたり超便利です。ぜひ使ってみましょう。
【CSS】Flexboxの使い方を基本から徹底解説!レイアウトがとっても簡単に! 公開日:2018/05/21 /最終更新日:2020/06/05 CSS PICKUP Technique flexboxとは flexboxとは「Flexible Box Layout Module」のことで、CSSでのレイアウト設定を簡単にするレイアウトモジュールです。今までjavascript・jQueryで行っていたような複雑なレイアウトもとてもシンプルに設定できます。数年前まではflexboxをサポートしていないブラウザが多く使いづらかったのですが、現在(2018年5月現在)では、ほとんどのブラウザにサポートされています。 flexboxの基本的な使い方 それでは基本的な使い方からやっていきましょう。まず抑えるポイントは2つ。 flexコンテナー flexコンテナーは下記に記載するflexアイテムを
var winH = $(window).height(); $('.box').outerHeight(winH); $(window).on('load',function(){ setBgImg($('.fitImg')); }); $(window).on('resize',function(){ winH = $(window).height(); $('.box').outerHeight(winH); setBgImg($('.fitImg')); }); function setBgImg(object){ //画像サイズ取得 var imgW = object.width(); var imgH = object.height(); //ウィンドウサイズ取得 var winW = $(window).width(); var winH = $(window).height
それほどcookieを使用する機会は多くないかもしれませんが、ページを遷移したり、リロードしても値を保持することができるのでユーザビリティに役立ちます。 「jquery.cookie.js」を使えば簡単にcookieの値を取得・保存・削除することができて便利ですので、使い方をサンプルと合わせて確認していきたいと思います。 1.jquery.cookie.jsの使い方 まずはcookieの使い方を確認していきましょう。 cookieの取得 var sample = $.cookie('名前'); 変数「sample」にcookieの値を取得して、代入できます。 cookieの保存 $.cookie('名前','値'); これが基本設定になります。 オプション cookieにはオプションを設定することができます。任意の値になるので省略可能です。下記詳細になります。 $.cookie('data
【Web デザイン】アニメーションが心地良いWebサイト11選 公開日:2017/10/17 /最終更新日:2020/05/07 Web デザイン 最近ではWebサイトにアニメーションを取り入れるのが当たり前になってきています。ひと昔前はフルフラッシュサイトで見かけたようなゴリゴリ動く表現がhtml5やCSS、JS・JQueryによって実装可能になりました。今回はそんなアニメーションの表現が優れたサイトをまとめました。 以前「サイトにプラス1の工夫を!遊び心・アイデアが面白いサイト5選」という記事でも触れましたが、大事なことはユーザーのページビューの妨げになっては本末転倒ですので、技術のひけらかしのようになってはいけません。そのサイトに必要なアニメーションを取り入れるのことが大事です。 アニメーションといってもその表現方法は様々ですので、大まかにカテゴリーにまとめてみました。
WEBDESIGNDAY > INSPIRATION > Technique > jQuery・JS > スクロールをセクションごとに制御するプラグイン「jQuery Scrollify」を詳しく解説! スクロールをセクションごとに制御するプラグイン「jQuery Scrollify」を詳しく解説! 公開日:2017/11/17 /最終更新日:2020/05/09 jQuery・JS Technique スクロールをセクションごとに制御してくれるプラグイン「jQuery Scrollify」。主に縦に長いLPなどでよく使用されているので、ちょこっとスクロールしただけで、次のセクションまでスルスルとスクロールしていくサイトに出会ったことがある方もいるはず。 ユーザーに面白いUX(ユーザーエクスペリエンス)を与えることができるプラグインですので、使い方を詳しく解説していきます。
最近ではWebサイトにアニメーションを取り入れるのが当たり前になってきています。ひと昔前はフルフラッシュサイトで見かけたようなゴリゴリ動く表現がhtml5やCSS、JS・JQueryによって実装可能になりました。今回はそんなアニメーションの表現が優れたサイトをまとめました。以前「サイトにプラス1の工夫を!遊び心・アイデアが面白いサイト5選」という記事でも触れましたが、大事なことはユーザーのページビューの妨げになっては本末転倒ですので、技術のひけらかしのようになってはいけません。そのサイトに必要なアニメーションを取... 1.waypoint.jsを設置 画面の指定位置に要素が入ったことを取得するためwaypoint.jsを使用します。スクリプトを自前で書いて行うこともできますが、waypoint.jsはスクロールのアップ・ダウンを判別できたりとても便利なプラグインなので使用していきましょう
【jQuery】ページ内リンクをページ外からでもスムーズにスクロールさせる 公開日:2018/01/14 /最終更新日:2019/06/14 jQuery・JS Technique 当サイトの目次でもやってますが、縦長のランディングページなんかを作る場合、グローバルナビゲーションはページ内リンクにして、スムーズにスクロールさせるパターンがよくあります。 ですが、特定のページを別ページにしている場合、ページの外からページ内リンクをクリックした際もスムーズにスクロールさせたいものです。 ですので今回は、ページ内リンクをページ外からクリックした際のスムーズスクロールをやっていきます。 まずはページ内リンクをスムーズスクロールさせる まずはおさらいです。ページ内リンクをスムーズスクロールさせます。 HTML <nav class="gnav"> <ul class="gnav__menu"> <l
前回、「超簡単!CDNのjQueryを読み込む方法」というのを書きましたが、Web制作をする上では、様々なjQueryのプラグインも使用する機会が多いと思います。jQuery本体と同様に、プラグインも毎回ダウンロードしてサーバーへアップして、、、というのは面倒です。そこで便利なのが「jsDelivr」というサイトです。プラグイン全て、というわけにはいきませんが、かなりの数のプラグインをホストしていますし、よく使うCDNをコレクションして一括でソースコードをコピーして貼り付けられたり超便利です。ぜひ使ってみましょう。jsDelivr&... 設置するファイル ajax-loader.gif fonts(フォルダ) slick-theme.css slick.css slick.min.js HTML <link href="js/slick-theme.css" rel="styleshee
次のページ
このページを最初にブックマークしてみませんか?
『WEBDESIGNDAY』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く