岡山県でWEBサイト制作（ホームページ制作）を行っています。

【技術面の解説（各テンプレート共通）】
・高画質を望む人もいるので、レンダリングの速度を重視する方はご自身でミニファイをしてください。



・dest-afterというフォルダにgulp処理後のcss（app.css）が作成されます。
このcssに、すべてのcssが集約されているので、cssはこのファイルだけをアップロードすれば利用可能です。

gulp処理前のcssは、src-beforeに存在するので、自分でいじる時はこちらをいじってください。
gulpがわからない方は、app.cssを直接いじるしかありませんが、
ミニファイしているのでわかりずらいと思います。



・ワードプレスのオリジナルのテーマ化はしておりません。



・ワードプレスで使いたい方は、クラウドソーシングなどでお願いすれば、
オリジナルのテーマ化をしてくれるので、利用可能です。
しかし、ワードプレス化が可能であると保証は出来ませんので、その旨ご理解をお願いします。

また、オリジナルのテーマ化をしない場合は、WEBデザイナーに管理をしてもらってください。
フロントエンドのプログラミングが出来ないと管理は難しいです。



・サーバサイドについては非対応です。フロントエンドサイドだけが実装されています。



・javascriptについては、ES6、ES5、jqueryが混在しています。
動作さえ正常であれば、細かい部分は気にならない方だけ購入お願いします。



・go to topボタンやsnsボタンは、グーグルマテリアルアイコンなどのWEBフォントなどを使っています。
グーグルマテリアルアイコンに存在しないものは他の方法で補っています。





・制作環境について

制作環境は、HTML5、POSTCSSの一部を使い、FLOCSSを参考にしたモダンなコーディングを行なっています。

CSS設計の教科書をベースにモダンなCSS設計で作っているので、詳細度を上げず、
タグに依存したCSSにならないように、セレクタにタグ名はつけない、
コンテナーとコンテンツを分離してかつ、こちらも同じように詳細度を上げないために、
子孫セレクタを使わない、タグ名がない分どの要素のCSSかわかりやすくする為に、
簡略化したBEMを採用するなど下記参考サイトのような特徴があります。

モジュール（コンポーネント）化して再利用性拡張性を確保する為にこのようにしています。

ご参考（こちらの考え方に近いです。）
https://www.tam-tam.co.jp/tipsnote/html_css/post10205.html



また、タスクランナーのgulpによる自動化、POSTCSSによるCSS4の先取りなども行っており、
コーディングに関して全体的にモダンな制作環境も取り入れております。
よって、最終的にはcssがミニファイ、圧縮されている事をお伝えします。



・HTMLの例。
下記のようにクラスを複数使っており、意味を理解することを重視しているので、長いクラス名が多いです。
このような特徴を受け入れられない方にはお勧めできませんので、クレームはご遠慮ください。





・CSSのユーティリティーについて
ユーティリティーは、他の方が作成してくれたものをベースに、私が必要と思うものを追加して作成しました。
私が追加したものは、わかりやすさを重視するため、できるだけクラス名を省略しない方法を採用しています。

よって、省略をしているクラス名と、省略をしていないクラス名が混在していることをご理解ください。



・ブレークポイントについて

34em（544px）
48em（768px）
75em（1200px）



ブレークポイントをemにしています。
pxの方がわかりやすいというメリットがありますが、その分、バグが多いというデメリットがあるためemを採用しています。
わかりにくいというデメリットの対策として、下記のような説明を付けるようにしています。これで問題ないと思っております。

参考情報。
ブレークポイントをemにしている理由
コリスさんの記事
http://coliss.com/articles/build-websites/operation/css/media-query-units.html

また、検証もこのブレークポイントのみで行っています。
全てのサイズでの確認は不可能なので、ブレークポイント以外の問題は、
サポート外であるとご了承ください。



・バリデーションチェックで出てくる場合があるWarningについて
視覚障碍者のための、ウェイアリアがwarningと表記されますが、
バリデーションがウェイアリアを正確に理解できていない事が原因です。

また、CSSのバリデーションチェックで下記のエラーが出ます。
Error: font-smoothing: Property font-smoothing doesn't exist.

こちらは、gulpがはいたソースコードです。
下記のような意味があるそうです。
https://delaymania.com/201508/web/css-font-smoothing/

特殊なソースコードなので、バリデータが知らない為にエラーを出しています。
バリデータは知らないものはすべてエラーにするので、
このあたりをご理解いただける方だけご購入ください。

上記はテンプレート側のミスではないので、ご理解ください。
プログラミングは全くできないが、バリデーションエラーが気になるという方は
当テンプレートは購入されないでください。

もちろんこのような理由での返品は承りません。
ただし、表記が崩れるようなミスにつながる場合はこの限りではありません。



・実機検証済みの環境について
下記の環境のみ確認済みです。
その他環境は保証外になります。



ワイモバイルで購入したネクサス5
(クローム)



windows10環境

320px⇓の環境のみ
クローム（バージョン: 83.0.4103.116（Official Build）64 ビット）
(最小サイズが問題なければ、
544pxも最低限の見た目は再現できているはずと考えて確認していません。)

768px⇓の環境のみ
クローム（バージョン: 83.0.4103.116（Official Build）64 ビット）

1200px⇓の環境のみ
クローム（バージョン: 83.0.4103.116（Official Build）64 ビット）
エッジ（バージョン 83.0.478.61 (公式ビルド) 64 ビット）
ファイヤーフォックス（バージョン: 78.0.2）

＊当テンプレートの特徴について

・連続した数字を電話番号だと誤認識してしまう問題を防ぐため、
下記を記載しています。


参考情報
https://lab.syncer.jp/Web/HTML/Snippet/5/



・jQueryの読み込みについて
こちらを参考に下記jQueryの読み込みを作成しました。
 http://qiita.com/tayasu/items/b11527df607d7661e9fc

下記のような特徴があります。
フォールバックでGoogleのCDNがダウンした場合に備える
Google Hosted LibrariesのjQueryを利用する場合、万が一にGoogleのCDNが落ちた場合はローカルのjQueryを使うようにします。


jQuery等CDNのダウンに備えたリスクヘッジ - Qiita [キータ]
http://qiita.com/kidachi_/items/5456589a799e5d787923





【その他注意点】
・私の環境で再現できない不具合については責任を負えません。
理由は、ブラウザのアドオンの問題など、購入者様の環境の特有の問題である可能性が極めて高いからです。

万が一上記記載の私の環境でも同じ不具合が発生する場合は、
私の方で修正を試みますが、他の仕事や病気の治療もありますので、
数週間から一か月ほどお時間を頂く可能性があります。

すぐに対応する事が厳しい事をご了承ください。

数日以内の対応必須の方にはお勧めできませんので、
こちらのテンプレート購入はお控えください。



・イメージと違った、ソースコードが気に入らないなどの、
お客様都合での返品には対応できません。


										

【技術面の解説（各テンプレート共通）】

・ワードプレスのオリジナルのテーマ化はしておりません。



・ワードプレスで使いたい方は、クラウドソーシングなどでお願いすれば、
オリジナルのテーマ化をしてくれるので、利用可能です。
しかし、ワードプレス化が可能であると保証は出来ませんので、その旨ご理解をお願いします。

また、オリジナルのテーマ化をしない場合は、WEBデザイナーに管理をしてもらってください。
フロントエンドのプログラミングが出来ないと管理は難しいです。



・サーバサイドについては非対応です。フロントエンドサイドだけが実装されています。
サンプルとしてHTMLファイルに問い合わせフォームのソースコードが記載されている場合がありますが、
あくまで例なので、ご自身の設定に変更してください。



・javascriptについては、ES6、ES5、jqueryが混在しています。
動作さえ正常であれば、細かい部分は気にならない方だけ購入お願いします。



・go to topボタンやsnsボタンは、グーグルマテリアルアイコンなどのWEBフォントなどを使っています。
グーグルマテリアルアイコンに存在しないものは他の方法で補っています。





・制作環境について

制作環境は、HTML5、CSS3、CSS2を使っています。

モダンなCSS設計で作っているので、詳細度を上げず、
タグに依存したCSSにならないように、セレクタにタグ名はつけない、
コンテナーとコンテンツを分離してかつ、こちらも同じように詳細度を上げないために、
子孫セレクタを使わない、タグ名がない分どの要素のCSSかわかりやすくする為に、
簡略化したBEMを採用するなど下記参考サイトのような特徴があります。

モジュール（コンポーネント）化して再利用性拡張性を確保する為にこのようにしています。



・HTMLの例。

下記のサイトと大体同じなので、下記を見て悪いと思う人は購入しないでください。
https://webcreation.space/html/privacy.html



下記のようにクラスを複数使っており、意味を理解することを重視しているので、長いクラス名が多いです。
このような特徴を受け入れられない方にはお勧めできませんので、クレームはご遠慮ください。





・CSSのユーティリティーについて
ユーティリティーは、他の方が作成してくれたものをベースに、私が必要と思うものを追加して作成しました。
私が追加したものは、わかりやすさを重視するため、できるだけクラス名を省略しない方法を採用しています。

よって、省略をしているクラス名と、省略をしていないクラス名が混在していることをご理解ください。



・ブレークポイントは下記の二つです。

640px
960px



・バリデーションチェックで出てくる場合があるWarningについて

下記のwarningは、google翻訳やマップのソースコードになるtype属性のwarningです。
html5では、削除可能ですが、グーグルのソースコードをいじることはできないので、
そのままにしています。

そもそもwarningは、致命的なエラーではないので、これによって重大な問題が起こることは
基本的にありません。

Warning: The type attribute is unnecessary for JavaScript resources.


下記のrole属性関連のwarningは、ウェイアリアは必須ではないという意味なので問題ありません。
視覚障碍者のための、ウェイアリアがwarningと表記されますが、
バリデーションがウェイアリアを正確に理解できていない事が原因です。

Warning: The banner role is unnecessary for element header
Warning: The main role is unnecessary for element main.
Warning: The navigation role is unnecessary for element nav.
Warning: The form role is unnecessary for element form.


下記は特殊文字をエラーと誤認しているだけなので問題ありません。
バリデータはしょせんプログラムなので間違ったエラーを出しているだけです。
Warning: Document uses the Unicode Private Use Area(s), which should not be used in publicly exchanged documents. (Charmod C073)
At line 58, column 306
title=''>


上記はテンプレート側のミスではないので、ご理解ください。
プログラミングは全くできないので理解は出来ないが、
バリデーションエラーが気になるという方は
当テンプレートは購入されないでください。

もちろんこのような理由での返品は承りません。
ただし、表記が崩れるようなミスにつながる場合はこの限りではありません。



・実機検証済みの環境について
下記の環境のみ確認済みです。
その他環境は保証外になります。



1.ワイモバイルで購入したネクサス5
(クローム)


2.windows10搭載PCの下記サイズ

320pxの環境を下記ブラウザで確認⇓
クローム（バージョン: 85.0.4183.102（Official Build）（64 ビット））

768pxの環境を下記ブラウザで確認⇓
クローム（バージョン: 85.0.4183.102（Official Build）（64 ビット））

1200pxの環境を下記ブラウザで確認⇓
クローム（バージョン: 85.0.4183.102（Official Build）（64 ビット））
エッジ（バージョン 85.0.564.51 公式ビルド 64 ビット）
ファイヤーフォックス（バージョン: Firefox 80.0.1）





＊当テンプレートの特徴について

・連続した数字を電話番号だと誤認識してしまう問題を防ぐため、
下記を記載しています。


参考情報
https://lab.syncer.jp/Web/HTML/Snippet/5/



・jQueryの読み込みについて

2020年現在問題なく動いていますが、
今後jquery側の変更や利用期限切れにより動かなくなる可能性があります。

たくさんのテンプレートを販売しているため、jqueryの期限切れまで対応が出来ません。
大変恐縮ではございますが、期限切れの場合は、同じ系統の最新版などにご変更いただければ幸いです。



【その他注意点】
・私の環境で再現できない不具合については責任を負えません。
理由は、ブラウザのアドオンの問題など、購入者様の環境の特有の問題である可能性が極めて高いからです。

万が一上記記載の私の環境でも同じ不具合が発生する場合は、
私の方で修正を試みますが、他の仕事や病気の治療もありますので、
数週間から一か月ほどお時間を頂く可能性があります。

すぐに対応する事が厳しい事をご了承ください。

数日以内の対応必須の方にはお勧めできませんので、
こちらのテンプレート購入はお控えください。



・イメージと違った、ソースコードが気に入らないなどの、
お客様都合での返品には対応できません。



※当テンプレートの説明はここまでです。
お疲れさまでした。