スタイル付けされたコードレビュープラットフォーム | オリジナル、AI翻訳

Home PDF

モダンなウェブアプリケーションを構築する際、スタイリングは見た目を良くするだけでなく、直感的でレスポンシブで魅力的なユーザーエクスペリエンスを作り出すことです。最近、Vue.jsで動作するコードレビュープラットフォームのStylusベースのスタイルシートを探索しましたが、そのCSSアーキテクチャは、解きほぐす価値のあるテクニックの宝庫です。このアプリがStylusを使ってポリッシュされたUIを作り上げる方法、レイアウトの構造からホバー効果まで、コードを保守しやすくスケーラブルに保つ方法について、深掘りしてみましょう。

Stylusの理由：簡単な概要

Stylusは、伝統的なCSSの冗長さを取り除き（カッコやセミコロンが不要）、変数、ミックスイン、ネストなどの強力な機能を追加するCSSプレプロセッサです。提供されたコードは、variables.stylから変数を、base.stylからベーススタイルシートをインポートしており、一貫性のある再利用可能なスタイルを設定する準備が整っています。例えば、主要な色 #1CB2EF は variables.styl で定義され、ボタンや背景で再利用されています。

レイアウトの構造：セクションとコンテナ

アプリのホームページは、.slide、.feature、.reviewer、.example、.contact など、それぞれ独自のスタイリング戦略を持つセクションに分かれています。以下に、.slide（ヒーロー）セクションのスタイルが示されています。

.slide
  height 800px
  position relative
  color #fff
  width 100%
  overflow hidden
  .bg
    background url("../img/home/hero.jpg") no-repeat
    background-size cover
    background-position-y 40%
    position 200% 200%
    width 100%
    height 100%
    padding-top 280px

主要なテクニック：

レスポンシブグリッド：Flexboxとclearfix

.feature セクションは、3列レイアウトを展示しています。

.feature
  height 450px
  padding 125px 0
  background white
  .list
    width 1160px
    margin 0 auto
    display flex
    flex-direction row
    li
      height 200px
      padding-left 50px
      flex-grow 1
      &:first-child
        padding-left 0
      .short
        width 235px
        height 200px
        margin 0 auto

ハイライト：

.example セクションは、レビューカードのグリッドをさらに進化させ、clearfix() ミックスインを使用しています。

.example
  .list
    clearfix()
    .row
      clearfix()
      li:first-child
        margin-left 0
    li
      height 354px
      margin-left 48px
      pull-left()
      margin-bottom 48px

インタラクティブスタイリング：ホバー効果とトランジション

.example のレビューカードは、スムーズなホバーインタラクションで輝きます。

li
  .info
    position relative
    height 354px
    width 100%
    color white
    box-shadow 0 4px 4px 1px rgba(135,135,135,.1)
    overflow hidden
    cursor pointer
    &:hover
      img
        transform scale(1.2,1.2)
        -webkit-filter brightness(0.6)
      .title
        -webkit-transform translate(0, -20px)
        opacity 1.0
      .tips
        -webkit-transform translate(0, -10px)
        opacity 0.8
    img
      height 100%
      -webkit-filter brightness(0.4)
      transition all 0.35s ease 0s

分解：

.author ボタンも反応します。

.author
  position absolute
  background black
  margin-left 30px
  margin-top 30px
  height 30px
  padding-left 20px
  padding-right 20px
  transition all 0.35s ease 0s
  &:hover
    background #1cb2ef

ホバー時にブランドカラー #1CB2EF に色を変えるシンプルな色のスワップは、素晴らしいタッチです。

ビジュアルポリッシュ：シャドウ、ボタン、アイコン

シャドウは深さを強調し、.info の box-shadow 0 4px 4px 1px rgba(135,135,135,.1) で見られます。ボタン、例えば .contact のものも、細心の注意を払ってスタイル付けられています。

.contact
  .rightbtn
    .more
      width 127px
      height 50px
      color #1CB2EF
      background white
      border-radius 3px
      border 1px solid #00A3E6
      -webkit-box-shadow 0px 1px 0px rgba(255,255,255,0.15) inset, 0px 1px 2px rgba(0,0,0,0.15)

アイコン、例えば .icon_crown は背景画像を使用します。

.icon_crown
  background url("../img/icon/crown@2x.png") no-repeat
  background-size contain
  width 49px
  height 52px

@2x 接尾辞はレティナ対応のアセットを示し、background-size contain は適切なスケーリングを確保します。

ベストプラクティスと学び

このStylusの実装は、どのCSSプロジェクトにも役立つ教訓を提供します：

  1. プレプロセッサを使用：Stylusのネストとミックスイン（例えば clearfix()）は複雑なレイアウトを簡素化します。
  2. レイアウトのバランス：Flexboxをモダンブラウザで、フロートベースのフォールバックを使用して、堅牢性を確保します。
  3. UXを向上：スムーズなトランジションとホバー効果はUIを生き生きとさせます。
  4. 保守性を保つ：変数とインポートを活用して、大きなコードベースでの一貫性を保ちます。

コードレビュープラットフォームや個人のポートフォリオをスタイル付けする際でも、これらのテクニックはCSSのスキルを向上させることができます。次回スタイルシートを書く際には、ネスト、トランジション、そしてシャドウの少しのタッチがデザインを変える方法を考えてみてください！

Back 2025.04.02 Donate