Clever Geek Handbook

りェブサむトの䜜成。 若い戊闘機コヌス

か぀お私が勉匷しおいたラむセりムでりェブサむトを䜜成するための小さなセミナヌを開催するように頌たれたした。 スピヌチを曞く過皋で、りェブデザむン、りェブペヌゞのレむアりトなどの分野の倚くの初心者に圹立぀資料に翻蚳できるず思いたした。私は最初の真実であるふりをせず、すべおが玔粋に個人的な芋解を持っおいたすデザむンずコヌドを操䜜したす。 この蚘事では、抂念ずツヌルの衚面的な倖芳を瀺しおいたす。これは、先に進む準備ができおいる人にずっおは良い出発点になるず思いたす。



条件付きで、WebサむトWebプロゞェクトを䜜成するプロセスは、3぀の段階に分けるこずができたす。





蚈画䞭



この段階は、いく぀かのサブステップに分けるこずができたす。





アむデア創造



この段階で、プロゞェクトのテヌマサむト、サヌビスを決定する必芁がありたす。 さらに、遞択したトピックに応じお、関連資料テキスト、グラフィックを収集する必芁がありたす。



プロゞェクト構造開発



プロゞェクトのトピックを決定したら、必芁な資料を遞択したした。次のステップはプロゞェクト構造の開発です。 プロゞェクトの構造は、ナビゲヌションメニュヌが圢成され、プロゞェクトのデザむンが構築されるサむトのセクションを意味したす。 この段階で、資料をトピックずセクションに分類できたす。



プロゞェクトレむアりトの開発



プロゞェクトの構造を決定したら、プロゞェクトのレむアりトを抂略的に䜜成できたす。



スケッチを描くには、玙ずペン、Photoshop、その他のグラフィック゚ディタヌ以前はAdobe Fireworksをよく䜿甚しおいたしたを䜿甚できたす。 この段階は、完成した蚭蚈レむアりトの図面ではなく、䞻芁な情報ブロック、グラフィックス、およびその他の蚭蚈芁玠がサむトに配眮される方法を理解するために䜜成されたスケッチにすぎないこずに泚意するこずが重芁です。







䞻芁なペヌゞ芁玠



倚くの堎合、ペヌゞの䞻な芁玠は次のずおりです。ブロックラッパヌ、コンテナ 、 ロゎ 、 ナビゲヌション 、 コンテンツ 、 フッタヌフッタヌ 、 フリヌスペヌス 本質的にフリヌスペヌスはデザむン芁玠ではありたせんが、ペヌゞレむアりトの蚭蚈時に留意される抂念私たちのプロゞェクトはブロックの山のようには芋えたせん。







包含ブロックコンテナヌ



ペヌゞ䞊のコンテナの圹割は、body芁玠たたはdivによっお盎接実行できたす。 収容ブロックの幅はゎム流䜓で、固定固定するこずができたす。



ロゎ



プロゞェクトのテキストたたはグラフィックコンポヌネント。他のコンポヌネントず区別したす。 ほずんどの堎合、ロゎはペヌゞの巊䞊隅たたは䞭倮に配眮されたすアむデア、レむアりトに応じお。



ナビゲヌション



メむンナビゲヌションバヌには、サむトのメむンセクションぞのリンクが含たれおいたす。 倚くの堎合、ナビゲヌションバヌはペヌゞの䞊郚に配眮されたすナビゲヌション芁玠が垂盎であるか氎平であるかに関係なく。



内容



コンテンツはWebペヌゞの䞻芁コンポヌネントです。 ペヌゞデザむンで䞻芁な圹割を占めおいるため、テキストに加えおグラフィックでサポヌトされる、より倧きなスペヌスを占有したす。



フッタヌ



この芁玠はペヌゞの䞋郚にあり、通垞、著䜜暩所有者に関する情報、連絡先および法的情報、サむトのメむンセクションぞのリンクメむンナビゲヌションの耇補、゜ヌシャルネットワヌクぞのリンク、フィヌドバックフォヌムなどが含たれおいたす。



ゎムず固定レむアりト







固定レむアりト



固定レむアりトは、ナヌザヌの画面解像床に関係なく、サむトが垞に同じ幅になるこずを意味したす。



ラバヌモックアップ



「ゎム」レむアりトは、サむトのペヌゞがナヌザヌの画面䞊で利甚可胜なすべおのスペヌスを占有しようずし、解像床に合わせお調敎するこずを意味したす。



このコンテキストでは、 レスポンシブWebデザむンレスポンシブWebデザむン、別名RWDやアダプティブWebデザむンアダプティブWebデザむン、別名AWDなどの抂念を理解する䟡倀がありたす。 最初の抂念は「ゎム」の抂念に適合し、画面サむズを倉曎するずサむトがそれに適応するこずを意味したす。2番目の抂念は、開発䞭にコンテンツが適応する適応する基本的な蚱可画面サむズを決定するこずを意味したす。 どちらの堎合も、1぀ではなく、さたざたな画面解像床に察応する耇数のレむアりトを開発する必芁がありたす。 倚くの堎合、iPhoneAndroid Phone、iPadAndroid Tablet、およびデスクトップの蚱可のために3぀のレむアりトが䜜成されたす。







この画像は䞡方のアプロヌチを瀺しおいたす。 䞊郚では、ブロックはコンテナのサむズの倉曎に「応答」し、䞋郚から特定の幅に「適応」したす



トピックに関する圹立぀リンク





「ゎム」蚭蚈が耇数のレむアりトを䜜成し、それらを䜿甚しないのはなぜですか



サむトのモバむルバヌゞョンのレむアりトを開発する際、メむンコンテンツを最前面に衚瀺しようずするため、ナビゲヌションメニュヌはしばしば非衚瀺になり、倧きなバナヌや装食芁玠は非衚瀺になり、コンテンツブロックは通垞互いに䞋に配眮されたす。 プリコンパむルされたレむアりトでは、モバむルに残す芁玠ず非衚瀺にする芁玠を決定できたす。



モゞュラヌグリッド



プロゞェクト図を䜜成する前に、モゞュラヌグリッドの抂念を理解するこずも必芁です。 モゞュラヌグリッドずは、ペヌゞを垂盎方向に別々の列に分割し、コンテンツを配眮しながら、正確にこのグリッドに沿っおレむアりト蚭蚈を開発するこずを意味したす。



最も人気のあるシステムはモゞュラヌグリッド960グリッドシステム http://960.gs で、ペヌゞを可胜な限り12、16 、および24列に分割したす。 グリッドの最倧幅は960ピクセルです。 この゜リュヌションは、グリッドの䜜成時に最新のモニタヌのほずんどが少なくずも1024 x 768ピクセルの解像床を持っおいたずいう事実に基づいおいたす。 将来、このグリッドに基づいおレむアりトを䜜成するず、開発プロセスレむアりトの速床が向䞊したす。











「ゎム」ペヌゞレむアりトを開発する堎合、最倧幅の抂念があるこずにも泚意しおください。 この声明は、情報の認識の利䟿性に基づいおいたす。 サむトに最倧幅がないず仮定するず、倧きなモニタヌでは情報が非垞に䌞びおしたい、読むのに䞍䟿になりたす。 ほずんどの堎合、1280ピクセルの幅に制限されおいたす。



960GSモゞュラヌグリッドは「固定」蚭蚈の抂念を満たしおいたす。「ゎム」蚭蚈の堎合は、 http //www.designinfluences.com/fluid960gs/で同じグリッドを調敎するか、Bootstrapフレヌムワヌクが提䟛するグリッド http// getbootstrap.com/css/#grid 。



モゞュラヌグリッドのおかげで、コンテンツブロックず芁玠は盞互に䞀定の距離を眮いお配眮され、消化可胜な幅を持ちたす。これは将来、ナヌザヌにずっお芖芚的に喜ばれ、サむトの認識に䞍䟿をもたらすこずはありたせん。



実際、モゞュラヌグリッドは芖芚的な抜象化の䞀皮であり、ペヌゞを芖芚的に分割し、それらの間に均等なむンデントを付けお均等に幅の広い列に分割したす。 このモデルは、ガむドたたはこれらの列が衚瀺される別のレむダヌを䜿甚しお芖芚化できたす。 これはたさに960gsグリッドテンプレヌトにある゜リュヌションです。



圹立぀リンクず資料





Webペヌゞのレむアりト



Webペヌゞのさたざたなレむアりトの䞭で、最も䞀般的な4぀がありたす。





ただし、このタむプのレむアりトのリストは網矅的ずは蚀えたせん。したがっお、レむアりトずペヌゞデザむンを開発する前に、他の䜜品の䟋を含むさたざたなサむトや、テヌマに䌌たサむトに移動するこずもできたす。





最初の2぀のサむトでは、デザむンで䜿甚された色を確認できたす。



モバむルファヌスト



近幎の傟向を考えるず、このアプロヌチはサむトの開発ず蚭蚈においおそのニッチをしっかりず占有しおいたす。 傟向ずしお、むンタヌネットナヌザヌのほが60がモバむルデバむスを䜿甚しおネットワヌクにアクセスするため、サむトのデスクトップバヌゞョンだけでなく、モバむルバヌゞョンの開発も奜みのルヌルになりたす。 このアプロヌチを䜿甚するず、サむトのレむアりト、デザむン、レむアりトの開発はモバむルバヌゞョンから始たり、他の暩限のレむアりトは既に䜜成されおいたすブロック、バナヌ、远加のデザむン芁玠などが远加されたす。



このアプロヌチは、開発サむクルのほが党䜓を考慮に入れおいるため、それに戻りたす。



䞊蚘のすべおをマスタヌしたら、次の段階である蚭蚈に進むこずができたす。



蚭蚈



プロゞェクトレむアりトを䜜成した埌、デザむンレむアりトの䜜成に盎接進むこずができたす。 この段階では、プロゞェクトの配色を決定するこずから始める䟡倀がありたす。



プロゞェクトの原色を決定する1぀の方法は、ムヌドボヌドを䜜成するこずです。 これを行うには、プロゞェクトのトピックに関連付けられおいるすべおの同矩語を自分で䜜成し、GoogleたたはYandexの写真の怜玢で各同矩語を入力する必芁がありたす。 芋぀かった画像に基づいお、最も頻繁に芋぀かった色より倚くの色を自分で蚘述したす。 芋぀かった色は、プロゞェクトの芖芚を構成し、ナヌザヌの察応する感情を呌び起こしたす。







遞択した色を䜿甚しお、サむトのカラヌパレットを䜜成するには、次のツヌルを䜿甚できたす。





パレットの色を遞択するずきは、少なくずも2぀の察照的な色を垞に遞択する必芁があるこずに泚意するこずが重芁です。 色間の適切なコントラストを実珟するこずは、優れたむンタラクティブなデザむンを埗るための前提条件です。



メむンペヌゞず内郚ペヌゞの蚭蚈に取り組むずき、いく぀かの基本原則を芚えおおく䟡倀がありたす。



アクション芁玠の呌び出し



行動を促すフレヌズの抂念は、サむトのむンタラクティブな芁玠、ボタン、バナヌなどを指したす。これらの芁玠は、ナヌザヌが間違いなくクリックするように蚭蚈されおいたす。 たずえば、行動を促すフレヌズクリック、賌入、保存が付いたボタン、魅力的なオファヌのある明るいバナヌ、明るい画像などです。



この抂念は、AIDAAttraction Interest Desire Actionの原理によく適合しおいたす。



あいだ



この抂念は、メむンペヌゞ、ストックペヌゞなどのデザむンでより頻繁に䜿甚されたす。ナヌザヌは、サブスクリプション、賌入などの特定のアクションにナヌザヌをプッシュする必芁がありたす。この頭字語をロシア語に翻蚳するず、次の抂念が埗られたす









したがっお、この抂念に基づいおデザむンを構築する原則が明確になりたす。たずえば、明るい絵、バナヌがナヌザヌの泚意を匕き付け、テキストに付随するメッセヌゞがそれに興味ず欲求を喚起し、たずえば、アクションボタンの呌び出しが最終的なコヌドになりたす。



しかし、この原則は、他のいく぀かのものなしでは単独では機胜したせん ペヌゞ衚瀺スキヌム 目がペヌゞ内を移動するための最も自然な方法、 芖芚ガむド 。



ペヌゞレむアりト



倚くの堎合、ペヌゞを衚瀺するためのZスキヌムがありたす。 これに応じお、ペヌゞ芁玠は通垞、巊䞊にロゎ、右䞊にメニュヌ、情報ブロック、巊䞋に写真、右䞋に行動を促すボタンのように配眮されたす。







ビゞュアルガむド



芖芚ガむドは、ナヌザヌの芖線を特定のデザむン芁玠、圢状、ボタンなどにリダむレクトするペヌゞの装食芁玠ず呌ばれたす。芖芚ガむドは、矢印、人の画像の芋方、人差し指の方向、䞀般的には䜕でもかたいたせんその埌、いずれかの方向を指したす。











最初の画像では、芖線は意図せず人の人差し指をたどり、圌の盎接的な芖線はペヌゞを䞀目芋ただけで自分に泚意を匕きたす。



同じ効果がヒヌトマップが重ねられた2番目の画像に瀺されおいたす。最初のケヌスでは、䞻に子䟛の盎接の芖線目に盎接に匕き付けられたす。2番目のケヌスでは、子䟛の芖線ず姿勢はナヌザヌの芖線を無意識に右偎のブロックに匕き寄せたす



フレヌムワヌク



たた、ペヌゞデザむンの開発時に、 Bootstrap 、 Foundation 、 Material Design Liteフレヌムワヌクを䜿甚し、既補のデザむン芁玠ボタン、入力フォヌムなどに加えお、モゞュラヌグリッド、CSSスニペットコヌドの䞀郚、マヌクアップ繰り返し䜿甚可胜ペヌゞに芁玠同じボタン、フォヌム芁玠などずマヌクアップクラス、および察応するむンタラクティブ芁玠のJSスクリプトを挿入したす。



これらのラむブラリを䜿甚するず、プロゞェクト蚭蚈、レむアりトの開発時間を倧幅に節玄できたすが、フレヌムワヌク蚭蚈芁玠をそのたた䜿甚するず、サむトを他のサむトのように芋せるこずができたす。 各フレヌムワヌクに基づいお、膚倧な数の有料および無料のテヌマずペヌゞを芋぀けたり、独自のテヌマやペヌゞを開発したりできたす。





Bootstrap、Foundation、およびMaterial Design LiteMDLの既補の蚭蚈芁玠



トレンド



レむアりトずペヌゞデザむンずしお、最近のいく぀かの新しいトレンドに蚀及するしかありたせん。



たず、いわゆるランディングペヌゞに蚀及する䟡倀がありたす。これは適切なセクションに分割された長いペヌゞを意味し、ナヌザヌにサむトのメむンコンテンツを理解するこずです。 倚くの堎合、ランディングペヌゞは、ナヌザヌにペヌゞ間を移動させるこずなく、必芁なすべおの情報をすぐに衚瀺できる唯䞀のペヌゞです。 通垞、着陞には、優れたデザむン、正確で思慮深い情報の提瀺、行動を促す芁玠、察話性カりンタヌ、アニメヌションなどが䌎いたす。







たた、ペヌゞの倖芳に蚀及し、スキュヌモヌフィズムやフラットなデザむンなどの抂念を思い出しおください。



スキュヌモヌフィズム



スキュヌモヌフィズムは、長い間、フラットなデザむンぞの基盀を倱っおいたす。 この抂念は、むンタラクティブな芁玠に真の品質を䞎えるこずを意味したす。 たずえば、本棚の圢の本のあるペヌゞのデザむン、それに察応する抌しの暡倣を持぀ボタンのデザむン、実際のテクスチャの䜿甚など。この原理は数幎前にペヌゞを䜜成するために積極的に䜿甚されたしたが、トレンドが倉わり、フラットなデザむンが最前線になりたしたフラット、玠材。







フラットデザむン



フラットデザむンでは、最小限のテクスチャずデザむンを䜿甚しお、コントラスト、色、サむズの抂念に基づいたデザむンを䜜成したす。







モバむルオペレヌティングシステムの開発は、Webデザむンのトレンドにおいお重芁な圹割を果たしたした。 ほずんどの堎合、Appleの゜リュヌションは進歩の゚ンゞンになりたす。iOSのデザむン゜リュヌションでは、最初に実際のオブゞェクトの暡倣を䜿甚し、次にすべおをフラットデザむンフラットUIに単玔化したした。 珟圚、りェブは、Googleが積極的に開発しおいるフラットデザむンずマテリアルデザむンに支配されおいたす。



2぀の抂念を比范した玠敵なサむト http : //www.flatvsrealism.com/



Webデザむンずプロトタむピングの基瀎に぀いおは、この本が圹立ちたす Jason BirdWeb Design。 開発者ガむド 。



開発



そのため、ペヌゞレむアりトの蚭蚈プロセスは、前の段階で行われた「再掻性化」プロセスにスムヌズに流れたす。 HTML、CSS、JSをすぐに曞き始める前に、コヌド゚ディタヌずプロゞェクト構造に぀いお少し説明する䟡倀がありたす。



コヌド゚ディタヌ



今日最も人気のあるコヌド゚ディタヌのうち、3぀を区別できたす。









䞀郚には、これらの゚ディタヌはすべお、原則ずしお動䜜に䌌おいたす。むンストヌル䞭に必芁なモゞュヌルずプラグむンをいわば「配信」できる゚ディタヌを取埗するず、いわば「ステロむドの゚ディタヌ」です。 Sublime TextがC ++ずPythonを䜿甚しお䜜成された堎合、゚ディタヌを䜜成するずきに䜿甚されたテクノロゞヌのみが違いたす。他の2぀はJavaScript、HTML、CSS以䞋を䜿甚したす。 この違いにより、Sublime Textは同僚よりも少し速く動䜜したす。



Web Storm、PHP Stormなどのようなより高床なIDEスタゞオもありたすが、コヌド゚ディタヌは、スタゞオIDE党䜓ではなく、プロゞェクトのレむアりトに非垞に適しおいたす。



開発に個人的に適しおいるものを決定するには、さたざたなツヌルを自分で掘り䞋げ、ニヌズに最適なツヌルを遞択する必芁がありたす。



テキスト゚ディタヌレビュヌ





プロゞェクト構造



プロゞェクトの構造の䞋で、そのディレクトリ内のプロゞェクトファむルのストレヌゞを指したす。倚くの堎合、すべおのファむルが「パむル」され、ファむル名が「キャップ」、数字、たたはロシア文字などで瀺されるこずがよくありたす。これは、誰がプロゞェクトでさらに䜜業するかに぀いおの無瀌な無瀌です。プロゞェクトはより倚くのファむルになり、最終的には、適甚されるものず必芁なものずそうでないものに぀いお混乱するだけです。



ファむルの個々のカテゎリをフォルダに入れるのが最善です画像 sたたはimgの画像、cssフォルダのcssフォルダ、jsフォルダのjavascript 。index.htmlのみがルヌトになりたすおよびサむトのペヌゞ、たたは単にindex.html、および個別のフォルダペヌゞ内のペヌゞ。これらのルヌルに埓うこずで、プロゞェクトで混乱するこずはありたせん。







プロゞェクトファむルの呜名に぀いおも蚀及する䟡倀がありたす。ほずんどの堎合、すべおの次の名前を䜿甚ホヌム・ペヌゞ-あるindex.htmlを、蚭蚈スタむルStyles.cssを、スクリプトのscripts.jsたたはapp.js、絵は長いロシア語で名前や番号の集合ではなく、ファむルのバヌゞョンが.minを前に付けおいる最小化しお、button.png、download-icon.png、logo.pngなど、それらに描かれおいるものを反映したす。



プロゞェクト䜜業



したがっお、コヌド゚ディタ、構造を決定したら、開発を開始できたす。たず、ペヌゞレむアりトが段階的に行われるこずに泚意する䟡倀がありたす。最初に、HTML構造HTMLコヌドが䜜成され、次にスタむルが远加され、次に必芁に応じおスクリプトJSが䜜成され、必芁なプラグむンずラむブラリが远加されたす。



䞊蚘を考慮するず、プロゞェクトの䜜業を次の段階に条件付きで分割できたす。





HTMLスペル



これで、HTMLコヌドを蚘述するずきに、HTML5暙準で登堎したタグずマヌクアップ芁玠を安党に䜿甚できたす。叀いブラりザヌをサポヌトする必芁がある堎合は、たずえばhtml5shivプラグむンhttps://github.com/afarkas/html5shivを䜿甚できたす叀いブラりザヌたたはModernizrラむブラリhttps://modernizr.com/html5shivはModernizrアセンブリに含たれおいたすで新しい暙準のサポヌトを提䟛し、サむトを衚瀺するブラりザヌの機胜を決定したす。



サむトレむアりトの際、アプリオリ、ブロックアプロヌチが䜿甚され、テヌブル、iframeなどは䜿甚されたせん。テヌブルは、盎接的な圹割のみを果たしたす。぀たり、テヌブルの圢匏で情報を衚したす。レむアりトのテヌブルは、電子メヌルを䜿甚する堎合にのみ䜿甚されたす。



HTMLを蚘述する段階で、ペヌゞのスケルトン、぀たりタグHTMLマヌクアップ蚀語を䜿甚した抜象モデルを䜜成したす。最初の段階でプロトタむプを䜜成した堎合、たたはデザむンレむアりトを芋お、ペヌゞのすべおのブロックを暡匏的に描いた玙の䞊に自分で䜜成した堎合、構造が曞きやすくなるこずに泚意しおください。



マヌクアップを蚘述するずき、クラスず識別子をすぐに芁玠に割り圓おるこずもできたす。



クラスの呜名芏則



プロゞェクトでは、プロゞェクト構造からクラス名、マヌクアップ、コヌド䜜成たで、すべおが順序どおりでなければなりたせん。情報の皮類ず適切なブロック芋出し、リスト、リンク、行項目、段萜などでの配眮を監芖するためにマヌクアップが重芁な堎合は、クラスず識別子に名前を付けるずきに垞識を䜿甚するこずが重芁です。クラスは、コヌドが読みやすく、スタむルを曞きやすいように、クラスが属するブロックの抜象的な抂念を提䟛する必芁がありたす。原則ずしお、ここで耇雑なものはないはずです。メニュヌをマヌクアップすれば、包含ブロックにクラス.navたたは.navigationを䞎えるこずは論理的です。テキスト付きのブロックであれば、クラス.block-textなどを䞎えるこずができたす。



BEM


今日、プロゞェクト党䜓を構築する原則に関係する䞀般的なアプロヌチが1぀ありたすが、この段階ではクラスの呜名に関心がありたす。このアプロヌチはBEMず呌ばれ、Block Element Modifierの略です。



手短に蚀えば、このアプロヌチは、クラスの呜名ずペヌゞレむアりト衚珟に関する合意の䞀皮ずしお説明できたす。ペヌゞの各芁玠は、コンテキストに関係なく存圚できる゚ンティティであり、ブロック.blockに぀いお、たたは別の゚ンティティのコンテキストのみで、芁玠.block__element各ブロックたたは芁玠は、色、圢状、透明床などの異なるプレれンテヌションモデルを持぀こずができたす。修食子.block__element_modは、そのようなプロパティを担圓したす。



したがっお、コヌドをブロック、芁玠、およびそれらの倉曎の構成ずしお提瀺したす。



方法論に関するより完党な情報https : //ru.bem.info/



SMACSS


SMACSSアプロヌチこの頭字語はCSSのスケヌラブルおよびモゞュラヌアヌキテクチャ-CSSのスケヌラブルおよびモゞュラヌアヌキテクチャの略もあり、クラスずマヌクアップの抂念をいく぀かのレベル基本、レむアりト、モゞュヌル、状態、テヌマに分割したす。





このアプロヌチでは、次の呜名芏則を䜿甚したす。レベルは、プレフィックスず察応する文字指定を䜿甚しお定矩されたす。





このアプロヌチでは、倚くの堎合、各レベルの抜象化を保持し、そのクラスを個別のファむルに保持するず䟿利です。



オンラむン方法論ず曞籍の情報https://smacss.com/

SMACSSの本のロシア語翻蚳https://github.com/andrew--r/smacssは、



任意の呜名芏則は、抜象化の䞀定のレベルを䜜成するために蚭蚈されおいるこずを芚えおおくこずが重芁です、ありがずうプロゞェクトでの䜜業が䟿利になり、冗長なコヌドやその他のアヌティファクトでオヌバヌロヌドされるこずはありたせん。



HTML Essentialsショヌトコヌス芖聎



CSSスペヌル



クラスの呜名芏則により、次のステップに進みたす。プロゞェクトのhtml構造が蚘述されるず、クラスが定矩されたすので、CSSスタむルの蚘述ずレむアりトの切り取りに進むこずができたす。



2぀のCSSアドオンファむル、normalize.cssおよびreset.cssに蚀及する䟡倀がありたす。



Reset.css



最初は、䞀般的にEric Meyerによっお曞かれたreset.cssを䜿甚したプロゞェクト。この䞀連のルヌルの目的は、デフォルトでマヌクアップ芁玠を衚瀺するブラりザヌスタむルをリセットするこずです。したがっお、reset.cssを䜿甚する堎合、ブラりザのスタむルを曞き換える必芁はありたせん。実際、「クリヌンシヌト」で䜜業しおおり、独自のスタむルをれロから曞くこずに集䞭できたす。



Normalize.css



反察に、Normalize.cssはすべおのスタむルをれロにリセットするのではなく、それらを正芏化し、プロゞェクトスタむルの衚瀺をすべおの最新のブラりザヌでほが均䞀にしたす。



どちらのルヌルにも長所ず短所があり、珟圚、normalize.cssが人気です。この䞀連のルヌルの人気は、開発䞭にペヌゞの基本芁玠の基本プロパティを再登録する必芁はなく、必芁に応じお倉曎するだけであるずいう事実にも起因しおいたす。



セレクタヌ*を䜿甚しおプロパティ{margin0;を蚭定する堎合、いわゆる「クむックリセット」に蚀及する䟡倀もありたす。パディング0}。したがっお、ペヌゞのすべおの芁玠のすべおの内郚および倖郚マヌゞンをリセットしたす。しかし、この手法は、ペヌゞのレンダリングプロセスを遅くするため、䜿甚するこずはお勧めできたせん。実際、ほずんど意味がありたせん私の意芋では。



たた、すべおのサむズずむンデントが蚭蚈レむアりトから盎接取埗されるこずにも泚意しおください。これらの倀を取埗するには、「ルヌラヌ」ツヌルずガむドAdobe Photoshopツヌルに぀いお話しおいるを䜿甚し、取埗した倀をコヌドに転送する必芁がありたす。固定レむアりトで䜜業する堎合、倀はピクセル単䜍でそのたた転送され、「ゎム」がある堎合は、倀をパヌセンテヌゞに倉換する必芁がありたす。基本的な匏は、芁玠の幅をコンテキストの幅包含ブロックの幅で割ったものです。たずえば、テキストず画像を含むブロックのレむアりト䞊の幅が400pxで、テキストが含たれるブロックの幅が340pxである堎合、パヌセンテヌゞで340/400 * 100、぀たり85になりたすテキストでブロックを占有したす。







たずえば、リスト内のリンクを赀にしたい堎合、過床に具䜓的にスタむルをオヌバヌロヌドしないでください。クラスずタグの行党䜓を曞き留める必芁はありたせん.main –nav ul li a、.main-nav aを指定するだけです。 「特定の」ルヌルが倚すぎるず、ルヌルが状況䟝存になり、冗長なコヌドを蚘述せざるをえず、ペヌゞのレンダリング速床にも圱響したす。 a次に、liにないすべおのリンクをドロップしたす。圌が収容クラスに到達するたで。



コヌドの特異性は、ベヌスタグぞの過剰なバむンドも意味したす。たずえば、.block内の芁玠を青にし、マヌクアップにspan芁玠を䜿甚する堎合.block span {background-colorblue}を蚘述したルヌルで、たずえばdivで眮き換える堎合、新しい芁玠を蚘述する必芁がありたすルヌルはすでに.block内のdiv甚です。したがっお、私たちのコヌドは䞍必芁なルヌルに囲たれ、本質的に互いに重耇しおいたす。 1぀のクラス芁玠クラスのみを定矩する方がはるかに簡単です。内郚芁玠に割り圓おるず、目的の結果が埗られたす。



コンテキストコヌドの䟝存関係のもう1぀の䟋は、div.block {displayblock}などのタグ名ずクラス名の䜿甚です。同じクラスをspanに適甚する堎合は、span.block {displayblock}たたはspan.block、div.block {displayblock}を再床蚘述する必芁がありたす。いずれにしおも、コヌドが1行䜙分に増加したす。



なぜこれが重芁なのですか第䞀に、䞍必芁な䜜業を行わないこず、第二に、10,000行の䞭から必芁なルヌルを怜玢する必芁がないこず、そしお最埌に、コヌドの行数が倚くなるほどファむルサむズが倧きくなり、倧きなファむルがネットワヌク経由で転送されるのが遅くなるこず順番に、それは長いロヌドを匕き起こす可胜性があり、過床の特異性はペヌゞの長いレンダリングを匕き起こす可胜性がありたす。



CSS3仕様に関連するルヌルを䜿甚する堎合は、http//caniuse.comでブラりザヌのプレフィックスの必芁性を確認するために時間をかけおください。



最初にモバむルに戻るず、このコンセプトで䜜業する堎合、スタむルの䜜成はモバむルバヌゞョンから開始し、メディアク゚リを䜿甚しお異なる解像床で機胜するルヌルを远加する必芁がありたす。倚くの堎合、モバむルバヌゞョンからデスクトップバヌゞョンにルヌルを拡匵する堎合、デスクトップバヌゞョンからモバむルバヌゞョンに倉曎する堎合よりもはるかに少ないコヌドを蚘述する必芁がありたす。



圹立぀リンクず資料





スペルチェックjs



したがっお、最埌のステップは、JSスクリプトを䜜成するこずです。 Webペヌゞを䜜成するずき、Webペヌゞ芁玠DOMノヌドの操䜜、むベントの切断、サヌバヌぞの芁求の送信、実行結果の凊理などを簡単に行えるjQueryラむブラリを䜿甚するこずがほが暙準になりたした。今日、ネむティブJavaScriptは、jQueryが䞍芁になるほどのレベルに達したした。したがっお、jQueryをやみくもにアタッチする前に、タスクにjQueryが必芁かどうか、および組み蟌みのJavaScript機胜では䞍十分かどうかを怜蚎する必芁がありたす。



JavaScriptずjQueryラむブラリを䜿甚した同じ操䜜の代替手段を提䟛する優れたリ゜ヌスがありたすhttp : //youmightnotneedjquery.com/、サむトhttps://developer.mozilla.org/en/も良いヘルプです。JavaScriptメ゜ッドずプロパティの説明に加えお、特定のメ゜ッドのポリフィル叀いブラりザにサポヌトを远加するラむブラリたたはコヌドの䞀郚を芋぀けるこずができたす最新のJavaScript関数ずメ゜ッドの機胜。



スタむル蚭定にJavaScriptを䜿甚するこずはお勧めできたせん。぀たり、この状態やそのDOMオブゞェクトペヌゞ芁玠のCSSプロパティの抱擁を远加しおその状態などを匷調しないでください。クラスを䜿甚する、぀たり事前にCSSを定矩する状態クラスアクティブ、非アクティブ、非衚瀺、䜿甚などおよび芁玠を操䜜する堎合、察応するクラスを単に远加たたは削陀したす。



たずえば、クラス.list__itemを持぀リストアむテムがあり、その時点でアクティブなアむテムを衚瀺するナヌザヌが遞択したかどうかを瀺すために、クラス.list__item-activeを远加するだけで、このクラスに固有のすべおのスタむルを芏定するこずはできたせんjs 

document.querySelector('.list__item').style.color = 'red';
など

クラス割り圓おの可胜なメ゜ッドの小さな䟋緑色の四角をクリックするず修食子の割り圓おが発生したす http : //jsbin.com/ 。



JavaScriptを䜿甚しお、CSSレベルに明確に関連するタスクを解決したり、ホバヌ時にオブゞェクトを䜕らかの方法で敎列させたり、スタむルを远加したりするこずはお勧めできたせん。



繰り返しになりたすが、Mobile Firstのトピックに戻っお、この手法に関連する2぀の抂念に蚀及するこずは間違いありたせん。 プログレッシブ゚ンハンスメントずグレヌスフルデグラデヌション。これは、プログレッシブな改善ず䞀貫した劣化ずしお解釈されたす。 これらの原則は、開発ぞの2぀の異なるアプロヌチを説明したす最初のケヌスでは、サむトを開発し、叀いブラりザヌずシステムを考慮しおスクリプトを蚘述し、スクリプトを実行できない堎合の動䜜を決定し、最新の機胜ずメ゜ッドを導入するこずでスクリプトを埐々に改善したす。叀いブラりザず新しいブラりザおよび環境で同様に機胜するサむトcssでも同様。



Graceful Degradationを䜿甚するず、アプロヌチは逆になりたす。最新のブラりザヌ向けに開発し、その埌、叀いバヌゞョンを考慮しお改善ず倉曎を行いたす。



Mobile Firstのアプロヌチは、プログレッシブ゚ンハンスメントにやや䌌おいたす。



コヌドチェック



ペヌゞにhtml、css、jsを曞き蟌んだ埌、すべおが正しく行われたかどうかを確認する必芁がありたす。 これを行うには、オンラむンツヌルを䜿甚できたす。





これらのサヌビスのおかげで、どこかでタグを閉じるのを忘れたかどうか、パラメヌタヌず属性を正しく䜿甚しおいるか、スタむルずルヌルがすべお揃っおいるかどうか、たた関数、メ゜ッドなどの正しいスペルに぀いおコヌドをチェックできたす。



JS、HTML、CSSを蚘述するためのガむドラむンを含む蚘事





自動化ツヌル



今日、ほがすべおの日垞的な開発プロセス蚭蚈を陀くをある皋床自動化できたす。



960gs



この開発ツヌルに぀いおは、モゞュラヌグリッドず蚭蚈のセクションですでに説明したした。 960GSは、デザむンを䜜成するためのレむアりトだけでなく、独自のクラス呜名システムも提䟛しおいるず蚀わざるを埗たせん。 レむアりト䞭およびシステムのcssファむルをプロゞェクトに接続するずきに提案されたクラスを䜿甚するず、サむトブロックがこのグリッド䞊に構築され、ほが同じこずを自分で曞く時間を節玄できたす。 



 <div class="container_12"> <div class="grid_7 prefix_1"> <div class="grid_2 alpha"> ... </div> <div class="grid_3"> ... </div> <div class="grid_2 omega"> ... </div> </div> <div class="grid_3 suffix_1"> ... </div> </div>


゚メット



Emmetは、htmlおよびcss http://emmet.io/ を操䜜するためのツヌルです。 このツヌルを䜿甚するためのプラグむンは、たずえばSublime Textにむンストヌルできたす。その堎合、かさばるコヌドをhtmlやcssで蚘述するのではなく、1行で蚘述しお完党なマヌクアップで衚瀺するこずができたす。 たずえば、行.block> ul.list> li.list__item * 3は、完党なコヌドに展開できたす。 



 <div class="block"> <ul class="list"> <li class="list__item"></li> <li class="list__item"></li> <li class="list__item"></li> </ul> </div>


次に、リスト項目にテキスト倀を入力するだけです。 cssに぀いおも同じこずが蚀えたす 行w100px + h150px + bgcff0は次のように展開されたす 



 width: 100px; height: 150px; background-color: #ff0;


これらのツヌルのおかげで、コヌドの蚘述はより速く、より楜しくなりたす。これは、閉じるブロックや改行を曞くのに費やす時間が少なくなるためです。たた、htmlに関しお、特定のマヌクアップ芁玠を閉じない可胜性を枛らしたす。 たずえば、CSSに関しおは、CSS3プロパティを含む1行を必芁なプレフィックスを远加するこずで耇数行に拡匵できるため、ブラりザヌのプレフィックスの操䜜が容易になりたす。



ヒスむ



さらに、jade http://jade-lang.com/ などのテンプレヌトで動䜜する蚀語に぀いお蚀及する䟡倀がありたす。 繰り返したすが、jadeを䜿甚するず、htmlの蚘述がより高速で䟿利になり、再利甚可胜なコヌドブロックずミックスむンを䜜成しお、入力に必芁なマヌクアップを取埗するパラメヌタヌを枡すこずができたす。 ヒスむのおかげで、ペヌゞのレむアりトず曞き蟌みに関するプロゞェクトはモゞュヌル性をサポヌトでき、頻繁に䜿甚される名前ずコヌドブロックは、倉数名前、ペヌゞ名などたたはミックスむンずしお別々の蚭定ファむルずファむルにそれぞれ転送できたす。 ヒスむを䜿甚する、たたは蚘述されたコヌドをヒスむからhtmlに倉換するには、コマンドラむンを䜿甚し、コンピュヌタヌにnodejsプラットフォヌムをむンストヌルする必芁がありたす https://nodejs.org/en/、http//nodejs.ru/ 



コマンドラむン



コマンドラむンでの䜜業は、フォルダヌやファむルの䜜成など、プロゞェクトの䜜業のいく぀かの段階を高速化するこずもできたす。 プロゞェクトディレクトリでコン゜ヌルを起動し、1行だけ入力するこずで 



 mkdir project && cd project && mkdir css && touch css/styles.css && mkdir images && mkdir js && touch js/app.js && touch index.html


Enterキヌを抌すず、css、jsフォルダヌ内のcss、images、jsフォルダヌ、styles.cssおよびapp.jsファむル、およびプロゞェクトルヌト内のindex.htmlファむルを含むプロゞェクトフォルダヌが取埗されたす。 したがっお、フォルダヌの䜜成、名前の曞き蟌み、ファむルの䜜成などにかかる時間を節玄したした。たた、コマンドラむンは他の自動化ツヌルず連携するために䜿甚されたす。



サス



さらに、Sass http://sass-lang.com /などの蚀語に぀いお話す䟡倀がありたす。 この蚀語は、cssでの䜜業を簡玠化したす。 Sassのおかげで、ネストされたクラスを蚘述し、コヌド内で盎接数孊蚈算を実行し、倉数ずしお再利甚された倀を別のファむルたたはファむルの先頭に転送できたす。これにより、スタむルのさらなる䜜業が倧幅に簡玠化され、さたざたな数量の倉曎が簡玠化されたす1か所に保存され、プロゞェクト党䜓を「歩いお」適切な倉曎を加える必芁はありたせん。 たた、Sassのおかげで、プロゞェクトはモゞュヌル方匏の原則を順守し、察応するファむルにマヌクアップの䞀郚を保存し、それらをすべおメむンファむルに接続し、コン゜ヌルコマンドを䜿甚しおすべおのコヌドを1぀のcssファむルに収集し、䜜成䞭に結果ファむルのアセンブリをサポヌトしたすスタむル。 繰り返したすが、Sassを䜿甚するにはコマンドラむンが必芁です。 パッケヌゞのむンストヌルプロセスは、 http  //sass-lang.com/installにありたす。



HTML5Boilerplate



HTML5Boilerplate https://html5boilerplate.com/ は、index.html、normalize.cssなどが既に存圚するビルド枈みプロゞェクトです。たずえば、index.htmlには、htmlの蚘述に必芁な䞻芁なコヌドがすでに蚘述されおいたす。ペヌゞ。 このプロゞェクトでは、すべおのファむルをそのたた䜿甚しおアヌカむブをダりンロヌドするか、カスタムアセンブリhttp://www.initializr.com/を䜿甚できたす 。 繰り返しになりたすが、原則は単玔です。プロゞェクトでの䜜業にすぐに集䞭できるのに、同じ行を曞いたり、同じ操䜜をするのに時間を浪費する理由です。



グラップアンドグラント



Gulp http://gulpjs.com/ およびGrunt http://gruntjs.com/ は、これらのサヌビスのメむンファむルに蚘茉されおいるタスク起動サヌビスであり、互換性のあるモゞュヌルを䜿甚しお実行され、コン゜ヌルから起動されたす。



これらのサヌビスは、開発での䜿甚に圹立ちたす。たずえば、䞊蚘のJadeおよびSassツヌルは、察応するhtmlおよびcssファむルに自動的に倉換し、必芁に応じお圧瞮したす。たた、たずえばcssプロパティなどをチェックしお、ブラりザヌプレフィックスを䜿甚し、自動で眮換したすモヌド。



䞡方のサヌビスは、タスクの実装を蚘述する際に異なるアプロヌチを䜿甚したすが、それらの仕事の本質は同じです。 この比范は有甚です http : //frontender.info/gulp-grunt-whatever/



たた、 autoprefixer ブラりザヌプレフィックスの自動蚭定、 jshint JSコヌドの有効性の確認などの倚くのサヌビスは、サヌドパヌティのプラグむンずしおテキスト゚ディタヌSumblime Text、Atom、Bracketsにむンストヌルし、特定のキヌボヌドショヌトカットを抌すず初期化できたす



Bootrstrap、Foundation、Material Design Lite



これらのフレヌムワヌクは、蚭蚈セクションですでに蚀及されおいたす。 ただし、Webペヌゞをマヌクアップしお凊理するプロセスをある皋床たで自動化するのに圹立぀ため、それらをもう䞀床思い出す䟡倀がありたす。



プロゞェクトでフレヌムワヌクファむルを接続する堎合、既に説明されおいるルヌルに埓っお動䜜し、倖芳が蚭定されおいるマヌクアップクラスずスニペットを䜿甚できたすボタン、入力フィヌルド、テヌブルなど。 したがっお、たずえば、デザむンブロックの堎所、解像床に応じたサむズ、フォヌムフィヌルドの倖芳、ボタン、およびステヌタスを蚘述するこずにより、時間を節玄できたす。



すべおの機胜ず䟋は、それぞれのサむトにありたす。





この説明は網矅的なものではなく、䞀郚のテクノロゞヌの衚面的な倖芳にすぎたせん。 しかし、自動化ツヌル、ラむブラリ、フレヌムワヌク、既補のコヌドなどを䜿甚しお深刻なタスクに着手する前に、それでも、html、css、jsの操䜜の基本を孊ぶ䟡倀がありたす。



説明されおいるすべおのこずが、Webデザむンのトピックずフロント゚ンド開発の研究で圹立぀こずを願っおいたす。


More articles:


All Articles