fylo dark theme landing page

fylo dark theme landing page - フロントエンド メンター

やあ！このプロジェクトをチェックしていただきありがとうございます!

これは、指定されたデザインにできるだけ近いランディング ページを構築するという、フロントエンド メンターの課題に対するソリューションです。目標は、現実的なプロジェクトを構築することで Web レイアウトのスキルを向上させることです。

1. 目次 ✒️

• fylo dark theme landing page - フロントエンド メンター
  • 1. 目次 ✒️
  • 2. 概要
    • 挑戦
    • プロジェクトの実行方法:
    • リンク
  • 3. 私のプロセス?
    • で構築
    • 学んだこと
    • 役立つリソース
  • 4. 著者 ??

2. 概要

挑戦

ユーザーは次のことができる必要があります。

• デバイスの画面サイズに応じてサイトに最適なレイアウトを表示します
• ページ上のすべてのインタラクティブ要素のホバー状態を確認する

fylo ダークテーマ ランディング ページ チャレンジ" style="max-width: 100%;">

チャレンジの詳細はフロントエンド メンター ページで確認できます。

プロジェクトの実行方法:

私は、Node と Gulp を使用して作成されたこのプロジェクトに取り組むために、Adalab スターター キットを使用することにしました。したがって、実行するにはまずNode JS をインストールする必要があります。

1. リポジトリのルート フォルダーでターミナルを開きます。
2. ターミナルで次のコマンドを使用して、ローカルの依存関係をインストールします。

npm install

1. 次のコマンドを使用してプロジェクトの実行を開始すると、ブラウザ ウィンドウが開き、ページのライブ バージョンが表示されます。

npm start

リンク

• ライブサイトURL: https://leireomadina.github.io/fylo-dark-theme-landing-page/
• ソリューションの URL: 近日公開予定

3. 私のプロセス?

で構築

• セマンティックHTML5マークアップ
• HTMLテンプレートシステム
• CSS3カスタムプロパティ
• フレックスボックス
• CSSグリッド
• BEM手法を使用したSASS
• ゴクゴク
• モバイルファーストのワークフローを備えたレスポンシブデザイン

学んだこと

• @forを使用してSCSS でループを作成します。この場合、紹介セクションの 2 番目と 3 番目のカードのみを選択したいと考えました。

 .card {
  @for $i from 2 through 3 {
    & -#{$i} {
      margin-top : 1.8 rem ;
      @media all and ( min-width : 768 px ) {
        margin-top : 0 ;
      }
    }
  }
}

• svg ファイルの使用と管理: viewBox 属性を使用して位置と寸法を変更し、タイトルと記述タグを追加してアクセシビリティを向上させ、インラインと CSS のスタイルを設定し、塗りつぶしやストロークを使用して色のカスタマイズを行います...
• ARIA ロールを使用してWeb アクセシビリティを向上させます。たとえば、次のナビゲーション メニュー ロールを見てください。

 < nav class =" header-menu " role =" navigation " >
  < ul class =" header-menu__list " role =" list " >
    < li class =" header-menu__list-item " role =" list-item " >
      < a class =" header-menu__link " href =" # " role =" link " >
        Features
      < a >
    </ li >
    ...
  </ ul >
</ nav >

役立つリソース

• @for を使用して Sass ループを作成する方法: https://www.youtube.com/watch?v=6CbsNFXMYgs。公式の SASS ドキュメントも参照してください。
• ARIA の役割、状態、プロパティのリスト (MDN): https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
• インライン SVG スタイル: https://www.youtube.com/watch?v=af4ZQJ14yu8&t=844s
• さらに多くのリソースが近日公開されます。

4. 著者 ??

• LinkedIn: レイレ オルデニャナ マディナ
• Twitter:@risingdana
• メール: [email protected]
• ビハンセ：レイレオマディナ
• コードペン: レイレオマディナ
• フロントエンドメンター: @leireomadina

お時間をいただきありがとうございます?