ツールキット - ページ 20

デザイナーはしようとするの痛みを知っている 画像を比率に合わせる. これは、WordPressテーマを作成していて、サムネイルに最適な画像サイズを見つけようとしているときに常に発生します。. しかし、のために同様のタスクがたくさんあります 適切なアスペクト比を考え出す 画像、ビデオ、または埋め込み要素のありがたいことに, RatioBuddy 助けられる. この小さなウェブアプリはあなたを可能にします 何でものアスペクト比を計算する ブラウザから動的に。必要なのはインターネットアクセスと適切なサイズ（または必要な縦横比）だけです。. 開始するには、あなたがすることはすべてです。 現在の画像のアスペクトを入力してください またはあなたが使用しようと思っているサイズ。 WordPressテーマを作成し、注目の画像サイズを選択する例を見てみましょう。. 注目の画像の幅を800ピクセル、高さを500ピクセルにしたいとしましょう。これをRatioBuddyに入力すると、アスペクト比が8：5になります。. 今できることは 比率をロックする 横にある小さな南京錠をクリックして。つまり、幅または高さの値を変更すると、もう一方の値も変更されます。 それに応じて更新する. 今、あなたは始めることができます サムネイルサイズを見つける 主な機能イメージと一致するように. そこで、その幅の半分（400ピクセル）のサムネイルサイズが必要で、それからさらに300ピクセルの小さいサイズが必要だとします。あなたはあなたがどれくらい広い画像を望んでいるか知っている、しかし 彼らはどのくらいの高さであるべきか? 南京錠を有効にすると、 幅の値を変更する そしてあなたは すぐに結果を見る 高さの値ボックスに....

優れたデータ表示は、Web業界で重要な側面です。ビジターに数秒以内にあなたのコンテンツを理解させることが鍵となるからです。. あなたの訪問者があなたのWebコンテンツをより簡単に、またはより早く理解するほど、プレゼンテーションの取り扱いにおけるあなたの専門性をより反映します。. きちんとしたデータ表示の基準は、単純で記述的、詳細であるが、ユーザーの興味を維持するために管理され、内容の要約に汗をかくことがなく、比較に便利です。これらの非常識な基準が聞こえるかもしれない限り難しいです、それは可能です. 本日の投稿では、私たちはあなたを美しい美しさへの様々なアプローチのための乗り物に連れて行きたいのです。 完全にCSS / HTMLに基づいている創造的なデータ視覚化ツール. はい コピーして貼り付けるだけで、好みに合わせてカスタマイズできます。これらのグラフは、水平/垂直形式でデータを表示するCSS棒グラフ、データを整理するためのドロップダウンリスト、さらには折れ線グラフや円グラフにすることができます。! あなたはもっと欲しい？スクロールし続ける! 横棒グラフ CSSを使用してこのアクセシブルな棒グラフを使用して統計図を概要として表示する簡単な方法。バーは使用される値セルとラベルを計算します。音声テキストクラスを使用して使用されるテーブルヘッダ CSSplay 棒グラフは、各行にスタイルとクラスが定義された決定的なリストです。最初のチャートには、2番目のチャートで修正された値が100％に近づくと発生するエラーがあります。参照用に含まれているソースコード. パーセント棒グラフ このチュートリアルでは、CSSのパーセント幅機能を使用して、パーセントベースの棒グラフを作成します。水平棒グラフでは、マーカーを設定して長さを左から右に移動するか、同じ手法を使用して複数回複製することによって縦グラフを作成できます。 マックスデザイン Russ Weakleyは、パーセンテージと背景画像を使ってグラフを作成することを教えています。リンクされたコードと画像をコピーしてダウンロードしてプロジェクトで使用することができます. 縦棒グラフ CSSとPHPを使用して、個々の棒の高さ（ピクセル単位）、棒グループのy軸、およびデータセットをスタイルするクラスを含む単純なリストを作成して、垂直棒グラフを作成します。 Eric Meyerは、同じテクニックを使用して、これを棒グラフ、折れ線グラフ、点グラフ、3Dグラフに変換する方法を教えています。 ピュアCSSライングラフ 折れ線グラフは、数値のある表よりもはるかに速く情報を配信します。 HTMLを使用してCSSで折れ線グラフを作成し、テキストを画像に置き換え、CSSスプライトと絶対位置を使用して折れ線グラフを取得する方法を学ぶ. 単純折れ線グラフ DHTMLとCSSのみを使用し、グラフの透明な背景を設定できる非常に単純な折れ線グラフ。このグラフは速くロードされ、ページの他の部分と混ざります。. Mgraph このAjaxグラフは、CSSとXHTMLのみを使用して毎月の年間のデータを表すために使用され、FirefoxとOperaで実行されます。...

フロントエンドの開発者であれば、Google ChromeのDevToolsパネルについてすでに知っているはずです。これは、生のHTML / CSSをJSコンソールとリアルタイムでDOMを操作する機能と共に編集するためのツールを提供するすべてのバージョンのChromeにバンドルされています. DevTools Authorと呼ばれる新しい無料Chromeプラグインを使用すると、追加の構文配色、固有のフォント、およびカスタムフォントサイズを使用してDevToolsパネルをカスタマイズできます。. 設定はとても簡単です。 Chromeウェブストアから拡張機能をインストールしてから、ブラウザのこのリンクにアクセスしてください。 chrome：// flags /＃enable-devtools-experiment DevToolsの実験を有効にする必要があるChrome Flagsパネルがあります。有効になったらChromeを再起動し、DevTools設定パネルを開いて[実験]タブを見つけます。. それから、「カスタムUIテーマを許可する」にチェックを入れるだけでいいです。! Chromeのエディタをはるかに使いやすくするために、25種類以上の構文の配色を選択できます。そして、フォントサイズを10ピクセルから22ピクセルに変更したり、コンソールフォントをオペレーティングシステムにインストールされているフォントに更新することもできます。. このプラグインは、DevToolsにコア機能を追加するのではなく、DevToolsウィンドウのスタイルと外観を変更することを可能にします。驚くほど簡単に設定でき、DevToolsエクスペリエンスをよりパーソナライズされたものにすることができます。. セットアップ中に問題が発生した場合は、このガイド付きイントロビデオをご覧ください。.

いくつかのWebフォームが必要です 日付ベースの入力 そして日付ピッカープラグインはそれを助けることができます。しかし、どうですか 時間入力? 無料のjQueryプラグインを使って タイムドロッパー, あなたは付け加えられます カスタムタイムピッカー 予定の設定、電話の予約、その他必要なものすべてに. それは信じられないほど簡単です、そしてあなたは jQueryライブラリだけが必要です 始めるために。そのライブラリをインストールしたら、Timedropper JS / CSSファイルを追加して実行させることができます。それでおしまい! 各入力フィールドは jQueryセレクタの対象 その後、Timedropper入力フィールドを追加します。この オプションはありますか 追加の（オプションの）機能を追加することができます。 オートスイッチ - マウスを上げると自動的に時/分を変える 経絡 - 24時間制ではなく12時間制を設定する フォーマット - 時間と分をどのように表示するかを設定します（デフォルトのスタイルは午後1時22分です）。 マウスホイール...

フロントエンド開発者は彼らが得ることができるすべての最高のリソースを必要とします。通常これは フレームワークの上で作業する Bootstrapのように、基本的にすべてが詰まっています。. しかし、たくさんの選択肢があります。 Shoelace.css あなたが精通しているべきであるそのような例です. この 無料のCSSキット 完全なフレームワークではありません。その代わりに、 開発者向けスターターキット 何十ものカスタムCSSスタイルを一から構築したくない人. いつでもCSSリセットを使用できますが、それは各ブラウザを同じようにフォーマットするだけです。リセットは より複雑なタスクを処理するための包括的な方法ではありません。, それがまさにShoelaceのポイントです. それは ノードでCLIが実行されているパッケージ どのプロジェクトにもインストールできます。しかし、それも CDNバージョンがあります npmを使いたくない場合. これをすべて設定するには、 インストールガイド 公式文書にあります。これはCSSライブラリとして分類されていますが、 JavaScriptコンポーネントが付属していますか, も。が それらのほとんどはjQueryで動作します, だからあなたは依存関係としてそれを含める必要があります. ドキュメントを詳しく調べると、 カスタマイズページ あなたを示しています CSSで変数を編集する方法....

動画トリミング jQueryのようなライブラリのおかげでこれまで以上に簡単です。コードベースは使いやすく、コミュニティには何千ものプラグインがあります。 画像処理. そのようなプラグインの1つが クロッパー, を処理する無料のオープンソースの画像トリミングソリューション ズーミング, トリミング, そしてさらに 画像を保存する. このプロジェクトは GitHubで入手可能 一部で 非常に 多数のカスタム機能を含む長いドキュメント. Cropperはあなた（開発者）にインターフェースのあらゆる面を完全にコントロールさせます。一緒に働くことができます 30種類以上のオプション そして 20以上のカスタムメソッド Cropperプラグインに組み込まれています. それは 完全にタッチセンシティブ, だからそれはすべてのモバイルデバイス上で動作し、写真のズームインとズームアウトのためのスクロールホイール/トラックパッドをサポートしています。ユーザーは 弾く, 回転させる, 規模, そして 再配置 トリミング前のキャンバス上の任意の場所にある写真. Cropperプラグイン...

主流のURL短縮サービス Bit.lyのように素晴らしいですがカスタマイズするのは難しいです。それらのAPIは制限される可能性があります。 ほとんどの小規模プロジェクトに最適, 彼らはする その特定の才能を欠いている ユニークなURL短縮の例. ポール です 無料のオープンソースURL短縮API 自分のドメインにローカルにインストールして実行できること。それは PHPで書かれた そして ルーメンで実行, したがって、どのサーバーにも簡単にデプロイできます。あなたは実際に見ることができます ライブデモはこちら 試してみたい場合. ポールはあなたがすることができます あなた自身のカスタムURLを書く と リンクを自動生成する 必要に応じて。あなたはできる 任意のドメインにこれ​​をインストールしてください オンラインの任意のページを指すカスタムURLを作成する. フレームワークは驚くほど簡単にインストールでき、それは付属しています フルインストールWebアプリ あなたのサイトに. 興味があればここで読むことができる半詳細なインストールガイドがあることは確かです。これは基本的に 要件をカバー Laravel /...

私たちのほとんどは覚えている マイクロソフトテイ事件 インターネットユーザー AIボットにかなりクレイジーな言葉を教えた ほんの数日で。これはウェブ上のボットの面白い例ですが、あなたはあなた自身のTwitterやFBメッセージングボットを作ることができます AIのものなしで. ボット 無料のオープンソースライブラリです。 ゼロからボットを作成する. ラベル付け “世界で最も単純なボットフレームワーク” そして私は同意しなければならない. スタック全体 JavaScriptで動作します, だからあなたはを使ってカスタムボットを作ることができます フロントエンドECMAScript の上に Express.js そして Node.js. 残念ながら、Bottrは 完全なAIフレームワークではありません. できる AIの概念を受け入れる しかしそれ 深い学習はありません 箱から出して。代わりに、できます プログラムイベント Bottrができるところ API.aiに返信または情報を渡す....