コーディング - ページ 5

今日も私たちはScalable Vector Graphic（SVG）に関する議論を続けるつもりです、そして前の記事で指摘したように、SVGを使うことの利点の1つはそれがCSSでスタイルされることができるということです. SVGスタイリングプロパティ スタイリングSVGは基本的に通常のHTML要素と同じように機能します、それらは実際に同様にいくつかの共通の特性を共有しました。ただし、CSSとは別に独自の仕様を持つSVGオブジェクト専用のプロパティが他にもあります。. 例えば, 通常のHTML要素では、以下のいずれかを使用して背景色を追加できます。 背景色 または バックグラウンド CSSプロパティSVGでは、少し違います。背景色は 塗りつぶし 代わりにプロパティ。また、要素の境界は次のように指定されます。 ストローク プロパティではありません 境界 通常のHTMLで行ったように、ここで完全なリストを見ることができます。. もしあなたがAdobe Illustratorのようなベクトルエディタをかなり長い間使ってきたのであれば、SVGのプロパティ命名メカニズムはエディタから来ているとすぐに想像できるでしょう。. SVGスタイルの実装 SVG要素をスタイルするには、次のいずれかの方法を使用できます。 プレゼンテーション属性 すべてのSVGプロパティリストを見たことがある場合は、それらすべてを要素に直接追加して、要素の表示方法を変更することができます。次の例は、追加方法を示しています。 塗りつぶし そして ストローク のプロパティ 四角い 素子; 長方形は下のスクリーンショットのようになります。...

Webサイトは、画像やスタイルシートなどのページやソースを指す一連のリンクで構築されています。 2つの方法があります これらのソースにリンクするURLを指定してください：絶対パスか相対パスを使う. 絶対パスは特定の宛先を表し、通常はHTTPのようにドメイン名から始まります。 www.domain.com/destination/source.jpg. 相対パスは反対です。リンク先はルートの場所、またはほとんどの場合はWebサイトのドメイン名によって異なります。. 典型的な相対パスは以下のようになります。 あなたのウェブサイトのドメインが, hongkiat.com 画像パスは以下のように解決されます。 hongkiat.comimages_2 /指定ドキュメントのベースURLとhtmlベースのelement.png. あなたがしばらくの間ウェブサイトを開発しているならば、あなたはこれを理解するべきです. しかし、あなたのほとんどはおそらくについて聞いたことがないでしょう 素子。このHTMLタグはHTML4から出回っていますが、実際にはほとんど実装されていません。 W3Cはこの要素を次のように記述しています。 “基本要素は作者が指定することを可能にします ドキュメントベースURL 相対URLを解決する目的で、 デフォルトのブラウジングコンテキスト ハイパーリンクをたどる目的で.” この elementは基本的にWebページ内の相対パスのベースURLを決定します。 Webサイトのルートの場所やドメインに頼るのではなく、リソースがCDN（Content Delivery Network）に存在するURLなど、他の場所を指すようにすることができます。それが実際にどのように機能するか見てみましょう. 基本要素を使用する の 横に沿って定義されます そして...

jQueryはの1つです の 今日最も人気のあるJavaScriptライブラリそのAPIは非常に使いやすく、それほど急峻ではない学習曲線につながります。多くのプロジェクトでは、動的な機能を持ち込むために一般的なJavaScriptを直接使用する代わりにjQueryコードを使用しています。. しかしjQueryにも欠点があります. 不用意に使用すると、パフォーマンス上の問題が発生する可能性があります。 それが基づいている言語と同じように。この記事では、パフォーマンスの問題を回避するために役立つjQueryの使用に関するベストプラクティスをいくつか紹介します。. 1.必要に応じてスクリプトを遅延ロードする スクリプトはページに新しい要素を追加したり、一部のDOMノードのレイアウトやスタイルを変更したりすることがあるため、ブラウザはDOMツリーを作成して画面にピクセルを描画する前にJavaScriptを実行します。だから、によって ページの読み込み中に実行するスクリプトがブラウザに少なくなる, 私たちはできる 所要時間を短縮する 最終的なDOMツリーの作成と描画のために、その後はユーザーは ページを見ることができる. jQueryでこれを行う1つの方法は、を使用することです。 $ .getScript ページのロード中ではなく、必要なときにスクリプトファイルをロードする. $ .getScript（ "scripts / gallery.js"、コールバック）; 必要なときに1つのスクリプトファイルを取得するのはajax関数ですが、取得したファイルはキャッシュされないことに注意してください。のキャッシュを有効にする getScript すべてのajaxリクエストに対して同じことを有効にする必要があります。あなたは以下のコードを使ってそうすることができます： $ .ajaxSetup（cache：true）; 避けなさい $（ウィンドウ）.load（） スクリプトにページのサブリソースが必要ない場合...

今日、我々はSassについての議論を続けるつもりです、そしてこれは我々のSassシリーズの最後の部分になるでしょう。今回は、理論的なアプローチではなく、もう少し実用的になります。 SassとCompassを使ってオンラインのvCardを作成します。. アイデアは、vCardは色とサイズのために、簡単に調整可能であるべきだということです。このプロセスでは、SassとCompassの機能をいくつか使用します。 変数、ミックスイン、オペレーション、セレクタの継承、ネストしたルール そして コンパスヘルパー. このシリーズの以前の投稿を見逃した場合は、続行する前にまずそれらの記事をご覧ください。. 計画とワイヤーフレーミング SassとCompassで作業するとき, 計画は不可欠です. 私たちは通常、最終結果（ページやWebサイトなど）がどのようになるかについて、全体像を把握する必要があります。アイデアのためにBehanceやDribbbleのようないくつかのサイトを閲覧することは役に立つでしょう。以下の例のように、アイデアを紙にドラフトするか、ワイヤーフレームに組み立てることができます。. 上の画像からわかるように、私たちのvCardは含まれています 連絡先情報 'John'について - 写真のプロフィール、名前、メールアドレス、電話番号などのJohnに関する情報、および彼が誰であるか、または何をしているかについての簡単な説明。それが私たちの「バイオ」部門になります. 以下はソーシャルボタンの形での彼のソーシャルアイデンティティーです。これが私たちの「社会的」セクションになります. 資産の準備 コーディングを始める前に、準備をするための基本事項をいくつか紹介します。 SassとCompassがあなたのマシンにインストールされているはずです。. （あなたがそれらをインストールしたかどうかわからない場合は、このコマンドを実行することができます sass -v または コンパス-v スルー コマンドプロンプトまたは端末 あるいは、GUIで作業したい場合は、Scout Appのようなアプリケーションをいつでも使用できます。） また、ModernPictogramsのような場所から入手できるフォントアイコンやソーシャルメディアアイコンなどのいくつかのアセットも必要になります。....

jQueryがどのようにして一般的なJavaScriptに革命を起こしたかのように, SassはバニラCSSに革命をもたらしました. Sassを学ぶほとんどの開発者は、彼らが決して戻りたくないということに同意します。多くの人はまた、新しい開発者にとっての最大の問題は 方法 彼らはSassそれ自体ではなくSassを使います. 私はウェブを精査し、この記事をまとめました 拡張可能で再利用可能なSassコードを書くためのベストプラクティス. 提案は私自身の意見やSass Guidelinesのような信頼できるウェブサイトからのものです。. あなたは確かにあなたのワークフローにこれらすべての機能を実装する必要はありません。しかし、少なくともこれらのアイデアを楽しませ、潜在的な利点を熟考することは価値があります。. ファイル編成 Sass開発から始めるのに最適な場所はファイル編成です。すでにモジュラーコードを使っているのであれば、インポートとパーシャルの価値を理解する必要があります（これらについては後で詳しく説明します）。. しかし今のところDoCSSaのこのファイル構造の例を見てください。私はあなたが以下で見ることができるこのファイル構造を作り直しました： これは単なる提案であり、ファイルを整理する方法の1つです。あなたはのような異なるフォルダ構造を使用する他の方法を見つけることができます “グローバル” サイト全体のSCSSの場合 “ページ数” ページ固有のSCSSの場合. 各フォルダの目的を調べるために、この提案された編成スタイルを見ていきましょう。 / globals - 文字体裁、色、グリッドなど、サイト全体に適用されるSassファイルが含まれています。 /コンポーネント - ボタン、テーブル、入力フィールドなどのコンポーネントスタイルを持つSassファイルが含まれています。 / section - 特定のページまたはページ上の領域専用のSassファイルが含まれています（/...

カスケーディングスタイルシート（CSS） つまり、他のWeb関連の言語と比べて最も単純な言語なので、Webサイトの作成方法を学び始めたばかりの多くの人がこの言語とHTMLを最初に学ぶことになるのは当然のことです。. この記事では、CSSの基本に戻ります。 CSSスタイルが最初にどのように適用されるのか、どのスタイルが適用されるのか、いくつかのスタイル宣言が互いに上書きするのに対し、他のスタイル宣言はどのように上書きされるのかを見ていきます。. そのため、この記事は、最初のスタイルシートをコンパイルするときに間違いや間違いを犯している可能性がある、問題にぶつかり始めたばかりの初心者を対象としています。それでは始めましょう. デフォルトのブラウザスタイル Firefox、Chrome、Safari、Opera、およびInternet Explorerは現在、市場で上位5つのデスクトップブラウザです。これらのブラウザおよび他のすべてのブラウザは標準の規則に従って、HTML要素をレンダリングするための組み込みのデフォルトスタイルを含めます。. そのため、スタイルを追加せずにランダムなHTML要素をいくつか配置すると、ブラウザにはまだ正しくレンダリングされていることがわかります。. しかし、これらの要素を注意深く調べると、それぞれのブラウザの値は（わずかに）異なります。 “デフォルト” 特にIE6、7、Firefox 3.0などの古いブラウザでは、ブラウザ間で矛盾が発生する宣言. たとえば、上のスクリーンショットからわかるように、最新のFirefoxでは、 ブロッククォート デフォルトでは 余白：16px 40px 16px 40px, 反対側に Internet Explorer 7 レンダリングされます ブロッククォート と マージン：0px 40px. 上記の矛盾を克服するために、多くのWebデザイナーや開発者はこれらのスタイルをすべて上書きすることを好みます。...

Googleは最近、開発者向けのフロントエンドリソースであるMaterial Design Liteというライブラリを公開しました。それは自動的に構築されたCSSとJSと材料設計ガイドラインを使用してあらゆるウェブサイトをスタイルします. これは単純な開発プロジェクトのためのポピュラーなフレームワークです。 React MDLは、GoogleのフレームワークとReactライブラリを組み合わせて、広範囲のフロントエンドリソースを作成します。. Googleのマテリアルデザインは明らかにGoogleの世界におけるUI / UXの未来です。また、Material Design Liteを使用すると、独自のオープンソースライブラリを使用してこれらの機能をあらゆるWebサイトに実装するのがこれまでになく簡単になります。. Reactはフロントエンドビューコンポーネントに使用されている最も人気のあるフロントエンドJSフレームワークでもあります。 React MDLを使用すると、これらのReactコンポーネントをMDLライブラリとマージして、Googleのオンラインドキュメントにあるようなビューを得ることができます。. これがどのように見えるかの感触を得ることができるように、これはサンプル記事テンプレートです。. このページは多くのReactコンポーネントを持っていませんが、それは材料設計の美学を示します。 Reactコンポーネントを使用して構築されたこのデモにはもっとたくさんのアクションがあります。. もっと知りたければ、GitHubレポジトリでMaterial Design Liteに関するより多くの情報を実際に見つけることができます。そこからあなたはあなたのページに実装するために生のCSSとJSをダウンロードすることができます。. 残念ながらReact MDLはまだかなり新しいので、すべてのコンポーネントを完全にはサポートしていません。. しかし、あなたはここにそれぞれのための小さなデモを含む完全なリストを見ることができます。これには、必要に応じて自分のプロジェクトにコピー＆ペーストできるソースコードも含まれています。. 私は...するだろう ではない 両方のライブラリに慣れるまでReact MDLを学ぶことをお勧めします。. Material Design Liteスイートの起動は非常に簡単ですが、Reactははるかに複雑です....

しかしながら, ローカルランタイム環境の設定 初心者にとっては本当に苦痛なことです。これには、コマンドラインが必要になることがよくありますが、最初は障害のように感じることがあります。. あり Repl.it, PythonからC ++まで、あるいはSwift for iOSアプリケーションまで、ブラウザで直接コンパイル済み言語のコーディングを練習できます。. この小さなWebアプリは Web開発者のためのクラウドIDEのようなもの. しかし、フロントエンド開発は ではない コンパイラに依存しているので、Webブラウザでコーディングする方がはるかに簡単です。. Repl.itは数少ない プログラミング指向のクラウドIDE, どんなOSからでも動作する組み込みのコンパイラがあるから. 確かにあります 使用できるライブラリに関するいくつかの制限 そしてコードの最終的な出力。しかし、これはまだ素晴らしい場所です。 プログラミングを開始 経験がゼロで基本を理解したいだけの場合. 返信 多数のライブラリをサポート, だからあなたはほとんど何かを学ぶためのあなたの選択をしています。ここにいくつかのより人気のある言語があります： Java C / C++ 迅速...