サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
ブラックフライデー
life-design-day.com
以前、「デザインの参考にしたい「和風」テイストの良質サイト5選」と言う記事を書きました。その中で紹介したサイトにも縦書きのテクニックは取り入れられておりましたが、「和風デザインじゃない」サイトでも縦書きを取り入れているデザインの優れたサイトはたくさんあります。 今回は「縦書きを取り入れたデザインの優れたサイト」を集めてみました。 和風デザインで縦書き まずは王道の和風デザインで縦書きを取り入れたサイトです。 あきた舞妓 -akitamaiko- ファーストビューが和紙のような背景にロゴマークのみ。ファーストビューは色々盛り込みたくなりますがこのいさぎよいシンプルさがグッド。こちらのサイトは縦書きは画像で表示しています。 【公式】灯屋 迎帆楼 ロゴも縦書きのデザインなのでサイト内の縦書きも全体の雰囲気とマッチしています。こちらはHTML・CSSで縦書きを表示しています。 書画・掛け軸・古美術
WordPressのインストールが完了すると、早速記事を書いていきたい！という方もいると思いますが、まずはしっかりと初期設定を行いましょう。 なぜかと言うと、後から設定を変更しようとしても運営してしばらく経ってからだと「最初からやっておけば良かった…」となるような大変な作業になってしまったり、記事のURLが変わることになったりと良いことはありません。 とは言っても、WordPressは設定できる項目がたくさんあって「正直何からやれば良いのかわからない」という方、ご安心ください。 今回、必要な設定を重要度に分けて厳選しました。早く始めたい方もまずは絶対やった方が良い設定はやっておきましょう！ 前述の通りで、運営してしばらく経ってから行おうと思っても大変な作業になってしまう設定です。記事のURLが変わることになってしまったり、サイトに重大な影響がある項目です。ぜひこちらは事前に設定を行いましょ
雑誌では昔からよく使われていた境界線をあえて外す「ブロークングリッドレイアウト」。ここ最近のWebサイトの表現手法として、多くのWebサイトで取り入れられるようになってきました。 今回は、印象的でオリジナリティーも出しやすい、「ブロークングリッドレイアウト」のサイトを集めましたので、ぜひデザインの参考にしてください。 ブロークングリッドレイアウトとは？ 「グリッドレイアウト」というレイアウト手法を聞いたことがある方は多いと思いますが、レイアウトする際、決められたグリッドに沿って要素を整列して配置することで、とても見やすいデザインが可能です。 しかし規則正しく並べられた要素は見やすい反面、単調になりがちです。 「ブロークングリッドレイアウト」は、正しい規則の境界線をポイントであえて外すことで、ユーザーの視線を惹きつけ、印象的なデザインを作り出します。 ブロークングリッドレイアウトの特徴 では
最近、下スクロールで消えて、上スクロールで出てくるグローバルナビゲーションを見かけるようになりました。例えばこちらのサイトとか↓。 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
簡単に動画をWebサイトに設置できるので、Webサイト用に動画をアップする機会も多くなってきました。ですが、動画は画像に比べるとファイルサイズが大きくなりがちです。 動画ファイルサイズを下げたくても、専用ソフトはないし、かといってフリーソフト入れるのもなぁ、という場合もあるかと思います。 そこで今回は、フリーソフトいらず！動画ファイルサイズをオンラインで軽くする方法2つ！をご紹介します。
レスポンシブレイアウトでのスマホビューが圧倒的に増えて来た昨今、アコーディオンメニューは、狭い画面でユーザーが必要な情報を任意で表示することができ、ユーザビリティの観点から見ても重要なテクニックの1つです。 ということで、今回はjQueryなしでCSSだけで作るアコーディオンメニューをやっていきたいと思います。 アコーディオンメニュー 今更、説明も不要かと思いますが一応確認しておきましょう。下にある通り、クリックで開閉ができるメニューのことです。 クリックで開く1hello.world!クリックで開く2hello.world!クリックで開く3hello.world!クリックで開く4hello.world! 基本的なやり方 どうやって実装するかを簡単に説明します。 labelをクリックする アコーディオンメニューのクリック部分になります。 labelクリックでチェックボックスにチェックを付け
最近ではWebサイトにアニメーションを取り入れるのが当たり前になってきています。ひと昔前はフルフラッシュサイトで見かけたようなゴリゴリ動く表現がhtml5やCSS、JS・JQueryによって実装可能になりました。今回はそんなアニメーションの表現が優れたサイトをまとめました。 以前「サイトにプラス1の工夫を！遊び心・アイデアが面白いサイト5選」という記事でも触れましたが、大事なことはユーザーのページビューの妨げになっては本末転倒ですので、技術のひけらかしのようになってはいけません。そのサイトに必要なアニメーションを取り入れるのことが大事です。 アニメーションといってもその表現方法は様々ですので、大まかにカテゴリーにまとめてみました。 フェイドイン系 王道のスクロールしていくと要素がフワッとフェイドインしていくパターンです。要素の移動スピードやアニメーションのイージングなどで結構印象が変わりま
当サイトの目次でもやってますが、縦長のランディングページなんかを作る場合、グローバルナビゲーションはページ内リンクにして、スムーズにスクロールさせるパターンがよくあります。 ですが、特定のページを別ページにしている場合、ページの外からページ内リンクをクリックした際もスムーズにスクロールさせたいものです。 ですので今回は、ページ内リンクをページ外からクリックした際のスムーズスクロールをやっていきます。 <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 または、以前紹介した「jsDelivr」というサイトにもCDNでホストされています。 jsDelivrの使い方はこちらの記事をチェックしてみてください。
ブログを収益化して人生を豊かにデザインする
このページを最初にブックマークしてみませんか？
『Life Design DAY | ブログを収益化して人生を豊かにデザインする』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
