サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
大そうじへの備え
webdesignday.jp
CSSプロパティーの「object-fit」を使えば、簡単にCSSだけで画像を指定したサイズ（コンテナー）にフィットさせて、かつ、はみ出すの部分はトリミングができてしまいます。要は画像として配置しているのに、「background-size」と同じことができてしまいます。 そこで今日は、素晴らしいCSSプロパティー「object-fit」を色々とサンプルで詳しく紹介していきたいと思います。 なぜ画像フィット・トリミングが必要なのか？ 例えば、記事一覧ページでサムネイル画像が並ぶページの場合、全ての画像が同じサイズ、もしくは縦横比でないと並びが崩れてしまいます。 横幅はCSSで揃えられるけど縦幅はバラバラで崩れている じゃ、全部同じサイズでアップすれば良いじゃん！と思いますが、CMSでユーザーが任意の画像をアップする場合などはそうはいきません。 ですので、どのようなサイズの画像が配置されても
ひと昔前までは、ローディングアニメーションと言えばCSSアニメーションで円がクルクル回ってるだけだったり、ロゴが中央に表示されて消えていくだけだった印象ですが、今は趣向が凝ったローディングアニメーションのサイトがたくさんあります。 また、ローディングとは違いますが、あえてオープニングに数秒の短いアニメーションを見せてからサイトを表示する、といったサイトも見受けられるようになりました。秀逸なアニメメーションはブランディングを高め、ユーザーのサイトへのクリエイティブの期待値をあげます。 今回はそんな「ローディング・オープニングアニメーションがかっこいいWEBサイト」を集めて見ました。 ローディングアニメーション 株式会社東洋精工｜技術でつなぐ、未来をつくる 全画面にタイル状に表示されたレイヤーが小さく消えて行った後に、文字が1文字ずつアニメーションしながら出てきます。見ていてとても気持ちが良く
WEBデザイナーであれば1度は「Sass」という言葉を聞いたことがあるのでは？と思います。今回は「Sassには興味があるけどまだ導入できていない」、「そもそもSassって何？」という方向けに、Sassの入門的な記事を書いてみました。 結論から先に言うと、初めてCSSを覚えた時のような新鮮な気持ちになり、コーディングがめちゃくちゃ楽しくなります。さらに、通常のCSSでのコーディングよりはるかに作業効率が向上しますので良いことづくし！導入しないのはもったいないです。 Sassとは？ そもそも「Sass」とは何でしょうか？ Sassは「Syntactically Awesome StyleSheet」の略です。 Syntactically ＝ 文法的に Awesome ＝ すごい StyleSheet = スタイルシート という意味です。名前ですでに「すごい」と謳っていますね。 さらにSassは
CSSでボックスの幅や高さを指定する場合、パーセント（％）やピクセル（px）で指定することが多いと思います。しかしViewport(vw・vh)はフルスクリーン・レンスポンシブに適したCSSの単位です。今回はこのViewport (vw・vh)を解説して行きたいと思います。 Viewportとは？ まずはViewportに触れたいと思います。Viewportとは「表示領域」です。Webサイトにおいては、ブラウザの幅と高さがViewportに当たります。 Viewportは「ブラウザの幅と高さを基準にしている」ため、ブラウザのサイズが変更される度に値が変化して行きます。これがフルスクリーン・レンスポンシブに最適である理由です。 Viewport(vw・vh)の単位 Viewport(vw・vh)には4つの単位があります。それぞれ見て行きましょう。 vw(viewport width)
アコーディオンメニューとは 今更、説明も不要かと思いますが一応確認しておきましょう。下にある通り、クリックで開閉ができるメニューのことです。 前回のCSSのみのアコーディオンメニューとの違い 前回のCSSのみのアコーディオンメニューの場合は、まずチェックボックスを「display:none」にして画面上には表示されない状態で配置します。そして、チェックボックスのチェックがあるかないかでメニューの表示・非表示の切り替える、というやり方でした。 自分で書いておいてあれですが、クリックのフラグとして非表示のチェックボックスを使うのがなんだかなぁと思います。ですのでよりシンプルに、jQueryで直接アコーディオンメニューの開閉操作をしていきます。 ベースのHTML・CSS・jQuery まずはデモをご覧ください。 サンプル1 HTML メニュー部分以外は割愛していますが、jQueryで操作するので
.split{ display: table; width: 100%; } .split-item{ display: table-cell; padding: 80px; width: 50%; } .split-left{ background: #000; color: #fff; position: relative; } .split-left__inner{ height: 100%; position: fixed; width: 50%; } .split-right__inner{ height: 8000px; } 2,6行目 左右の横に並んだレイアウトは、全体をラップしている「.split」に「display: table;」、左右のボックス「.split-item」に「display: table-cell;」を指定しています。 17行目 「.split-left
<ul class="gnav"> <li><a href="">Menu1</a></li> <li><a href="">Menu2</a></li> <li><a href="">Menu3</a></li> <li><a href="">Menu4</a></li> <li><a href="">Menu5</a></li> </ul> .gnav { display: flex; height: 2rem; margin: 0 auto; width: 1000px; } .gnav > li {/*親階層のみ幅を25%にする*/ width: 25%; } /*全てのリスト・リンク共通*/ .gnav li { list-style: none; position: relative; } .gnav li a { background: #001b34; border-rig
モーダルウィンドウを実装するjQueryプラグインはたくさんありますが、わざわざプラグインを使わなくても、意外と簡単にモーダルウィンドウを実装することができます。自分で実装できれば、仕組みを理解しているのでカスタマイズやメンテもしやすいのが最大のメリットです。 また、モーダルウィンドウのメリットやデメリットにも触れつつ、サンプルで確認しながらプラグインなしで作っていきます！ モーダルウィンドウとは? 素材サイトなどを見ているとよく出てくる、会員登録を促す画像やボタンが全画面にオーバーレイして表示されるやつです。 モーダルウィンドウが表示されると、閉じるか、指定の動作を完了するまで他の操作ができないところが特徴で、この点がメリットでもあり、デメリットでもあります。 主な用途は下記になります。 ローディング ローディングが必要なコンテンツを表示する際に、ローディング中であることを伝えるために使
レスポンシブレイアウトでのスマホビューが圧倒的に増えて来た昨今、アコーディオンメニューは、狭い画面でユーザーが必要な情報を任意で表示することができ、ユーザビリティの観点から見ても重要なテクニックの1つです。 ということで、今回はjQueryなしでCSSだけで作るアコーディオンメニューをやっていきたいと思います。 アコーディオンメニュー 今更、説明も不要かと思いますが一応確認しておきましょう。下にある通り、クリックで開閉ができるメニューのことです。 クリックで開く1hello.world!クリックで開く2hello.world!クリックで開く3hello.world!クリックで開く4hello.world! 基本的なやり方 どうやって実装するかを簡単に説明します。 labelをクリックする アコーディオンメニューのクリック部分になります。 labelクリックでチェックボックスにチェックを付け
以前、「デザインの参考にしたい「和風」テイストの良質サイト5選」と言う記事を書きました。その中で紹介したサイトにも縦書きのテクニックは取り入れられておりましたが、「和風デザインじゃない」サイトでも縦書きを取り入れているデザインの優れたサイトはたくさんあります。 今回は「縦書きを取り入れたデザインの優れたサイト」を集めてみました。 和風デザインで縦書き まずは王道の和風デザインで縦書きを取り入れたサイトです。 あきた舞妓 -akitamaiko- ファーストビューが和紙のような背景にロゴマークのみ。ファーストビューは色々盛り込みたくなりますがこのいさぎよいシンプルさがグッド。こちらのサイトは縦書きは画像で表示しています。 【公式】灯屋 迎帆楼 ロゴも縦書きのデザインなのでサイト内の縦書きも全体の雰囲気とマッチしています。こちらはHTML・CSSで縦書きを表示しています。 書画・掛け軸・古美術
【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サイトで取り入れられるようになってきました。 今回は、印象的でオリジナリティーも出しやすい、「ブロークングリッドレイアウト」のサイトを集めましたので、ぜひデザインの参考にしてください。 ブロークングリッドレイアウトとは？ 「グリッドレイアウト」というレイアウト手法を聞いたことがある方は多いと思いますが、レイアウトする際、決められたグリッドに沿って要素を整列して配置することで、とても見やすいデザインが可能です。 しかし規則正しく並べられた要素は見やすい反面、単調になりがちです。 「ブロークングリッドレイアウト」は、正しい規則の境界線をポイントであえて外すことで、ユーザーの視線を惹きつけ、印象的なデザインを作り出します。 ブロークングリッドレイアウトの特徴 では
<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 href="">
要素をブロックの縦横中央に配置するというシーンはたくさんあります。 横の中央揃えは簡単です。「margin:0 auto」か「text-align:center」で指定できます。ですが、縦中央揃えは「margin:auto 0」というわけにはいかないのが残念というか難点です。 そこで今回は「画像やテキストを縦横中央に配置する方法4つ」を確認していきます。
以前「縦書きを取り入れたデザインの優れたサイト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のサイズを大・中・小やカスタムサイズから選べますが、今回はサイ
最近、下スクロールで消えて、上スクロールで出てくるグローバルナビゲーションを見かけるようになりました。例えばこちらのサイトとか↓。 KAMIMURA 特に表示領域の少ないタブレットやスマフォで活きてくるテクニックですね。実際に実装してみたいと思います。 まずはサンプルをご覧ください。 下スクロールで消えて、上スクロールで出てくるグローバルナビゲーションサンプル <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__it
<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="">Works</a></li> <li class="gnav__menu__item"><a href="">Recruit</a></li> <li class="gnav__menu__item"><a href="">News</a></li> <li class="gnav__menu__item"><a h
簡単に動画をWebサイトに設置できるので、Webサイト用に動画をアップする機会も多くなってきました。ですが、動画は画像に比べるとファイルサイズが大きくなりがちです。 動画ファイルサイズを下げたくても、専用ソフトはないし、かといってフリーソフト入れるのもなぁ、という場合もあるかと思います。 そこで今回は、フリーソフトいらず！動画ファイルサイズをオンラインで軽くする方法2つ！をご紹介します。
前回、「超簡単！CDNのjQueryを読み込む方法」というのを書きましたが、Web制作をする上では、様々なjQueryのプラグインも使用する機会が多いと思います。 jQuery本体と同様に、プラグインも毎回ダウンロードしてサーバーへアップして、、、というのは面倒です。そこで便利なのが「jsDelivr」というサイトです。 プラグイン全て、というわけにはいきませんが、かなりの数のプラグインをホストしていますし、よく使うCDNをコレクションして一括でソースコードをコピーして貼り付けられたり超便利です。ぜひ使ってみましょう。 jsdelivrトップ画面 まずは下記のリンクから「jsdelivr」のトップ画面へ行きましょう。 jsDelivr 画面を下にスクロールしていくと、検索ボックスがあり、こちらに使いたいプラグイン名を入れて探すことができます。 さらにスクロールをしていくとTop10のランキ
flexboxとは flexboxとは「Flexible Box Layout Module」のことで、CSSでのレイアウト設定を簡単にするレイアウトモジュールです。今までjavascript・jQueryで行っていたような複雑なレイアウトもとてもシンプルに設定できます。数年前まではflexboxをサポートしていないブラウザが多く使いづらかったのですが、現在（2018年5月現在）では、ほとんどのブラウザにサポートされています。 flexboxの基本的な使い方 それでは基本的な使い方からやっていきましょう。まず抑えるポイントは2つ。 flexコンテナー flexコンテナーは下記に記載するflexアイテムを内包する親要素です。flexアイテムの縦・横軸の位置や並び順、折り返しなどを簡単に指定できます。 flexアイテム flexアイテムはflexコンテナー内に配置された子要素です。親要素がfl
以前、「ボックスの高さをブラウザの高さに合わせるテク3つ！」というのを書きました。 本当は今回の記事の内容まで一気に行きたかったのですが、長くなるので分けることにしました。 ですので今回は、続編でブラウザの高さに合わせたボックス内で、画像や動画を全画面にフィットさせる方法をやっていきたいと思います。 これができれば、最近良く見るブラウザ全体にフィットした背景動画のサイトも作れます。
それほどcookieを使用する機会は多くないかもしれませんが、ページを遷移したり、リロードしても値を保持することができるのでユーザビリティに役立ちます。 「jquery.cookie.js」を使えば簡単にcookieの値を取得・保存・削除することができて便利ですので、使い方をサンプルと合わせて確認していきたいと思います。
最近ではWebサイトにアニメーションを取り入れるのが当たり前になってきています。ひと昔前はフルフラッシュサイトで見かけたようなゴリゴリ動く表現がhtml5やCSS、JS・JQueryによって実装可能になりました。今回はそんなアニメーションの表現が優れたサイトをまとめました。 以前「サイトにプラス1の工夫を！遊び心・アイデアが面白いサイト5選」という記事でも触れましたが、大事なことはユーザーのページビューの妨げになっては本末転倒ですので、技術のひけらかしのようになってはいけません。そのサイトに必要なアニメーションを取り入れるのことが大事です。 アニメーションといってもその表現方法は様々ですので、大まかにカテゴリーにまとめてみました。 フェイドイン系 王道のスクロールしていくと要素がフワッとフェイドインしていくパターンです。要素の移動スピードやアニメーションのイージングなどで結構印象が変わりま
スクロールをセクションごとに制御してくれるプラグイン「jQuery Scrollify」。主に縦に長いLPなどでよく使用されているので、ちょこっとスクロールしただけで、次のセクションまでスルスルとスクロールしていくサイトに出会ったことがある方もいるはず。 ユーザーに面白いUX（ユーザーエクスペリエンス）を与えることができるプラグインですので、使い方を詳しく解説していきます。
最近ではWebサイトにアニメーションを取り入れるのが当たり前になってきています。ひと昔前はフルフラッシュサイトで見かけたようなゴリゴリ動く表現がhtml5やCSS、JS・JQueryによって実装可能になりました。今回はそんなアニメーションの表現が優れたサイトをまとめました。以前「サイトにプラス1の工夫を！遊び心・アイデアが面白いサイト5選」という記事でも触れましたが、大事なことはユーザーのページビューの妨げになっては本末転倒ですので、技術のひけらかしのようになってはいけません。そのサイトに必要なアニメーションを取... 1.waypoint.jsを設置 画面の指定位置に要素が入ったことを取得するためwaypoint.jsを使用します。スクリプトを自前で書いて行うこともできますが、waypoint.jsはスクロールのアップ・ダウンを判別できたりとても便利なプラグインなので使用していきましょう
当サイトの目次でもやってますが、縦長のランディングページなんかを作る場合、グローバルナビゲーションはページ内リンクにして、スムーズにスクロールさせるパターンがよくあります。 ですが、特定のページを別ページにしている場合、ページの外からページ内リンクをクリックした際もスムーズにスクロールさせたいものです。 ですので今回は、ページ内リンクをページ外からクリックした際のスムーズスクロールをやっていきます。 <nav class="gnav"> <ul class="gnav__menu"> <li class="gnav__menu__item"><a href="#about">About</a></li> <li class="gnav__menu__item"><a href="#works">Works</a></li> <li class="gnav__menu__item"><a h
世の中にはたくさんのスライダープラグインがありますが、今回はレスポンシブ・タッチデバイスに対応、オプション設定も豊富なスライダープラグイン「slick」の使い方を詳しく解説していきます。 slickの機能概要 レスポンシブ対応 ブレークポイントごとに別々の設定が可能 スワイプ・マウスドラッグ可能 無限ループ スライドの追加、削除、フィルタリング、除外など 導入 ファイルのダウンロード まずは公式サイトからファイルをダウンロードします。 slick または、以前紹介した「jsDelivr」というサイトにもCDNでホストされています。 （ちなみに2017年11月時点ではslickが1位です。） jsDelivrの使い方はこちらの記事をチェックしてみてください。
次のページ
このページを最初にブックマークしてみませんか？
『Web Design DAY | Webデザインに携わる日々に役立つ情報を発信するメディア』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
