コーディング - ページ 15

紙とは異なり、Webページは ほぼ無限に横に伸びる. それは印象的なことですが、それは私たちが読書中に本当に必要とするものではありません。ブラウザはに応じてテキストを折り返します。 テキストコンテナの幅 そしてその 画面の幅 横にスクロールしなくてもすべてのテキストを見ることができるように（下方向のみ）. ラッピング テキストの言語や句読点やスペースの配置など、ブラウザが多くの要素を考慮して行うものです。 ただ押し下げるな テキストコンテンツ用に定義されたボックスに収まらないもの. ラッピング以外にも、ブラウザも スペースを大事にする;それらは、ソースコード内の複数の連続したスペースをレンダリングされたページ上の1つの単一スペースにマージし、またラッピング作業を始める前に強制改行を登録します。. デフォルトのテキストの折り返しを変更する場合 それはすべて素晴らしいことであり、とても感謝しています。しかし、デフォルトのブラウザの動作が私たちが探しているものではない状況では、簡単に終わることがあります。それはその見出しかもしれません 包まれるべきではありません または段落内の単語 行を降りるよりも壊れたほうがいい, 行末に奇妙に見える空のスペースを残す. 私たちが必死になっているだけではないかもしれません 私たちのテキストに保存されているスペースが必要です, しかし、ブラウザはそれらを1つにまとめ続け、複数を追加することを強制します。 ソースコード内. 好みを包むことも テキストの言語と目的によって変わる. 北京語のニュース記事とフランス語の詩は、必ずしも同じ方法でくるむ必要はありません。. 可能なCSSプロパティ（およびHTML要素！）は多数あります。 折り返しとブレークポイントを制御する そしてまた 折り返す前にスペースと改行を処理する方法を定義する....

グーグルがインスタント検索機能を発表して以来ずっと、それはウェブデザインの人気のある傾向になりました。 Michael HartのGoogle Imagesアプリなど、オンラインで楽しい例がいくつかあります。これらのテクニックはすべてかなり簡単で、中程度のjQuery経験を持つWeb開発者でもプログラミングAPIとJSONデータを利用できます。. このチュートリアルでは説明したい どのように私たちは同様のインスタント検索Webアプリケーションを構築することができます. グーグルから画像を引き出す代わりに、ほんの数年で驚異的に成長したInstagramを使うことができます。. このソーシャルネットワークはiOS用のモバイルアプリとして始まりました。ユーザーは写真を撮って友人と共有したり、コメントを残したり、Flickrなどのサードパーティネットワークにアップロードしたりできます。チームは最近Facebookに買収され、Androidマーケット向けのまったく新しいアプリを公開しました。彼らのユーザーベースは飛躍的に成長しました、そして今開発者はちょうどこのinstasearchデモのように素晴らしいミニアプリを構築することができます. デモを見る ソースをダウンロード APIクレデンシャルの取得 プロジェクトファイルを作成する前に、まずInstagramのAPIシステムの背後にあるアイデアを調べてください。初心者に役立つ説明を提供する開発者ポータルにアクセスするにはアカウントが必要です。 Instagramデータベースに問い合わせるために必要なのは、 “クライアントID”. 上部のツールバーで[クライアントの管理]リンクをクリックしてから、緑色のボタンをクリックします。 “新しいクライアントを登録する”. アプリケーションに名前、簡単な説明、およびWebサイトのURLを入力する必要があります。 URLとリダイレクトURIは、この例では同じ値にすることができます。これは、ユーザーを認証する必要がないからです。すべての値を入力して新しいアプリケーションの詳細を生成するだけです。. あなたは名前の長い文字列を見るでしょう クライアントID. このキーは後でバックエンドスクリプトを作成するときに必要になるので、このセクションに戻ります。今のところ私たちのjQueryインスタント検索アプリケーションの構築を始めることができます. デフォルトのWebページコンテンツ 実際のHTMLは、私たちが使っている機能の量に対して非常にスリムです。ほとんどの画像データは動的に追加されるので、ページ内にいくつかの小さな要素が必要です。このコードは index.html ファイル. Instagramの写真jQueryのインスタント検索アプリ 注：スペースや句読点は使用できません。検索は1つのキーワードに制限されています. 私は2つの外部の.cssと.jsリソースと共に最新のjQuery 1.7.2ライブラリを使用しています。入力検索フィールドに外部フォームラッパーはありません。フォームを送信してページをリロードさせたくないからです。ユーザーが入力しているときに制限が制限されるように、検索フィールド内のいくつかのキーストロークを無効にしました. 中央のセクションID内にすべての写真データを入力します...

オートメーション 間違いなくプログラマーが持つことができる最も切望されているスキルの1つです。自動化は通常、次のようなタスクに使用されます。 繰り返し、退屈、時間がかかる, もしくはそうでないか 非効率的な スクリプトを使用せずに. あり ウェブオートメーション, 簡単にできます さまざまなタスクを実行するためのボットを作成する インターネット上で競合するホテルの料金を監視し、最適な価格を決定するなど、Web上で. 個人的に、私はいつも見つけました 私のEメールにログインする かなり反復的で退屈なので、単純な例であなたをみんなに導いてもらいましょう。 Webオートメーションから始めた, 実装しましょう 自動Pythonスクリプト に ワンクリックでログイン Gmailアカウントに. インストールと設定 このチュートリアルでは、 以下のツール： Pythonプログラミング言語 Google Chromeブラウザ Seleniumブラウザ自動化ツールキット Chrome用ChromeドライバWebドライバ 私たちのプログラムでは、Pythonプログラミング言語を使用します。具体的には、 バージョン2.7.11....

アドベントは、クリスマスイブの4日前に始まるクリスマスを待って準備する期間です。アドベント時間の経過は、伝統的にアドベントカレンダーかアドベントリースのどちらかの助けを借りて測定されます。 Adventの始まりは決まった日ではありませんが、Adventカレンダーは通常12月1日に始まります. 現地の習慣に基づいて、Advent Calendarsはさまざまなデザインを持つことができますが、ほとんどの場合、 24の窓またはドアがある大きな長方形のカード 12月1日から24日の間の日にちをマークします。ドアはメッセージ、詩、祈りまたはちょっとした驚きを隠します. この記事では、私はあなたにどのようにするかを示します オブジェクト指向のJavaScriptでアドベントカレンダーを作る. それはバニラJavaScriptで作られているのであなたは簡単にあなた自身のウェブサイトにコードを置くことができます. デモ ソースをダウンロード JavaScriptカレンダーデザイン 私たちのアドベントカレンダーは、クリスマスをテーマにした背景画像の上に24枚のドアがあります。各ドアにはクリスマス関連の見積もりが隠されます ユーザーがドアをクリックすると警告メッセージの形でポップアップ表示される. それは現実のアドベントカレンダーの場合のように、ドアは与えられた日が来るまで閉じたままになります。正しい日の前にドアを開けられない. すでに有効になっているドアは、無効になっているドア（薄い緑色）とは異なる境界線と背景色（白）を持ちます。 HTML 5、CSS 3、およびJavaScriptを使用して、次のようなAdvent Calendarを準備します。 ステップ1 - ファイル構造とリソースを作成する まず第一に、私たちは素敵な背景画像を選ぶ必要があります。 から縦向きを選択したので、カレンダーには 4列6行. 横向きを好むのであれば大丈夫です。 JavaScriptコード内のドアの位置を変更するだけです。 6列4行. 画像がある場合は、というフォルダを作成します。...

目次 たとえば、多くのWebサイトのユーザーエクスペリエンスを大幅に向上させることができます。 ドキュメントサイト または オンライン百科事典 ウィキペディアのように。うまく設計された目次 ページの概要を説明します また、興味のあるセクションにすばやく移動できます。. 伝統的には、HTMLでもJavaScriptでも目次を作成できますが、最近標準化されたHTMLスロットは 両者の中間の道. HTMLスロット あなたができるWeb標準です。 Webページにプレースホルダを追加する 以降 コンテンツを動的に埋めます. いつ使うのか タグ あなたは置くことができます HTMLファイル内の目次にタグを付けます。 関連する見出しと小見出しでいっぱい. 見出しが変わると スロットは自動更新されます. この手法では、目次のHTMLソースコードを手動で作成する必要があります。 JavaScriptは目次のテキストコンテンツのみを自動生成します, ページの見出しまたは小見出しに基づく. HTMLに目次を表示したくない場合は、次のようにします。 JavaScriptを使用してレイアウトとコンテンツの両方を生成する. 1. HTMLを作成する 目次（目次）のHTMLソースコードは次のようになります。...

装飾された境界線はページ上の任意の要素を装飾することができますが、スタイルに関してはCSSの境界線は制限されています。開発者は頻繁にCSSグラデーションの境界線、SVGの境界線、複数の境界線などのボックスの境界線とそのアニメーションの外観を模倣し、アップグレードするためのソリューションを思い付く. 今日は、点線枠の簡単なハック、つまり点線枠のアニメーションについて説明します。アニメーション化された破線の境界線は、 アウトライン そして ボックスシャドウ, フォールバックについては大したことはありません。 アウトライン IE8以降でサポートされています。 SVGまたはグラデーションが使用されているときとは異なり、ユーザーはまだ境界を見ることができます。これで二色のダッシュも作成できます。見てみましょう. 枠線を作成する まず枠線を作成します。これには、破線の枠線とボックスの影を使用します。. .バナーアウトライン：6px黄色の破線; box-shadow：0 0 0 6px＃EA3556;… CodePenのPreethi（@rpsthecoder）によるPen CSSボーダー - アウトラインとボックスの影を見る. の アウトライン そのすべての値が必要になります。幅、種類、色の ボックスシャドウ の値だけが必要です 広がる これは、アウトラインの幅と色と同じでなければなりません。アウトラインとボックスシャドウの両方を一緒にすると、2色のダッシュの効果が生まれます。. あなたはそれからあなたの望みのボーダーが隅に見えるようにボックスの幅または高さを調整することができます. 国境をアニメートする 最初のアニメーションの例では、CSSキーフレームアニメーションを一連のバナーに追加し、境界線を連続的にアニメーション化して注目を集めます。アニメーション効果のために、アウトラインとボックスの影の色を入れ替えるだけです。....

の テキスト読み上げ 機能は テキストの話し言葉 デバイスに表示されます。現在、ノートパソコン、タブレット、携帯電話などのデバイス この機能はすでにあります. Webブラウザなど、これらのデバイスで実行されているすべてのアプリケーションは、 それを利用する, そして その機能を拡張する. ナレーション機能は、次のような用途に適しています。 豊富なテキストを表示, それとして リスニングのオプションを提供しています ウェブサイトの訪問者へ. WebスピーチAPI の WebスピーチJavaScript API へのゲートウェイです。 Webブラウザで音声合成機能にアクセスする. そのため、テキストを多用するWebページに読み上げ機能を導入して、読者がそのコンテンツを聴くことができるようにしたい場合は、この便利なAPIを使用することができます。 音声合成 インタフェース. 初期コードとサポートチェック はじめに、次のようにしてWebページを作成しましょう。 ナレーションのサンプルテキスト, そして 3つのボタン. たくさんの友達とのうさぎ...

キーボードショートカットが好きですか？彼らはあなたが多くの時間を節約するのを手伝うことができますね。あなたの訪問者の利益のために、あなた自身のウェブサイトにキーボードショートカットを追加しますか？それはあなたのサイトのアクセシビリティとナビゲーションを大いに改善するでしょう. この記事では、MousetrapというJavaScriptライブラリを使用してWebページにショートカットを追加する方法について簡単に説明します。ネズミ捕りであなたができる キーを指定 Shift、Ctrl、Alt、Options、Commandのように あなたのウェブサイトで特定の機能を実行する. また、古いブラウザでもうまく機能します。. Hongkiatの詳細： Hint.Cssで簡単にアニメーションツールチップを作成する Intro.Jsを使用したステップバイステップガイドの作成[チュートリアル] HTML5の範囲スライダをスタイルする方法 cookie＆HTML5 localstorageの使い方 入門 コンテンツと共に新しいHTMLドキュメントを作成し、そしてMousetrapライブラリをリンクすることから始めます。ライブラリがCloudFlareネットワークを通じて提供されるように、CDNjsでホストされているネズミ捕りライブラリを使用します。 今度はネズミ捕りを使用します 'バインド' キーボードキーを機能付きで付ける方法。あなたが割り当てることができます 単一キー、キーの組み合わせ、またはシーケンスキー, 例えば シングルキー この例では、sを束縛します。. Mousetrap.bind（ 's'、function（e）//ここにあなたの関数…）; 組み合わせキー この例では、Ctrlとsをバインドしています。指定した機能を実行するには、2つのキーを同時に押す必要があります. Mousetrap.bind（ 'ctrl + s'、機能（e）//ここにあなたの機能…）; シーケンスキー...