サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
iPhone 17
webdesignday.jp
ひと昔前までは、ローディングアニメーションと言えばCSSアニメーションで円がクルクル回ってるだけだったり、ロゴが中央に表示されて消えていくだけだった印象ですが、今は趣向が凝ったローディングアニメーションのサイトがたくさんあります。 また、ローディングとは違いますが、あえてオープニングに数秒の短いアニメーションを見せてからサイトを表示する、といったサイトも見受けられるようになりました。秀逸なアニメメーションはブランディングを高め、ユーザーのサイトへのクリエイティブの期待値をあげます。 今回はそんな「ローディング・オープニングアニメーションがかっこいいWEBサイト」を集めて見ました。 ローディング・オープニングアニメーションがかっこいいWEBサイト 株式会社東洋精工｜技術でつなぐ、未来をつくる 全画面にタイル状に表示されたレイヤーが小さく消えて行った後に、文字が1文字ずつアニメーションしながら
.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プラグインはたくさんありますが、わざわざプラグインを使わなくても、意外と簡単にモーダルウィンドウを実装することができます。自分で実装できれば、仕組みを理解しているのでカスタマイズやメンテもしやすいのが最大のメリットです。 また、モーダルウィンドウのメリットやデメリットにも触れつつ、サンプルで確認しながらプラグインなしで作っていきます！ モーダルウィンドウとは? 素材サイトなどを見ているとよく出てくる、会員登録を促す画像やボタンが全画面にオーバーレイして表示されるやつです。 モーダルウィンドウが表示されると、閉じるか、指定の動作を完了するまで他の操作ができないところが特徴で、この点がメリットでもあり、デメリットでもあります。 主な用途は下記になります。 ローディング ローディングが必要なコンテンツを表示する際に、ローディング中であることを伝えるために使
今回はWordPressの便利なショートコードを自作する方法の基本や、使い方を解説していきたいと思います。複雑な処理も短いコードで呼び出せるととても便利な機能です。ぜひまだ使ったことがない方はこれを機に覚えてください。 ショートコードとは？ ショートコードとは、あらかじめfunction.phpに書いた関数をブラケット[]という囲みで囲った短いコードで呼び出せるとても便利な機能です。 ショートコードに馴染みがない方も、実は多くのプラグインでこのショートコードが使われているので、知らずに使っているかもしれません。代表的なものだと、お問い合わせフォームを作成する「Contact Form 7」では下記のようにショートコーでフォームを出力します。 メリット・デメリット ではショートコードの作成にはどんなメリット・デメリットがあるでしょうか？ メリット よく使う定型文やレイアウトや処理をパーツ化し
WordPressを色々いじって行くと必ず「トップページではサイドバーなし」で、「固定ページや個別投稿ページではサイドバーを表示」と言った感じで現在のページに応じて処理を変えたくなってきます。そこで登場するのがWordPressの「条件分岐タグ」。 トップページや個別投稿ページを判別して処理を分けられるのはもちろんですが、現在見ている端末がモバイル（スマホ・タブレット）かも判別できたりとても重宝します。 「条件分岐タグ」はかなりたくさんありますが、よく使うものはある程度絞られてきます。今回は「これだけは覚えておきたい！」という条件分岐タグをまとめてみました。 条件分岐の基本的な書き方 WordPressはPHPを使ったCMS（コンテンツマネジメントシステム）ですので、条件分岐自体はPHPで書きます。そして条件分岐を指定する際に、WordPress独自の「条件分岐タグ」を使う！と覚えておきま
「animation」はアニメーションの段階を細かく指定することができ、かつアニメーション開始のきっかけも不要！と覚えてください。 animationとkeyframes この後詳しく解説しますが、まずはanimationとkeyframesの概要をざっと説明します。 animation CSS Animationsは CSS のモジュールの一つで、時間の経過とキーフレームによって CSS プロパティの値を動かすことができます。キーフレームアニメーションの動作は、タイミング関数、時間、繰り返し回数、その他の属性によって制御されます。 CSS アニメーション – CSS: カスケーディングスタイルシート | MDN 「animation」は「keyframes」で指定した動きを要素に設定します。 「keyframes」で動きを指定しただけではアニメーションはしません。 「animation」
囲み型のショートコードとは？ 前回のショートコードの自己完結型を作成でも書きましたがショートコードには自己完結型と囲み型の2つのタイプがあります。 自己完結型 自己完結型はショートコードを一度だけ書いて完結するものになります。閉じるショートコードは不要です。自己完結型の書き方は下記になります。
CSSプロパティーの「object-fit」を使えば、簡単にCSSだけで画像を指定したサイズ（コンテナー）にフィットさせて、かつ、はみ出すの部分はトリミングができてしまいます。要は画像として配置しているのに、「backg […]
<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="">
以前「縦書きを取り入れたデザインの優れたサイト10選」という記事を書きましたので今回は実践編をやりつつ、色々検証してみます。（IE以外はMac環境での検証です。） 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
前回、「超簡単！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の値を取得・保存・削除することができて便利ですので、使い方をサンプルと合わせて確認していきたいと思います。
スクロールをセクションごとに制御してくれるプラグイン「jQuery Scrollify」。主に縦に長いLPなどでよく使用されているので、ちょこっとスクロールしただけで、次のセクションまでスルスルとスクロールしていくサイトに出会ったことがある方もいるはず。 ユーザーに面白いUX（ユーザーエクスペリエンス）を与えることができるプラグインですので、使い方を詳しく解説していきます。
今回は実装編をやってみようと思います。その中でも今回は「ボックススライドイン」のアニメーションをやります。（※ボックススライドインという名称は私が勝手にそう呼んでいるだけです。） 表題のとおり、waypoint.jsとCSSで比較的簡単にスクロールして画面指定位置で要素をアニメーションさせることができます。 まずはサンプルをご覧ください。 waypoint.jsとCSSでスクロールして画面指定位置で要素をアニメーションさせるサンプル waypoint.jsを設置 画面の指定位置に要素が入ったことを取得するためwaypoint.jsを使用します。スクリプトを自前で書いて行うこともできますが、waypoint.jsはスクロールのアップ・ダウンを判別できたりとても便利なプラグインなので使用していきましょう。 waypoint.jsのダウンロードはこちらから。 「Download」をクリックして一
2024.06.18 position:sticky;の使い方と上手く機能しない場合の解決方法を解説 Programing
このページを最初にブックマークしてみませんか？
『Web Design DAY | Webデザインに携わる日々に役立つ情報を発信するメディア』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
