ウェブデザイン - ページ 21

財団のフロントエンドフレームワークの開発者たちは、Bootstrapチームが彼らの素晴らしい新しいメジャーリリースに取り組んでいる間、彼らの栄誉にただ座っていませんでした。昨年、彼らは自分たちの知識をユーザーと共有し、彼らが実際の仕事でFoundationをどのように使用していたかについて尋ねるために素晴らしいワールドツアーに参加しました。. デスクに戻った後、彼らはユーザーのニーズと要望をまとめ、フレームワークの新しいメジャーリリースの計画に着手しました。. まだ開発中ですが、計画は非常に有望です。今後の機能は3つの主要分野に焦点を当てています。 パフォーマンス、カスタマイズ性、およびアクセシビリティ. 今、これらの機能のうちの10を見てみましょう. 1.合理化されたワークフロー ユーザーの経験に基づいて、財団チームは新しいスローガンを開発しました。 “試作から生産まで”, これは、設計者や開発者が使用できる新しい合理化されたワークフローを意味します。 試作品から製造へ. 新しいFoundation 6の目標は、柔軟でカスタマイズが容易なフレームワークを提供することです。 最初からきれいで意味のあるコードを書く. 現在のバージョンであるFoundation 5でもクイックプロトタイピングが可能ですが、 さらなるワークフローの最適化を期待する 今後のリリースで. 2. Sassバージョンの簡易セットアッププロセス Foundationフレームワークの最も素晴らしい点の1つは、Sassスタイルシート言語を使用して構築されていることです。 実際のニーズに合わせてデフォルトのスタイルルールを素早くカスタマイズする. Sassのセットアッププロセスは、多くのユーザーにとって少々威圧的なものでしたので、新しいメジャーリリースでは Sassバージョン用の単純化されたセットアッププロセスを手に入れる. これはSassセットアップが はるかに少ない依存関係を必要とする 前より。もちろん、もしあなたがバニラCSSバージョンを好むなら、あなたはまだそれを選ぶことができます. 3.マキシマリストのための新しくまとまったセットアップスタック 通常のSassバージョンの他に、Foundation 6はスープアップされています。 開発者に強力なカスタマイズオプションを提供するSassバージョン....

次のようなさまざまな入力フィールドについて考えてください。 フォーマットされた構造が必要. 電話番号、クレジットカード、生年月日、番地… 独自のユニークなパターン. これらのフィールドをそのままにしてユーザーを信頼するのは簡単です。しかし、それを使用する方が良いかもしれません Cleave.js, ある 無料のバニラJavaScriptプラグイン あなたを助けること 入力フィールドを自動的にフォーマットする. HTML 5には データパターンに関連する独自の入力セット 電話番号など。 Cleaveを使えば、これを次のレベルに進めることができます。 カスタマイズされた入力 それ テキストを自動的にフォーマットする 入力されたとおり. デフォルトでは、プラグインは 5つの基本的なテキストパターン： クレジットカード番号 電話番号 日付 数値スタイル（カンマ付き） カスタム入力フィールド その最後の選択はあなたがあなたのものを作ることができるので最もクールなものです 最初から独自のカスタムデータパターン. Cleaveはあなたに厳密な方法論に従うことを強制しません. 代わりに、それはあなたにあなたにツールを与えます...

最新のCSS flexboxプロパティは、開発者がインターフェースを作成する方法を根本的に変えました。レイアウトを完璧に整列させるためのフロートやCSSハックはこれ以上ありません。複数列のレイアウトを処理するためのカスタムレスポンシブ手法について心配する必要はもうありません。. しかし、flexboxが多くの問題を解決したとしても、学ぶのも複雑です。あなたが始めるのを助けるために1つの中央の場所に多くの異なったflexbox要素をカタログ化するFlexbox Patternsと呼ばれる新しいオンラインライブラリがあります. このライブラリは完全に無料で使用でき、GitHub上でオープンソース化されています。すべての例は NPMからローカルにダウンロード または GitHubを通じて. しかし、必要に応じてコードをコピーして貼り付けるために、Webサイトで例を閲覧することもできます。. 各パターンには、簡単な説明とコードサンプルを含む独自のページがあります。あなたはかなり文字通りすることができます 既存のWebプロジェクトにコードをコピーして貼り付ける, 最初にコードが何をしているのか、そしてなぜそれを使っているのかについて少し学ぶことをお勧めします。. たとえば、flexboxを使用して上部ナビゲーションバーのすべての要素を並べて配置するサイトヘッダーバーのデモを見てください。. 通常これはすべてをきちんと整列させるためにフロートとclearfixクラスを必要とするでしょう. flexboxでは、次のものを使って1つのコンテナにすべてを保持できます。 ディスプレイ：フレックス 財産。このようにすることができます 要素がどのように相互作用するかを定義する お互いにそしてどのようにフレックスボックス 小さな画面で操作する必要があります. パターンは常に更新されており、現在のライブラリはタブ、サイドバー、垂直/水平方向のセンタリングなどの最も一般的な要素に焦点を当てています。. もしあなたがflexboxの初心者なら、間違いなくFlexbox Patternsをチェックしてください。このサイトはあなたにflexboxのすべての基本を教えるものではありませんが、それはあなたがあなた自身のWebプロジェクトのためにいじり回すことができる現実世界の例を提供します.

Firefox開発者版は、今日開発者のために特別に作られた唯一のブラウザです。標準版の開発者向けツールは、開発者向け版の最初に表示されます。標準版では提供されない予定のツールもあります。今日は、現時点でいくつかのツールを見てみるつもりです。 開発者版でのみ見つけることができます. あなたがまだ使ったことがない人、あるいは標準版のものでさえ開発者ツールにあまり慣れていない人であれば、まずMozillaによるこのクールな "DevTools Challenger"をチェックしてください。ここでは、Firefox開発者版ブラウザで以下に説明されているツールのいくつかを使って練習することができます。例は楽しくわかりやすく、説明は簡単で、追いつかない場合はビデオチュートリアルに従ってください。. 1.アニメーションインスペクタツール CSSアニメーションはますます一般的になりつつあり、そしてFirefox開発者版によって提供されるCSSアニメーションツールは、作成されたアニメーションのあらゆるステップをたどって調べそして調べるのを容易にします。任意のアニメーションを一時停止、再生、反転することができます。スクラビングを介してフレームごとに発生していることも確認できます。. ツールにアクセスするには、 検査官 動いている要素を右クリックして "inspect element"を選択し、次に開発ツールウィンドウの右側にある "Animations"をクリックしてツール. 2.アニメーションタイミング機能エディタ アニメーションのタイミングは開発ツールで編集可能です、あなたは単に機能の横にあるアイコンをクリックします 規則 のセクション 検査官 ツールと関数曲線を表示するポップアップが開きます。これをドラッグして変更して、アニメーションのタイミングを調整できます。曲線を変更すると、それに応じてアニメーションの速度も変わります。. あなたがまだキュービックベジエのアニメーション機能に慣れていないのであれば、私はそれについての詳細を学ぶためにこの記事をお勧めします. 3. CSSプロパティのカラーピッカー Firefoxの標準版にはすでにカラーピッカーが用意されています（この記事で詳しく説明しています）。カラーピッカーは、ページから色を選択してクリップボードにコピーします。今言及しているカラーピッカーは プロパティのCSSカラー値に固有. すべてのCSSカラー値の横に 規則 のセクション 検査官 ツール、クリックするとポップアップするカラーホイールを開くアイコンがあります。ホイールから好きな色を選択できます. あなたがすでに欲しい色を持っていて、そしてそれがたまたまそのページにある色を持っているならば、単にカラーピッカーを開くためにポップアップの一番下のスポイトツールをクリックし、そしてあなたが欲しい色にピッカーをドラッグし、そしてそれをクリックしなさい。...

うまく設計されたニュースレター/ Eメールテンプレートは、成功と失敗の違いになります。製品について顧客を更新するか、情報を共有するかにかかわらず、適切に設計されたテンプレートを用意することは、読者を導き、電子メールを読むときに明確な首尾一貫した流れを彼らに与えるための素晴らしい出発点になります。最初の印象がどれほど重要かを考えると、これは非常に重要です。. ここにいくつかの要約があります 最高の無料HTMLニュースレターのテンプレート インターネット上であなたはペニーを支払うことなくダウンロードすることができます. ジャンプ後の全リスト. トップ5：無料のニュースレターのテンプレート キャンペーンモニター - 30の無料HTMLニュースレターテンプレート これは、Outlook、Thunderbird、Gmailなど、すべての主要なEメールクライアントおよびWebメールに対してテストされた、よく作成された30のテンプレートのきちんとソートされたコレクションです。特徴の1つは、それがすでにすべてのテンプレートを左右のサイドバーを持つもの、または単一列のテンプレートを持つものに事前にソートすることです。 Aweber： - 5素晴らしい機能的ニュースレターのテンプレート Aweberはそこに最高のニュースレターのテンプレートのいくつかを持っています、そしてそれらのうちのいくつかは良いデザインを超えていて、かなり機能的でもあります。こちらがAweberからのベスト5. ダウンロード これは、誰かにファイルをダウンロードするように求めるメモを送信するときに使用するのに最適な電子メールテンプレートです。このテンプレートには、PDF用、オーディオ用、その他のファイル用の3つの種類、および6つの色があります。したがって、読者のダウンロード体験を簡単にカスタマイズできます。. ようこそ これは、あなたがあなたのサービスに新しいメンバーを迎え入れているときに送信を使用するのに最適なEメールテンプレートです。. ブログニュースレター あなたがブログを書くなら、これはあなたの読者とのより強い関係を築くためにニュースレターであなたの情報と更新を共有するための素晴らしいテンプレートです。. マリブ このメールテンプレートは、プロモーションオファーを迅速かつ効率的に伝達するために特別に作成されたものです。. 野外 有機的な雰囲気とナビゲーションリンクをヘッダーに使用できる2列（右側のサイドバー）の電子メールテンプレート. MailChimp - 4つの基本的な柔軟なHTMLメールテンプレート メールチップ4つの基本的で柔軟なテンプレートを使い始めることができます。 Outlook...

見つける 品質のストック写真 お尻の本当の痛みかもしれません。ほとんどのストックフォトは単に安っぽく見えるか、写真で目的としている目標にほとんど適合しません。. しかし, 全画素 そのすべてを強力なものに変える 新しい検索エンジン それはあなたが検索することができます キーワード＆アップロードした写真. あなたは文字通りあなたのコンピュータから写真をアップロードすることができ、それは自動的になるでしょう 多数のストックフォトサイトを検索 関連写真を見つけるために。便利について話す! デフォルトでは、この検索エンジンはリポジトリ内の50を超えるすべてのストックフォトサイトをクロールします。あなたもすることができます 無料の写真だけに検索を制限する 右上隅にある小さなラジオスイッチをクリックして. 他のオプションでは、検索条件に基づいて検索を制限できます。 写真サイト, の オリエンテーション, そして写真なら 孤立したレンダリングかどうか. できます 特定の色を選ぶ カラーピッカーを使用して、その1つの配色に基づいてすべての写真をフィルタ処理する. この写真検索エンジンに何かがあれば できない それから私はそれを見つけていません。 Everypixelは今まで見た中で最も機能豊富なストックフォト検索です。. それで、このサイトが完全に無料であるならば、捕獲権がなければなりませんか？ちょっと、でも本当ではない。サイトは アフィリエイトプログラムを通じて収益化...

現代のウェブは 完全に反応がよい そしてこれを毎日多くのデザイナーが認識しています。しかし、レスポンシブデザインに関しては、厄介な問題が1つあります。 埋め込みコンテンツ. YouTubeからVimeoまでのすべてのビデオサイトには、 デフォルトの埋め込みコード 一定の大きさに固定されています。これは開発者が他のソリューションを使用する必要があることを意味します レスポンシブ動画を作成する. しかし、CSSコンテナクラスを使う代わりに、 SuperEmbed.js, 無料のJavaScriptライブラリ レスポンシブビデオを作成する. このプラグイン 2つの問題を解決 すぐに。すべての埋め込みビデオは メインコンテナを埋めるように引き伸ばす, 十分な柔軟性も ブラウザウィンドウに基づいてサイズを変更する. 最高の部分は、そのSuperEmbed.jsです。 追加のコードは不要, だからあなたはちょうどすることができます ファイルを埋め込む そして 走らせて. このJSライブラリは、残りの部分を 特定のサイトの埋め込み要素をターゲティングする. すべての動画 特定の縦横比を維持する, だからあなたは気まぐれな寸法を心配する必要はありません。そしてSuperEmbedは バニラJSライブラリ...

あなたは今までしたかったことがありますか 直接編集する CSSファイルに戻らずにブラウザで1つの解決策はChromeデベロッパーツールですがいくつかの開発者 より単純なワークフローを好む. それはどこです CSSジョージ 入ってくる。これは無料 ブラウザ内編集ツール 作品 LESSの上に そしてそれは 単純なJavaScriptファイル. ほとんどの開発者は ブラウザベースのエディタ 誰もがLESSプリコンパイラを使うわけではないので。しかしCSSジョージ LESS環境では動作しますか すばやくインストールできます npm経由. npmがインストールされていれば、この単純なコードを実行して次のことができます。 ソースファイルを追加する 現在のプロジェクトへ npm install --save-dev css-george またはできます 引っ張る George.js ファイル 他のすべてのソースファイルと一緒にホストされているGitHubから。プロジェクト全体が無料でオープンソースになっているので、...