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

クリスマスは皆が再び子供になる年のあの魔法の時期です。クリスマスツリー、サンタと彼の飛んでいるトナカイ、クリスマスディナーと家族の集まりの下で贈り物を見つけることについての考え - それは一年で最も素晴らしい時期です（商品化されるかどうかにかかわらず）. あなたが探しているなら あなたのウェブサイトのデザインを休日に見せる, あなたはあなたが正しい場所にいることを知っています。私は次のものを集めるのに多くの時間を費やしました クリスマスをテーマにしたフォント、アイコンセット、Photoshop / Illustratorチュートリアル、ベクター あなたの使用のために。警告のメモ、あなたの指はスクロールダウンに飽きることになるでしょう. あなたが見るものが好きなら、あなたがそれらをダウンロードするのに必要なグッズに直接行くためにリンクをクリックしてください、そして多分無料であなたにこれらのリソースを提供している素晴らしいデザイナーに感謝を残しなさい. クリスマスフォント これらのクリスマス風フリーフォントは、工芸品でもグラフィックプロジェクトでも完璧にフィットします。それらは雪、球根、おもちゃ、キャンディー、そして贈り物で飾られています - クリスマスデザインのすべての素晴らしい要素. Kingthingsクリスマス クリエイター：Kingthings Ice＆Snowフォント 作成者：AARRGGHH! キャンディケーン 作成者：Michel Bujardet クリスマス・イブ 作成者：Vanessa Bays クリスマスのあかり クリエイター：GreyWolf Webworks DKファーザーフロスト 作成者：David...

アドビのソフトウェアはあらゆる年齢のデザイナーによって世界的に有名ですが、Photoshop以外にはありません。. PhotoShop編集パネル カスタムデザインを構築するために必要なすべてのものが揃っています。. そして今、無料です Webアプリエディタ, 呼ばれる レイヤースタイル, これは、お使いのブラウザにあるPhotoshopのレイヤエディタによく似ています。それはあなたをすることができます CSSコードを動的に生成する Photoshopで作業しているかのように. あなたが訪問した場合 ビルダーページ あなたはそれがどのように機能するかを見るためにそれをいじめることができます. 窓が付属しています 5種類のスタイルパネル それはすべてPhotoshopに似ています。彼らは同じ設定に従うと彼らは すぐに更新 ページ上のデモボックス付き. これらはあなたが選ぶことができるパネルです： 影を落とす 内側の影 バックグラウンド 境界 境界半径 彼らは皆、このツールをデザイナーにとってとても楽しいものにするAdobe GUIをまねています。あなたも 完全なCSSコード, 無料で生成された. というラベルの付いた左下隅のボックスをクリックするだけです。 “CSSコード”...

日本、ゴージャスな美学とミニマリズムの先駆者。ファッションから建築まで、彼らはそれをすべて考え出したようです。私は特に日本のアニメと漫画が大好きです。ストーリーテリングとアートを組み合わせる方法は、私が自分のストーリーを伝えたい方法を永遠に刻み込んでいます。. しかし、彼らの美しい美学の実績は、あなたが彼らのウェブサイトのいくつかをチェックアウトするときには途方もない停止（！）になります。彼らは信じられないほど散らかっています。 基本的なデザインルールを考慮せず、ナビゲーションも考慮に入れない. 彼らは、テキストでいっぱいになった、昨年の伝統的な新聞を彷彿とさせます。. しかし、これはなぜですか？これらのWebサイトのパターンを分析し、それらを分類しましょう。しかし、最初に、いくつかの日本のウェブサイトを見て、あなたと私が同じ見解で同じページにいるかどうか確かめましょう。準備はできたか? 楽天 カカク グー ライブドア ごメモはてな 産経 今、私たちは日本のウェブデザインについても同じことを観察したと確信しています。話を短くするには： 日本のウェブサイトはテキストが非常に多い. 余白の重い、重い使用. たくさんの（青色！）のハイパーリンクとURL. 広告、たくさんの広告. ほとんど画像がない、または存在する場合は非常に小さい画像. 目が焦点を合わせるための簡単な流れを絶対に無視する. フラッシュ重い。バナー広告、スライドショー. それらを見てみると、HTMLがWebデザインの栄光の栄光であった80年代と90年代の名残のようなものです。新聞を彷彿とさせるようなものもあります。行と列がテキストでどの程度密集しているかを確認してください。. 興味深いことに、これらのWebサイトは すべて これらの特性を共有するまるでそれらがすべて同じ考えを念頭に置いて設計されているかのように。さて、その考えは何だろうか？これを理解するために、以下を見てみましょう。. 日本のモバイルカルチャー スマートフォンが世界的に大流行する前、日本はすでに何年も前に自分たちのことをやっていました。携帯電話の使用は彼らの生活の中で非常に根ざした部分であり、彼らはそれのための用語を造り出しました：携帯電話文化、または ケータイ 文化. スマートフォンの前には、カメラ付き携帯電話がありました。これは、日本が世界の他の地域よりもはるかに先導的な業界です。 Sharp Corporationが製造しJ-Phoneが発売した携帯電話J-SH04は、2000年11月に販売を開始しました。最初の本物のカメラ付き携帯電話として宣伝され、MMS、電子メール、さらには3Gテクノロジを搭載できました。....

すべてのプロジェクトに必要なわけではありません 大きな枠組み. FoundationもBootstrapも、広く支持されている素晴らしいフロントエンドフレームワークです。. 時々Webプロジェクト 単純なものが必要なだけ. そしてそれこそまさに かわいいストラップ 配達する. Cutestrapは自分自身を次のように説明します。 “normalize.cssと本格的なフレームワークとの間の何か”. これは素晴らしい説明です。 必要最低限​​のスタイルシートではありません そしてそれは 過度に華やかではない どちらか. メインスタイルシートは全部で8KBあります 10倍以上小さい ブートストラップの縮小スタイルシートより（平均110KB-120KB）. すべてのCutestrapウェブサイトは 垂直リズム それはそれとうまく溶け込む 事前定義グリッドシステム. すべてのデフォルトのタイポグラフィ設定には 独自の行の高さの値 それに応じて一致. すべての特異性は 最小限に抑えた だからあなたはできる 設定を簡単に上書き 必要に応じて....

ブートストラップ 現在は ナンバーワンのフロントエンドフレームワーク そして簡単に レイアウトを構築する最も簡単な方法. それは何年も前から出回っていて、サードパーティの開発者は彼ら自身のリソースをオンラインでさえ発行しました。これらのリソースの範囲は 無料テーマ に 詳細なプラグインとフレームワーク. この記事では、これらの一握りを共有したいと思います リソースとベストプラクティス Bootstrapをさらに使いたい開発者向け. 全ての この記事のリソースは無料です, だからあなたはそれらを使うことができるけれどもあなたは適当だと思う。 Bootstrapを一度も使ったことがないとしても、ここであなたが始めるのに役立つ何かを見つけるのは確実です。. ブートストラップを使用した再スタイリング デフォルトのBootstrapライブラリには、 独自のユニークなデザイン それは素晴らしいですね。 Web上で広く知られているので、Webサイトがいつ公開されているのか簡単に判断できます。 伝統的なBootstrap要素を使う. しかし、あなたもできる これらの要素を自分で作り直す レイアウトの基礎としてBootstrapのコードを使用する. がある いくつかの異なる方法 あなたはこれを行うことができます： 独自のスタイルシートを追加してデフォルトを上書きする. BootStrapの出力をカスタマイズして、必要な要素だけを取得する....

私たちがウェブサイトを飾る方法を変える多くのCSS3機能があります、そのうちの1つはCSS3グラデーションです。 CSS3より前のバージョンでは、グラデーション効果を作成するために必ず画像が必要です。今、私たちはCSSを使うだけで同じ（そしてより良い）効果を届けることができます これまでの記事では、CSS3で実現できる2種類のグラデーションについて説明しました。 ラジアル 線形グラデーション. 今回は彼らの兄弟を調べます。 繰り返しグラデーション. 基本的な繰り返し 繰り返しグラデーション 本質的には拡張子です。構文は、放射状グラデーションと線形グラデーションの定義方法と似ていますが、名前が示すとおり、指定された方向に色が繰り返されるだけです。線形グラデーションを繰り返すには、この関数を使います。 繰り返し線形勾配, 放射状または楕円形のグラデーションを繰り返す場合は、この関数を使用します。 繰り返し放射状グラデーション. / *線形* / .gradient 背景：繰り返し線形グラデーション（0deg、＃f9f9f9、＃cccccc 20px）; / * Radial * / .gradient 背景：繰り返し放射状グラデーション（50％50％、円、＃f9f9f9、＃cccccc 20px）; コードを除いて、コードの残りの部分に大きな違いはありません。 色の繰り返し. 以下は、この色の繰り返しがどのように機能するかを説明する簡単な図です。....

これまでのところ、私達はで多くの新しい特性を論じました CSS3. それを超えて、実際に試してみる価値があるCSS3公式仕様に現在含まれていない他のいくつかの特性があります。 ボックス反映 によって開始されるプロパティ ウェブキット. このプロパティは指定されたオブジェクトに反映できます. 基本的な反射 基本的な実装は非常に直感的です。たとえば、実際のオブジェクトの下に反射を置きたいとしましょう。我々は書ける： img -webkit-box-reflect：below; クレジット：ブルースの8週間この例は、画像をどのように反射するかを示しています。 以下 （位置）オブジェクトしかし、この場合、私たちはまた、 右, 左, そして 上に. 反射オフセット オフセット 反射と実際の反射の間のギャップを定義するために使用されます。以下のコードスニペットを見てみましょう。 img -webkit-box-reflect：10ピクセル以下; 上記のコードでは、実際のオブジェクトからの反射を次のように分離しました。 10px; クレジット：ブルースの8週間デモを見る グラデーションでマスキングする よく見られる反射効果は、下部がフェードアウトし、実際のオブジェクトの半分以下しか表示されないことです。この種の効果を再現するために、我々は適用することができます CSS3グラデーション そのようにオブジェクトをマスクする。...

ほんの数例を挙げると、CSSプリプロセッサ、LESS、Sass、Stylus、およびSwith CSSがいくつかあります。. CSSプリプロセッサ, 前にも述べたように、これは主にCSSのオーサリングをより動的に、組織的にそして生産的にすることを目的としています。しかし, 問題は、それらのうちどれが最もうまくいくかです。? もちろん、それらすべてを見ているわけではありません。代わりに、最も人気のあるものを2つだけ比較します。 セスとレス. 決定するために、7つの要因のうち2つを比較します。同点の場合は、両方に1ポイントが与えられます. さぁ、始めよう. インストール 非常に基本的なステップから始めましょう, インストール. SassとLESSはどちらも異なるプラットフォーム上に構築されており、SassはRuby上で実行されていますが、LESSはJavaScriptライブラリです。 だった 実際にもRuby上に構築されています 最初は）. Sass： Sassが動作するためにはRubyが必要です。Macではこれがプレインストールされていますが、WindowsではSassを使い始める前にインストールする必要があるでしょう。さらに、Sassはターミナルまたはコマンドプロンプトからインストールする必要があります。あなたが代わりに使うことができるいくつかのGUIアプリケーションがありますが、それらは無料ではありません. もっと少なく： LESSはJavaScriptに基づいて構築されているので、LESSのインストールはJavaScriptライブラリをHTMLドキュメントにリンクするのと同じくらい簡単です。 LESSをCSSにコンパイルするのに役立ついくつかのGUIアプリケーションもあり、それらのほとんどは無料で非常によく機能しています（例えばWinLessおよびLESS.app）。. 結論：LESSが明らかにリードしている. 拡張機能 SassとLESSの両方とも、より速くより簡単なWeb開発のための拡張を持っています. Sass：前回の投稿で、現在および人気のあるSassベースの拡張であるCompassについて説明しました。コンパスには、短時間でCSS3構文を書くためのMixinがいくつかあります。. しかし、コンパスは単にCSS3ミックスインを超えて、ヘルパー、レイアウト、タイポグラフィ、グリッドレイアウト、そしてスプライト画像のような他の非常に便利な機能を追加しました。それはまた持っています config.rb CSSの出力やその他の設定を制御できるファイルです。つまり、要するに、コンパスはSassでWeb開発を行うためのオールインワンパッケージです。. もっと少なくLESSにもいくつかの拡張機能がありますが、必要なものがすべて1か所にまとめられているCompassとは異なり、それらは別々の開発者によって構築されています。これは熟練したユーザーにとっては問題にならないでしょうが、LESSを始めたばかりのユーザーにとっては、ワークフローに合った適切な拡張子を選択するために時間がかかる必要があります。. あなたのプロジェクトに含める必要があるかもしれないいくつかのLESS拡張があります：...