CSS3 ジェネレーター。 最高の
CSS コード ジェネレーターは、Web 開発者の時間を大幅に節約し、不要なエラーを防ぐことができる非常に便利なツールです。 さらに、コードが読みやすくなります。 この記事では、便利だと思われる CSS コード ジェネレーターをいくつか選択しました。
CSSクリックチャート
CSS チートシート
スプライトボックス
ピクセルマップジェネレーター
クリーンなCSS
CSSアニメーション
さて、みんな、アニメーション？ CSS でトランジションを適用して遊んでみましょう。 
UIのグラデーション
待って！ アニメイト
CSS アニメーション間にカスタムの繰り返し一時停止を作成することは、決して簡単な作業ではありません。 しかし、このアプリケーションの助けを借りて、手順の複雑さはゼロに軽減されます。 
CSS3ジェネレーター
CSSタイプセット
さまざまなフォントがどのようなものかを見てみたいですか? 「CSSタイプセット」に進みます。 テキストを入力し、フォント オプションを選択するだけです。 
CSSを楽しむ
フレキシブルボックス
Flexbox について理解するのが難しい場合は、Flexy Box を試してみてください。 このアプリでは、フレックスボックスのさまざまなバージョンと構文解釈を比較できます。 
CSS コード ジェネレーターは、Web 開発者の時間を大幅に節約し、不要なエラーを防ぐことができる非常に便利なツールです。 さらに、コードが読みやすくなります。 この記事では、便利だと思われる CSS コード ジェネレーターをいくつか選択しました。
CSSクリックチャート
CSS チートシート
スプライトボックス
ピクセルマップジェネレーター
クリーンなCSS
CSSアニメーション
さて、みんな、アニメーション？ CSS でトランジションを適用して遊んでみましょう。
UIのグラデーション
待って！ アニメイト
CSS アニメーション間にカスタムの繰り返し一時停止を作成することは、決して簡単な作業ではありません。 しかし、このアプリケーションの助けを借りて、手順の複雑さはゼロに軽減されます。
CSS3ジェネレーター
CSSタイプセット
さまざまなフォントがどのようなものかを見てみたいですか? 「CSSタイプセット」に進みます。 テキストを入力し、フォント オプションを選択するだけです。
CSSを楽しむ
フレキシブルボックス
Flexbox について理解するのが難しい場合は、Flexy Box を試してみてください。 このアプリでは、フレックスボックスのさまざまなバージョンと構文解釈を比較できます。
ああ！ 発電機を使用していますか？ CSS3または HTML5? そうでない場合は、試してみる価値があるかもしれません :) 想像してみてください。ボタン、ブロックの角、影、グラデーションなど、HTML5 のスタイルを手動で記述するのをやめることもできます。 新しいプロジェクトを作成するたびに同じコードを記述する必要はありません。ボックスにパラメータを「入力」し、ボタンを押すだけで既製のソース コードを取得でき、必要に応じて修正できます。
この記事では、そのようなジェネレーターのセレクションを紹介します。 これらのほとんどは CSS3 ジェネレーターと HTML5 用のジェネレーターです。 サービス Web サイトへは、サービス名をクリックしてください。
CSS3 ジェネレーター:
CSS3.me
最高のジェネレーターの 1 つ。 著者は エリック・ホフマン。 最も一般的に使用される効果である、丸め、影、グラデーション、透明度を変更および設定することができます。 
CSS3メーカー
ほぼすべてがあり、さらにもう少しあります。 @font face、アニメーション、ボックスシャドウ、テキストシャドウ、テキスト回転、変換、グラデーション、丸めなどをカスタマイズできます。 
CSS3ジェネレーター
以前のジェネレーターとほぼ同じ機能があります。 ドロップダウン リストから目的の項目を選択し、一次データを入力する必要があります。 
Webestools シャドウ ジェネレーター
シャドウジェネレーター。 調整できるのはシャドウのみです: カラー、オフセット、ぼかし、内側または外側のシャドウなど。 
ボタンジェネレーター
CSS3ボタンジェネレーター
楽しい発電機。 右側には操作の結果を示す大きなボタンが 1 つあり、左側には設定があります。 影、境界線、色などを操作できます。 ドラッグ アンド ドロップ スライダーは、Web サイト構築が初めての人に最適です。 自分のアクションに対する反応をすぐに確認できるのは良いことです。これにより、どの設定が何に影響しているのかを理解できます。 
CSS3-Tricks ボタン メーカー
このボタン ジェネレーターはもう少し単純です。 ボタンを作成するプロセス全体は、スライダーのドラッグに基づいています。 ここでは、賭けは背景、つまりボタンの色で遊んでいます。 
CSS3ボタン.net
これはまだ悪いボタンジェネレーターではありません。 ボタンの背景、枠線、外側の影、内側の影、サイズ、文字の色、文字の影をカスタマイズできます。 右側のブロックに変更を加えると、コードがすぐに変更されます。 
境界線イメージと半径ジェネレーター
境界半径
非常に控えめな機能: 角の丸みのみを設定できますが、各角は個別に設定できます。 
枠線画像
習得するのは少し難しいですが、画像に境界線を作成する必要がある場合は、このツールが最適です。 画像を選択し、スライダーを使用して境界線のサイズを選択します。各境界線の背景を増やすこともできます...画像を繰り返す方法もあります。 そしてコードは以下から生成されます。 
CSS3 勾配ジェネレーター
Colorzilla グラデーション エディター
これは本当にクールなグラデーションジェネレーターです。 既製のカラーセットが多数ありますが、独自のカラーセットを選択することもできます。 グラデーションのタイプが設定されます: 水平、垂直など。 IEもサポートされています。 
HTML5 ジェネレーター
HTML5 ★ボイラープレート
このジェネレーターを使用すると、さまざまなブラウザー向けに完全に最適化されたテンプレートを入手できます。 このジェネレーターはとても気に入ったので、これからも使います。 すべての「トリック」を知るには、特にすべてがロシア語であるため、このプロジェクトにアクセスしてください。 
Shiki Ryu HTML5 ジェネレーターは、以前のものよりも少し複雑です。 ページのタイトルと説明を入力し、CSS フレームワーク、CSS ボタン スタイル、ライブラリ、分析などを接続できます。 
Initializr は、新しいプロジェクトの開始に役立つ HTML5 テンプレート ジェネレーターです。 Initializr は、クリーンでカスタマイズ可能なテンプレートを作成します。 選択されるパラメータは次のとおりです: プライマリ フレームワーク、サーバー オプション (.htaccess、nginx.conf、web.config)、jquery 接続、Google アナリティクス、次の選択肢など。 
これは単純なジェネレーターです。 ページ上にどの要素を表示するかを選択し、いくつかのオプションを指定するように求められます。 
以上です。優れた HTML5 または CSS3 ジェネレーターをご存知の場合は、コメント欄に遠慮なく書いてください :)
最新の記事やレッスンを入手するには、購読してください。
このシンプルなオンライン サイト ページ ジェネレーターを使用すると、通常のテキスト エディターと同じようにサイトのページを作成できます。 Web ページの本文に最も必要な HTML タグをすべて生成できます。 Web サイトのページ本文の HTML コードを生成するこのジェネレーターは、Web サイトのページの作成を何倍も高速化します。
サイトページジェネレーターの使用に関する注意事項
このサイト ページ ジェネレーターは、ページの HTML コードを生成するという意味で視覚的であるため、このジェネレーターを使用するときに使用しているブラウザーでは、エディター ウィンドウに表示されているとおりにページが表示されます。 このエディタ兼ジェネレーターはマークアップ コードのみ、つまり HTML のみを生成します。 JavaScript や PHP などのプログラミング言語でスクリプトを作成することを目的としたものではありません。
このエディタは、HTML マークアップ言語を学び始めたばかりの初心者 Web マスターを対象としています。 ただし、経験豊富な Web サイト構築者にとって、小さなページやページ テンプレートをすばやく作成するのにも役立ちます。 初心者の Web マスターは、ページ デザインに加えられた変更と、それがページの HTML マークアップの変更にどのように反映されるかをすばやく比較できる機能に魅力を感じるでしょう。 この簡単な比較により、HTML をできるだけ早く効率的に学習できます。
このエディタは、非常に大きなテキストを処理するように設計されていません。 多額の「重い」写真。 このエディターで非常に大きなテキストや大きな画像を含む Web ページを作成する場合は、まず完全な Web ページ テンプレートを作成し、結果の HTML コードを Web ページ ファイルにコピーしてから、長いテキストと画像へのリンクがあります。 このエディタはプロのエディタではなく、主にアマチュアや初心者のウェブマスターを対象としていることに注意してください。 その主な目的は、初心者がウェブサイト構築を学ぶのを助けることです。
使用説明書
MS Word などのテキスト エディタを使用したことがある場合は、この Web ページ ジェネレーターを習得するのに何の問題もありません。 このエディターは、Web ページの本文を最初から作成するか、既存の Web ページを編集して独自の変更を加えるために使用できます。
ページを最初から作成し始める場合は、エディター ウィンドウで最初のテキストを消去し、そこでテキスト、画像を入力し、独自の書式設定を開始する必要があります。 作業が完了したら、エディター画面の下部にある「コード」ボタンをクリックし、結果のコードを Web ページのファイルにコピーする必要があります。 そしてこのファイルを保存します。 受信したコードは Web ページの本文、つまりタグ間のみにコピーする必要があることに注意してください。
そして
。 タグ自体 体編集者が作成したものではありません。
自分が作成したものではないものや、かなり前に作成したものなど、既製の Web ページを編集したい場合は、エディター画面の下部にある「コード」ボタンをクリックする必要があります。エディター ウィンドウから最初のコードをすべて削除し、そこに Web ページ ファイルからコードをコピーします。 既存の Web ページの本文、つまりタグの間にあるコードのみをコピーする必要があることに注意してください。
そして
。 タグ自体 体エディタにコピーする必要はありません。 その後、ビジュアル編集モードに戻す必要があります。 これを行うには、エディタ ウィンドウの下部にある [デザイン] ボタンをクリックし、ページの外観の変更を開始します。
このエディタでは 2 つの方法で Web ページの本文を編集できることは明らかです。 「デザイン」モードでは視覚的に編集するか、「コード」モードではコードで直接編集します。 したがって、初心者のウェブマスターにとって、このエディタは学習に非常に役立ちます。 ビジュアル モードで Web ページに小さな変更を加え、コード編集モードに切り替えると、コードがどのように変更されたかをすぐに確認できます。 または、逆に、コード編集モードで Web ページのコードに小さな変更を加え、ビジュアル編集モード (または [プレビュー] ボタンを使用して表示モード) に切り替えることで、Web ページがどのように変化するかをすぐに確認することができます。
基本的なテキスト編集
上部のメニュー バーには、一般的なテキスト編集用のボタンが含まれています。 これらには、他のテキスト エディタで受け入れられる標準的な表記法があります。 したがって、それらについて簡単に説明しましょう。
すべてが非常に簡単に機能します。 テキストの一部を選択し、上部のメニュー ボタンをクリックすると、テキストのこの部分がそれに応じて書式設定されます。 または、何も選択されていない場合は、対応するボタンのモードに切り替わります。つまり、テキストの入力を続けると、テキストはオンにしたばかりのボタンのモードで入力されます。
また、他のテキスト エディターと同様に、段落全体にのみ適用されるモードと、段落の一部に適用できるモードがあります。
メニューの上部にあるすべてのボタンの簡単な説明を、配置順に示します。
- 段落。 タイトルレベルを選択します。 段落全体に適用されます。
- フォント。
- フォントサイズ。
- フォントの色。
- 太字フォント。
- イタリック体のフォント。
- 下線付きのフォント。
- 取り消し線のフォント。
- 左揃えします。 段落全体に適用されます。
- センタリング。 段落全体に適用されます。
- 右揃え。 段落全体に適用されます。
- 双方向アライメント。 段落全体に適用されます。
- 水平線。 これは段落に関するものでも、段落の一部に関するものでもありません。 これは、幅全体に水平線を挿入するだけです。
- 上付き文字。
- 添字。
基本的なHTML編集
中央のメニュー バーには、Web ページの通常の編集用のボタンと通常のエディター用のサービス ボタンの両方が含まれています。
メニューの上部にあるすべてのボタンの位置順の説明:
- ハイパーリンクの作成。 必ずマウスを使用してテキストまたは画像を選択し、クリックすると別の Web ページに移動します。 選択後、メニュー ボタンをクリックしてウィンドウを開き、遷移先のアドレス (URL) と遷移条件 (ターゲット) を指定する必要があります。 次の条件を設定できます。
- 空の。 デフォルトでは、同じウィンドウに新しいページが開きます。
- _空白。 新しいページは、新しいブラウザ ウィンドウ (または特定のブラウザ設定に応じて新しいブラウザ タブ) に表示されます。
- _親。 新しいページが親ブラウザ ウィンドウ (またはタブ) に表示されます。 親ウィンドウ (またはタブ) がない場合、これは _self 条件に似ています。
- _自己。 新しいページは、リンクが配置されている同じウィンドウに表示されます。 これは「空」モードに似ています。
- _上。 サイト ページがフレーム化されている (つまり、複数のウィンドウに分割されている) 場合、新しいページはブラウザ ウィンドウ全体に表示されます。 通常の場合、これは _self モードの類似物でもあります。
- ハイパーリンクをキャンセルします。 ハイパーリンクのテキスト全体を選択します。 ハイパーリンクのテキストの一部のみを選択すると、選択されていない部分はハイパーリンクのままになります。 たとえば、ハイパーリンク テキストの中央部分のみが選択されている場合、選択されていないテキスト上に同じアドレスを持つ 2 つのハイパーリンクが形成されます。
- 画像を挿入しています。 画像を配置する場所にカーソルを置き、ボタンを押します。 開いたウィンドウで、画像へのパス (画像 URL)、画像の説明 (画像の説明)、ページ上の画像の配置 (配置)、境界線の幅 (境界線)、およびテキストからの画像のインデント (またはページ上の他の要素を水平方向および垂直方向に配置します (HSpace、VSpace)。次のように画像の配置を設定できます。
- 空の。 デフォルトは左揃えです。
- ベースライン。 1 つの段落内に画像とともに配置されるテキスト (およびその他のページ要素) は、ブラウザの作成者が決定したとおりに配置されます。
- 上。 画像と同じ段落にあるテキスト (およびその他のページ要素) は、画像の上部に揃えられます。
- 真ん中。 画像と同じ段落にあるテキスト (およびその他のページ要素) は、画像の中央に揃えられます。
- ドットム。 画像と同じ段落にあるテキスト (およびその他のページ要素) は、画像の下部に揃えられます。
- テキストトップ。 画像と同じ段落にあるテキスト (およびその他のページ要素) は、画像の上に配置されます。 (すべてのブラウザでサポートされているわけではありません。)
- 絶対的な真ん中。 (すべてのブラウザでサポートされているわけではありません。)
- 絶対的な底辺。 (すべてのブラウザでサポートされているわけではありません。)
- 左。 画像は、画像と同じ段落にあるテキスト (およびその他のページ要素) の左側に配置されます。
- 右。 画像は、画像と同じ段落にあるテキスト (およびその他のページ要素) の右側に配置されます。
- フォーマットをキャンセルします。 段落の書式設定部分に適用される上部のメニュー バー ボタンを使用して行われた書式設定を元に戻します。 書式設定をキャンセルする必要がある場合、つまり目的のテキストを選択してこのボタンをクリックする場合は、トップ メニュー ボタンとまったく同じように機能します。 このボタンの便利な点は、選択したフラグメントにあるすべてのタイプのすべての書式設定を 1 回クリックするだけですぐに削除できることです。
- テーブルの作成と編集。 このボタンは、カーソル位置にテーブルを作成するか、選択したテーブルを編集するために使用されます。 テーブルを作成するときは、次のパラメータを指定する必要があります。
- 行 - 行数。
- 列 - 列の数。
- 幅 - テーブルの幅。 画面幅のパーセンテージまたはピクセル単位で設定します。
- 境界線 - セルの境界線の幅。 0 のままにすると、セルの境界線は表示されません。
- CellSpacing - 表のセル間のピクセル単位の距離。
- CellPadding - セルの境界線からセル内のテキストまでのピクセル単位の距離。
- 配置 - ページ上の表の配置:
- デフォルト。 デフォルトでは、ブラウザの開発者によって設定されています。
- 左。 表がページの左端に押し付けられます。
- 中心。 表は Web ページの中央にあります。
- 右。 表がページの右端に押し付けられます。
- カーソルの左側に 1 列を作成します。 複数の列が選択されている場合、カーソルは選択された最後の列にあるとみなされます。
- カーソルの右側に 1 列を作成します。 複数の列が選択されている場合、カーソルは選択された最後の列にあるとみなされます。
- カーソルの上に 1 行を作成します。 複数の行が選択されている場合、カーソルは選択された最後の行にあるとみなされます。
- カーソルの下に 1 行を作成します。 複数の行が選択されている場合、カーソルは選択された最後の行にあるとみなされます。
- カーソルから 1 列を削除します。 複数の列が選択されている場合、カーソルは選択された最後の列にあるとみなされます。
- カーソルから 1 行を削除します。 複数の行が選択されている場合、カーソルは選択された最後の行にあるとみなされます。
- 番号付きリストを作成します。 または、いくつかの段落を選択し、メニュー ボタンをクリックします。 この場合、これらすべての段落は番号付きリストの要素になります。 または、カーソルを目的の場所に置き、このメニュー ボタンをクリックすると、入力したすべての段落が自動的に番号付きリストの要素になります。
- 簡単なリストを作成します。 いくつかの段落を選択し、メニュー ボタンをクリックします。 この場合、これらすべての段落は番号のない単純なリストの要素になります。
- インデントを削除します。 インデントを削除したい段落上にカーソルを置く必要があります。 段落全体を選択することも、段落の一部だけを選択することもできます。
- インデントを作成します。 カーソルは、左インデントを作成する段落上にある必要があります。 段落全体を選択することも、段落の一部だけを選択することもできます。 インデントは、(最初の行だけでなく) 段落全体に対して作成されます。
- すべての変更をロールバックします。 [コード] ボタンまたは [プレビュー] ボタンをクリックしない限り、加えた変更をすべて削除し、最後にコードを表示したとき、またはページを表示したときの状態に戻すことができます。
- 削除されたすべての変更を前方に復元します。 必要以上の変更をロールバックした場合は、削除した変更を復元できます。 同様に、変更をロールバックした後に「コード」モードまたは「プレビュー」モードに切り替えた場合、変更を復元することはできなくなります。
- 選択範囲を破棄すると同時に、選択範囲を Windows ポケットにコピーします。 (Ctrl+X)
- 選択内容を Windows の「ポケット」にコピーします。 (Ctrl+C)
- Windows の「ポケット」の内容をカーソルのある場所に貼り付けます。 (Ctrl+V)
追加のHTML編集
3 番目のメニュー行には、主にフォームを作成および編集するためのボタンと、いくつかの一般的なボタンが含まれています。 追加機能どの編集者でも。
メニュー行の 3 行目にあるボタンの位置順のリスト:
- フォームを作成します。 開いたウィンドウで、フォームの名前、このフォームのデータを処理するスクリプトのアドレス、およびデータ転送方法 (post または get) を入力する必要があります。
- チェックボックスを作成します。 開いたウィンドウに、この選択フォームの名前、選択時に受け入れられる値を入力し、このフォームで選択チェックボックスが最初にチェックされているかどうかを示します。
- ラジオボタンを作成します。 開いたウィンドウに、この選択フォームの名前、選択時に受け入れられる値を入力し、このボタンが最初に選択されているかどうかを示します。 ラジオ ボタンからメニューを作成する場合は、同じメニューのすべてのラジオ ボタンが同じ名前を持つ必要があることを忘れないでください。
- テキストを入力するためのプラットフォームを作成します。 開いたウィンドウで、テキストを入力する領域の名前、領域の幅（文字数）、領域の行数、段落とスクロール バーの位置、およびこのフィールドの最初のテキストを入力します。
- 「実行」ボタンを作成します。 開いたウィンドウで、ボタンの名前と、このボタンに書き込まれるテキストを書き込みます。
- 画像の形で「実行」ボタンを作成します。 開いたウィンドウに、ボタンの名前と、ボタンの役割を果たす画像のアドレスを書き込みます。
- 完了したフォームをクリアしてすべてのデフォルト値を返すボタンを作成します。 開いたウィンドウで、ボタンの名前と、このボタンに書き込まれるテキストを書き込みます。
- 隠しフィールドを作成します。 開いたウィンドウに、隠しフィールドの名前とその値を書き込みます。
- アスタリスクを含むパスワードフィールドを作成します。 開いたウィンドウで、パスワードフィールドの名前、フィールドの長さ、およびユーザーがパスワードを入力するときに入力できるパスワードの最大文字数を書き込みます。
- テキストフィールドを作成します。 開いたウィンドウで、テキスト フィールドの名前、その文字サイズ、ユーザーが入力できる最大文字数、およびこのフィールドの最初のテキストを書き込みます。
- 印刷のために送信します。
- すべて選択。
良い一日！ すぐにこの投稿のデザインについて説明します。ある日、偶然この投稿を見つけたとき、私は、提示されたジェネレーターの膨大な量の情報とナビゲーション要素にあまり満足していませんでした。さらにそのユーザー インターフェイスには満足していませんでした。 作業用のツールが提供されていないことに激怒しました スタイル- それら自体は、それらが表す可能性の限界内に保たれていない...どうしてそうなるの?!
創造性に取り組むとき、時間をかけて習得し、作業するための利用可能な手段やツールを用意したいと思うでしょう。 最小努力と時間。 これらすべての結果として、次のような考えが生まれました。 最良のものを選択するツールと 整理する頻繁に使用するもの (クイック起動などのナビゲーション メニュー)。
このノウハウが多くの人にとってWeb開発プロセスの良い助けとなることを願っています。
CSS ジェネレーター:
- CSS3.me- シンプルでエレガントでありながら、美しいドメインを備えた機能豊富な CSS ジェネレーター
- CSS3Maker.com- 新しい CSS3 機能、ブラウザ間の互換性、柔軟性、必要なものすべての完全なセットを操作するための非常に広範な機能。
- CSS3Generator.com- クラシックとシンプルを愛する人にとって、余分なものは何もありません。一言で言えば「オールドスクール」です。
- Colorzilla.com- ほとんどのブラウザをサポートし、画像 (純粋な CSS) を使用せずに美しい背景画像を作成するためのグラデーション ジェネレーター。
WEBツール：
- ボタンビルダー- Web 2.0 のリズムでボタンをデザインするためのツール。 機能の中でも、内部パディング、テキスト サイズ、角の丸み、グラデーション カラーの選択などをカスタマイズできることに注目してください。
- フォームビルダー- フォーム全体とその個々の要素の両方の外観をカスタマイズできるフォーム デザイナ。
- アイコンビルダー- ボタン、メニュー、ファビコン用の新しいアイコンを作成して、フリーのアーティストになったような気分になれます。
- リボンビルダー- 純粋な CSS を使用してスタイリッシュなリボンを作成するには、このツールを幅広い設定とオプションとともに使用します。
記事の冒頭にあるボタン（アイコン）の形の画像 - クリック可能！
提案がある場合、またはこのアイデアをサポートできる興味深いツールを知っている場合は、ぜひ発言してください。 ゴミを捨てないでください。アセンブリには専用のアイテムのみを追加したいと考えています。 ありがとう。