Appie
App Landing HTMLテンプレート
作成日： 16/09/2021作成者： Coreal
ご購入ありがとうございます Appie - App Landing HTMLテンプレート。このヘルプファイルの範囲を超えるご質問がございましたら、ユーザーページのお問い合わせフォームからメールいただくか、サポートセンターにチケットを送信してください。
本当にありがとうございます！
テンプレートの機能
- クリーンでシンプルなデザイン
- 高度なBootstrap 4フレームワーク
- HTML5 & CSS3
- CSS3アニメーション
- 完全レスポンシブデザイン
- すべてのファイルに適切なコメントあり
- IE10+、Firefox、Safari、Opera、Chrome対応のクロスブラウザ対応
- 詳細なドキュメント
HTML構造
このHTMLテンプレートは最新の Bootstrap v4.5 有効なHTML5タグを使用しています。このテーマは4カラム対応のレスポンシブレイアウトです。コンテンツエリアのすべての情報はクラス内にネストされ、定義済みのクラスが付属しています。
基本グリッドHTML
シンプルな2カラムレイアウトの場合、.containerを作成し、適切な数の.col-lg*カラムを追加します。
この例では、.col-md-4と.col-md-8を使用して、合計12カラムで完全な行を構成しています。
......
カラムのネスト
デフォルトのグリッドでコンテンツをネストするには、既存の.col-md*カラム内に新しい.containerと一連の.col-md*カラムを追加します。ネストされた行には、親のカラム数と同じ合計になるカラムセットを含める必要があります。
レベル1カラムレベル2レベル2レベル2カラム
CSSファイルと構造
このテーマでは主に3つのメインCSSファイルが使用されています。1つ目は bootstrap.min.css, 2つ目は style.css このテンプレート用で、レスポンシブレイアウトを制御します。
サイトの特定のセクションを編集したい場合は、CSSファイル内の該当するラベルを見つけ、編集が必要な適切なスタイルが見つかるまでスクロールダウンしてください。
これらは、style.cssファイルの上部に「default css」としてラベル付けされてテンプレートに読み込まれるCSSファイルです。 デフォルトCSS.
フォント
デフォルトでは、テンプレートはGoogle Web Font Servicesからこのフォントを読み込みます。ご自身に最適なフォントに変更できます。
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
jQueryとJavaScript
このテーマは3種類のJavaScriptファイルをインポートしています。
- jQuery
- カスタムスクリプト (main.js)
- いくつかのプラグイン
- jQuery は、記述するコードの量を大幅に削減するJavaScriptライブラリです。
- このサイトのアニメーションのほとんどはカスタムスクリプトから実行されています。確認する価値のある関数がいくつかあります。
カスタムスクリプトに加えて、エフェクトを作成するためにいくつかの「実績のある」プラグインを実装しています。このプラグインはパッケージ化されているため、ファイル内で手動で編集する必要はありません。知っておくべき唯一のことは、メソッドの呼び出し方です。
これらは、Bodyセクションの最後にテンプレートに読み込まれるJSファイルです。
チュートリアル
ロゴ
テンプレートの更新を始めましょう。index.htmlファイルを開き、手順に従ってください。
ほとんどの更新はすべてのページで同じです。そのため、ここで一度説明します。
「images/logo.png」を、ロゴ画像のURLソースまたはウェブサイト名に置き換えてください。
ナビメニュー
これが基本構造です。
そのul liアイテムに独自のメニューアイテムを追加してください。ドロップダウンメニューを追加したい場合は、クラス「sub-menu」を持つul liをネストするだけです。 サブメニュー
フッター著作権
「© Copyright Appie 2021 . All right reserved.」を著作権情報に置き換えてください。
ソースとクレジット
テンプレートで使用されているフォントはGoogleフォントです。Google Fonts APIで見つけることができます。
使用されているフォント：
アニメーション効果に使用されるファイル：
animate.min.css (cssフォルダ内)
使用されているスライダー：
使用されているプラグイン：
slick.min.js (jsフォルダにあります)
jquery.counterup.min.js (プラグインフォルダにあります)
jquery.magnific-popup.min.js (プラグインフォルダにあります)
すべてのコードは編集しやすいように適切にコメントされています。