コーディング - ページ 7

MarqueeはInternet Explorerで最初に導入され、W3Cが使いやすさの問題からHTML標準要素から除外することを最終的に決定する前の90年代に非常に人気がありました。 Webデザイナーはタグを使わないように勧められました. 驚くべきことに、マーキーはタグではなく、カムバックをしています。 それはCSSモジュールの中にあったのと同じようなフォーマットです。このモジュールはWebkit CSS仕様の一部として入手でき、W3Cは現在同様のモジュールに取り組んでいます。ただし、W3Cバージョンはまだ勧告候補段階にあるため、まだ適用できません。ですので、現時点では、Webkit仕様のものだけを取り上げます。. 構文 まず第一に、マーキーは次の速記構文を使って定義することができます。. -webkit-marquee：[方向] [増分] [繰り返し] [スタイル] [速度] 上記の構文に必要な各値は、一目瞭然ですが、それ以外の場合は、このドキュメントで十分に説明されています。そのため、この構文がどのように機能するのかを詳しく調べたい場合は、常に最初に資料を参照することができます。. それでは、実際の例をいくつか作成し、実際にどのように機能するかを確認しながら、参加してください。. 例1：テキストをスクロールする さて、最初の例では、テキストを右から左に移動させるというマーキーの古典的な移動を作成します。. 以下のようにテキストマークアップを作成しましょう。 ロリポップトッピングレモンドロップナツメアップリケフルーツケーキタルト甘草ゴマスナップ. 次に、以下の構文でマーキーを定義します。. -webkit-marquee：自動中無限スクロール通常。 overflow-x：-webkit-marquee; マーキー方向がに設定されている場合 自動, デフォルトでは右から左に移動します。あるいは、この値をに変更することができます。 左. また、 オーバーフローx プロパティをに設定する必要があります -ウェブキットマーキー...

リンティング コンピュータプログラミングではのプロセスです。 誤った構文のような問題を見つけるための静的解析コード、およびコードの使用法. リンティングに使用されるツールは、 糸くず または リンター. 今日JavaScriptで利用可能なリンターの1つはJSHintです。. JSHintは複数のプラットフォームで利用できます。私たちのほとんどが精通しているオンラインWebツールはjshint.comにあります。もあります Node.js経由のコマンドラインツール, ある JavaScript API, 複数のテキストエディタとIDEプラグイン JSHintのために。 JSHint Webサイトのダウンロードおよびインストールページで、さまざまな環境で利用可能なJSHintツールの完全なリストを見ることができます。. そのWebサイトによると、JSHintツールが使用される2つの最も一般的な方法は、 コマンドラインツール そしてその API. ツールが提供する他のリンティングの最適化とともに、両方を使用する方法を見てみましょう。. コマンドラインツール経由 （1） Node.jsがコンピュータにインストールされていない場合は、そのWebサイトにアクセスして、まずダウンロードしてインストールする必要があります。 Node.jsが正常にインストールされたかどうかを確認するには、次のコマンドを実行します。 npm - バージョン コマンドラインインターフェース（CLI）で、あなたのコンピュータのNode.jsのバージョンを表示します...

この記事は私たちの一部です 「HTML 5 / CSS 3チュートリアルシリーズ」 - あなたをより良いデザイナーや開発者にするためのお手伝いをします. ここをクリック 同じシリーズの他の記事を見る. Webデザインと開発の世界は本当に急速に進化しています。 Webデザイナーや開発者としての日々の仕事をより効果的かつ効率的にするのに役立つアプリや新しいフレームワークなど、コミュニティで（ほぼ）毎日公開されている多数の新しい機能でこれを確認できます。. 今日のWebデザインの進化から私の注意を引いたものはLESS、変数、ミックスイン、関数と操作のようないくつかのプログラミング概念を組み合わせることによってCSSシンタックスを書く方法を拡張するプログラム可能なスタイルシート言語です。. それはCSSシンタックスを書くことで新しい機能を開きます。たとえば、プログラムで行うのと同じようにCSSでMixinを適用することで、可能なときはいつでもファイル全体に適用できるデフォルトのスタイルと値を格納できます。これで、同じスタイルを何度も書く必要がなくなります。. それでは、LESSが提供するものについてのより良い洞察を得るために、LESSを使っていくつかの練習をしましょう。. LESSでデザインする このチュートリアルでは、Apple.comのものからヒントを得た滑らかなメニューナビゲーションバーをデザインしようとします。それはオリジナルの製品に「触発」されているだけなので、私たちの最終的なチュートリアル製品はオリジナルのものと正確に同じではないことに注意してください。. まず始めに、まず以下の役に立つリソースを読んでください。これらはLESS言語のいくつかの基本的な実装を説明します。これは、このチュートリアルをさらに深く掘り下げる前に役立つでしょう。. LESS is More：LESSを使用してCSSコーディングを容易にする 少ないCSSでより良いCSSを書く LESSの紹介とSassとの比較 準備 まず最初に、この小さなプロジェクトに必要なものがいくつかあります。 1.テキストエディタ ナビゲーションメニューをコーディングするためのテキストエディタが必要になります。しかし、今日の市場で入手可能なテキストエディタ（Dreamweaver、Notepad ++、InType、Sublime Text 2など）のほとんどはまだサポートされていません。...

CSSプリプロセッサは現在、Web開発の中心的存在となっています。それはウェブ開発者が構築することを可能にするVariables、Functions or Mixin、およびOperationのようなプログラミング特性を持つプレーンCSSを出荷します モジュール式、スケーラブル、そして管理しやすいCSSスタイル. この記事では、最も普及しているCSSプリプロセッサの1つであり、Bootstrapなどの多数のフロントエンド・フレームワークに広く採用されているLESSについて説明します。私達はまた歩く 基本的なユーティリティ、ツール、そしてあなたがLESSであなたを稼働させるのを助けるためのセットアップ. コンパイラ まず始めに、コンパイラを設定する必要があります。 LESS構文は、W3C仕様に準拠しているので標準的ではありません。 CSSに似た特性を継承しているにもかかわらず、ブラウザは出力を処理およびレンダリングできません。. これがLESSコードを垣間見ることができます： @カラーベース：＃2d5e8b。 .class1 background-color：@ color-base; .class2 背景色：#fff;色：@カラーベース。 コンパイラはコードを処理し、LESS構文をブラウザ準拠のCSS形式に変換します。 .class1 背景色：＃2d5e8b; .class1 .class2 background-color：#fff;カラー：＃2d5e8b。 CSSをコンパイルするためのツールはたくさんあります。 JavaScriptを使う LESSには less.js あなたのウェブサイトに配置するのが本当に簡単であるファイル。でスタイルシートを作成する .もっと少なく 拡張子を使用してドキュメント内でリンクします。...

ほとんどのWeb開発者はFlexbox Froggyというゲームを知っています。 flexboxの基本を教えます ゼロから。この無料ゲームは話題になりました、そしてそれはまだflexboxでコーディングする方法を人々に教えるために非常に価値があります. まあ、そのゲームを作った同じ開発者 新しいゲームがあります 呼ばれる グリッドガーデン. このゲームは同じように機能しますがあなたに教えます CSSグリッドのコーディング方法. これは比較的新しい機能ですが、 早く追いつく そしてGrid Gardenは簡単に学ぶための最良の方法です. Grid Gardenのすべてのものは 似たような教え方 Flexbox Froggyとして。これは同じ開発者Thomas Parkによって作成されたので、同じレベルの難しさと使いやすさが期待できます。. デフォルトでは、レベル1から始めます。 計28レベル 最初から最後まで。いつでもできます レベルをスキップ 難しすぎると思う人もいるかもしれませんが、それらをすべて復習するのと同じように作業していくのが良いと思います。. グリッド関連のプロパティがどのように機能するのかがわからない場合は、Googlingに多くの単語があることに気付くでしょう。 CSSグリッドレイアウトは 全く新しいモジュール 独自の構文と機能を持つ. あなたがチャンスを得たときはいつでも私はGrid...

この記事は私たちの一部です 「HTML 5 / CSS 3チュートリアルシリーズ」 - あなたをより良いデザイナーや開発者にするためのお手伝いをします. ここをクリック 同じシリーズの他の記事を見る. Web開発者はより洗練されたCSS3構文を使うことで多くの時間を節約することができます。あなたのページを訪れるユーザーは、可能な限り最速のロード時間を期待しています - ファイルサイズを抑えるのはあなたの責任です。 CSS、特に新しいCSS3モデルの下では、たくさんの簡単なトリックがあります。. 私は以下のガイドでこれらのアイデアのいくつかをまとめました。 CSSコードの縮小など、他の分野にも触れるべきです。スタイリングプロセスで開発者を支援するために利用可能なブラウザ内のツールがありますが、最終的にあなたのウェブサイトのレンダリングプロセスを合理化するためにこのファイルサイズの縮小とショートコードを組み合わせたいと思うでしょう。. フォーマットの基本的なヒント 実際のCSSシンタックスに入る前に、のトピックを見ていきたいと思います。 どうやって あなたのCSSを書くために。 Webデザインに慣れている方は、おそらく以前にスタイルシートを見たことがあるでしょう。各コマンドの最初の部分は、 セレクタ. これは中括弧の内側に追加されたスタイルを受け取る要素の型をターゲットとします。 プロパティ. インラインレベル インラインスタイルでは、各プロパティはそれらを区切るためのスペースだけを置いて次々に書かれます。この方法は、いくつかのプロパティしか必要としないセレクタに最も適しています。それはあなたのページ上のスペースを節約し、あなたのスタイルシートをスクロールすることはずっと速くなるでしょう。これまでインラインCSSに遭遇したことがない場合は、HTMLアンカーリンクをターゲットにした以下の小さな例を追加しました。. 色：＃648cc8。フォントの太さ：太字。 a：ホバー色：＃739cda。テキスト装飾：なし。 a.alt color：＃bd4949！重要です。...

から カレー に クロージャ JavaScriptの専門用語（フィールド内で使用される特別な単語）は数多くありますが、どれを使うとボキャブラリーを増やすことができるだけでなく、JavaScriptの理解も深まります。. ジャーゴンは通常、文書および技術記事に記載されています. しかし、それらのいくつかは好きです クロージャ 知っておくべき標準的なものです。その単語自体が何を意味するのかを知っていることは、あなたがそれがより良いという名前の概念を知るのを助けることができます. この記事は、そのような10の用語をまとめたものです。 それらの意味 そして それらが使用されているコンテキスト JavaScriptで。もしあなたが初心者ならば、このリストはあなたが次のような基本でカバーしているということです。 巻き上げる. 同時に、あまり知られていない、またはあまり理解されていない用語もそこに含まれています。. アリティ 匿名 閉鎖 カレー 巻き上げ 突然変異 プラグマ センチネル バニラ 可変数 アリティ アリティ （ラテン語から）は、それぞれ関数または操作内の引数またはオペランドの数を指すために使用される用語です。あなたはそれが言及するために使用されているときにJavaScriptの分野でこの単語に遭遇する可能性が最も高いです JavaScript関数に必要な引数の数....

JavaScript関数は、呼び出しが実行されるのを待っている間に、単にコードの束を囲むだけでは不十分です。機能は時間の経過とともに進化し、新しい定義、実行方法、構文が生まれました。この記事では、JavaScript関数がこれまで果たしてきた現在の役割のいくつかを説明します。. 機能を表現し定義するさまざまな方法を知っていることは、 より最適な方法でロジックを実装する JavaScriptで。また、面接の質問にもっと簡単に答えることができるかもしれません。. 関数式 以下のように単純に関数を述べると 関数 キーワード、オプションのパラメータ、およびコード本体です。 関数 宣言. その宣言をJavaScriptの式に代入すると（代入式や算術式のように）、 関数 表現. //関数宣言関数function_name（）; //関数式var function_name = function（）; 評価中は、すべてのJavaScript宣言が持ち上げられます（スコープ内で上に移動します）。そのため、関数宣言の前に関数呼び出しを書くことは問題ありません（宣言はとにかく上に移動するので）. function_name（）; //関数呼び出し[WORKS] function function_name（）; ただし、関数は式の一部となり、スタンドアロン宣言ではないため、関数式は必要ありません。. function_name（）; //関数呼び出し[動作しません] var function_name = function（）;...