【開発日記/更新情報】ポートフォリオを ver.2 にアップデートしました

CSS/SCSS

ポートフォリオ Taniii.com の更新をしました.

更新内容

 -> 

up: portfolio,
- port: quuum, gdsc, megrio;
- link: linkedin, facebook;
- "クライアント様の声"追加;
- タブの表記英語→日本語に変更;
hotfix: portfolio,
- port masonry grid horizontal order
// port 部分のカードグリッドの横列での順番がおかしくなる問題の修正
開発日記
  • Quuum.com, GDSC TMU など最近の活動のポートフォリオを追加
  • 夏~秋に受託開発で受けた, PHPの案件について記載を追加
  • 表している内容をより明確にするために, 一部日本語化
    → カスタムフォントだと見た目も思ったより良いかも
カードグリッドの横列での順番がおかしくなる問題

困ったのは, ポートフォリオを表示しているカード部分の横方向の並び順が入れ替わっておかしくなること.

このサイトでは, もともとそれぞれのカードの高さも統一しているので, 本領発揮はしてないけれど, そもそもカードのグリッド表示には, Masonry という有名な jQuery プラグインを使っています.

これは, いわゆる Pintarest みたいな, カードが隙間なく敷き詰められた, 見た目の表示を実現するためのプラグインです. 個人の方が開発されてます.

Masonry
Cascading grid layout library
masonry.desandro.com
そして, これは, デフォルトでは, 横方向の順序を無視しています. 隙間なく敷き詰めるためのベストエフォートを実現するためです.
ただ, 今回はすべてのカードが等高なので, 順序通り表示させたいところです.
そこで, 2017年に追加された新しいオプションを使います.
horizontalOrder: true,
下の記事には, 開発者の方本人が追加した経緯などについて語ってます.
Masonry gets horizontalOrder
Masonry and Isotope
metafizzy.co
呼び出し時は結果こうなります.
    // Masonry Grid
    var $masonry = $('.gallery');
    $masonry.masonry({
      itemSelector: '.gallery-filter',
      columnWidth: '.gallery-filter',
      transitionDuration: 0,
      // ^^ add: カードグリッドの横方向の順序を無視しない
      horizontalOrder: true
    });
今回は, これで有効にならなかったのであれっとなったのですが, もしかしたらとおもって,
masonry.pkgd.min.js
を最新版で上書きしたら上手くいきました.
↓最新版は以下からダウンロードできます.
Masonry
Cascading grid layout library
masonry.desandro.com
GitHub - desandro/masonry: :love_hotel: Cascading grid layout plugin
:love_hotel: Cascading grid layout plugin. Contribute to desandro/masonry development by creating an account on GitHub.
github.com
Next...

いろいろやらないといけないことだらけなんですが, 次はとりあえず, 新作アプリのレイアウトを Dart でどんどん書いていこうと思います.

 

(2023/2/24)

コメント

ホーム
トップ