Bash を使用して Web セーフカラーを作成する
コンピューターのモニターのカラー パレットが限られている場合、Web デザイナーは Web セーフ カラーのセットを使用して Web サイトを作成することがよくあります。新しいデバイスで表示される最新の Web サイトでは、元の Web セーフ パレットよりも多くの色が表示されますが、Web ページを作成するときに Web セーフ カラーを参照したいことがあります。こうすることで、私のページがどこでも見栄えが良くなることがわかります。
Web セーフ パレットはオンラインで見つけることができますが、簡単に参照できるように独自のコピーを用意したいと思いました。 Bash の for ループを使用して作成することもできます。
Bash for ループ
Bash の for ループの構文は次のとおりです。
for 变量 in 集合 ; do 语句 ; done
たとえば、1 から 3 までのすべての数値を出力するとします。 Bash コマンド ラインで for ループを作成すると、その作業を実行できます。
$ for n in 1 2 3 ; do echo $n ; done123
セミコロンは、標準の Bash ステートメント区切り文字です。複数のコマンドを 1 行に記述できます。この for ループを Bash スクリプト ファイルに含める場合は、セミコロンを改行に置き換えて、次のように for ループを記述することができます:
for n in 1 2 3doecho $ndone
do と for を同じ行に置くと読みやすくなります。
for n in 1 2 3 ; doecho $ndone
一度に複数の for ループを記述できます。ループ 別のループを挿入します。これは、複数の変数を反復処理し、一度に複数のことを実行するのに役立ちます。文字 A、B、および C と数字 1、2、および 3 のすべての組み合わせを印刷するとします。 Bash では、次のように 2 つの
for ループを使用してこれを行うことができます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">#!/bin/bashfor number in 1 2 3 ; dofor letter in A B C ; doecho $letter$numberdonedone</pre><div class="contentsignin">ログイン後にコピー</div></div> これらの行を
ファイルという Bash スクリプトに入れて実行すると、をクリックすると、各数字と組み合わせられた文字のすべての組み合わせを示す 9 行が表示されます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$ bash for.bashA1B1C1A2B2C2A3B3C3</pre><div class="contentsignin">ログイン後にコピー</div></div>Traverse Web Safe Colors
Web セーフ カラーは 16 進数の色から派生します
#000 (黒、赤、緑、青がすべてゼロ) ～ #fff (白、赤、緑、青がすべて最高)、それぞれ 16 進値のステップは 0、3 です、6、9、c、f。 Bash で 3 つの
ループを使用して、Web セーフ カラーのすべての組み合わせのリストを生成できます。このループは、赤、緑、青の値をループします。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">#!/bin/bashfor r in 0 3 6 9 c f ; dofor g in 0 3 6 9 c f ; dofor b in 0 3 6 9 c f ; doecho "#$r$g$b"donedonedone</pre><div class="contentsignin">ログイン後にコピー</div></div>これを
という新しい Bash スクリプトに保存して実行すると、すべての Web セーフ カラーの 16 進数の値が反復表示されることがわかります。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$ bash websafe.bash | head#000#003#006#009#00c#00f#030#033#036#039</pre><div class="contentsignin">ログイン後にコピー</div></div>
<p>要制作可用作 Web 安全颜色参考的 HTML 页面，你需要使每个条目成为一个单独的 HTML 元素。将每种颜色放在一个 <code style="background-color: rgb(231, 243, 237); padding: 1px 3px; border-radius: 4px; overflow-wrap: break-word; text-indent: 0px; display: inline-block;"><div> 元素中，并将背景设置为 Web 安全颜色。为了使十六进制值更易于阅读，将其放在单独的 <code> 元素中。将 Bash 脚本更新为如下：
#!/bin/bashfor r in 0 3 6 9 c f ; dofor g in 0 3 6 9 c f ; dofor b in 0 3 6 9 c f ; doecho "<div style='background-color:#$r$g$b'><code>#$r$g$b</code></div>"donedonedone
当你运行新的 Bash 脚本并将结果保存到 HTML 文件时，你可以在浏览器中查看所有 Web 安全颜色的输出：
$ bash websafe.bash > websafe.html
Colour gradient.
这个网页不是很好看。深色背景上的黑色文字无法阅读。我喜欢使用HTML样式，以确保在颜色矩形上以白色文本显示十六进制值，并且背景为黑色。我使用了HTML网格样式将每行六个框进行排列，并为了美观效果，在框之间留有适当的间距。
你需要在循环之前和之后包含其他的HTML元素来添加额外的样式。在顶部的HTML代码中定义样式，并在底部的HTML代码中关闭所有已打开的HTML标签
#!/bin/bashcat<<EOF<!DOCTYPE html><html lang="en"><head><title>Web-safe colors</title><meta name="viewport" content="width=device-width, initial-scale=1"><style>div {padding-bottom: 1em;}code {background-color: black;color: white;}@media only screen and (min-width:600px) {body {display: grid;grid-template-columns: repeat(6,1fr);column-gap: 1em;row-gap: 1em;}div {padding-bottom: 3em;}}</style></head></body>EOFfor r in 0 3 6 9 c f ; dofor g in 0 3 6 9 c f ; dofor b in 0 3 6 9 c f ; doecho "<divstyle='background-color:#$r$g$b'><code>#$r$g$b</code></div>"donedonedonecat<<EOF</body></html>EOF这个完整的Bash脚本生成了一个用HTML格式制作的Web安全颜色指南。当需要引用网络安全颜色时，运行脚本并将结果保存至 HTML 页面。你可以在浏览器中查看 Web 安全颜色演示，以作为你下一个 Web 项目的简单参考
$ bash websafe.bash > websafe.html
（题图：MJ/abf9daf2-b72f-4929-8dd8-b77fb5b9d39b）
以上がBash を使用して Web セーフカラーを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7488
15
1377
52
77
11
19
40
Windows でシェル スクリプト ファイルを実行するさまざまな方法
Apr 13, 2023 am 11:58 AM
Linux 用 Windows サブシステム 最初のオプションは、Linux バイナリ実行可能ファイルを Windows システム上でネイティブに実行するための互換性レイヤーである Windows サブシステム for Linux または WSL を使用することです。ほとんどのシナリオで機能し、Windows 11/10 でシェル スクリプトを実行できるようになります。 WSL は自動的には利用できないため、Windows デバイスの開発者設定を通じて有効にする必要があります。これを行うには、[設定] > [更新とセキュリティ] > [開発者向け] に移動します。開発者モードに切り替え、プロンプトを確認して [はい] を選択します。次にWを探します
Ubuntu Bash のパフォーマンス比較: Ubuntu と Win10 Anniversary Edition
Jan 04, 2024 pm 09:36 PM
今年の初めに Microsoft と Canonical が Windows 10 Bash と Ubuntu ユーザー空間をリリースしたとき、私は Windows 10 上の Ubuntu でネイティブ Ubuntu と比較していくつかの予備的なパフォーマンス テストを実行しようとしました。今回は、ネイティブ純粋な Ubuntu 間のベンチマーク比較について詳しく公開しました。 Ubuntu と Windows 10。 Windows 用の Linux サブシステム テストはすべてのテストを完了し、Windows 10 Anniversary Update とともにリリースされました。デフォルトの Ubuntu ユーザー スペースはまだ Ubuntu14.04 ですが、16.04 にアップグレードできます。したがって、テストは最初に 14.04 でテストされ、完了後、システムは 16.04 にアップグレードされます。
あまり知られていない 5 つの最新の Bash スクリプト テクニック
Jun 26, 2023 pm 08:36 PM
プログラマは多くの場合、Bash コマンド言語を使用してシェル スクリプトを作成し、手動タスクを自動化します。たとえば、さまざまな構成、ファイル操作、ビルド結果の生成、およびさまざまな DevOps 関連アクティビティのための Bash スクリプトを作成します。ほとんどすべての Unix 系または Unix ベースのオペレーティング システムでは、プリインストールされた Bash インタープリタがユーザーに提供されるため、Bash を使用して、より移植性の高い自動化スクリプトを作成できます。すでにご存知のとおり、Bash スクリプトとは、Bash コマンド言語、組み込み Bash コマンド、および GNU Core Tools などのコア オペレーティング システム CLI プログラムの構文を使用して一連のコマンドを作成することを指します。標準的で昔ながらの Bash スクリプトは通常、いくつかのコマンドを実行し、ターミナルにプレーン テキストを表示します。
A の B 乗を求める Bash プログラム?
Aug 30, 2023 pm 09:01 PM
ここでは、bash スクリプトを使用して数値 A の B 乗を取得する方法を見ていきます。ロジックは簡単です。これを行うには、「**」演算子またはべき乗演算子を使用する必要があります。この概念を明確に理解するために、次のプログラムを見てみましょう。例#!/bin/bash#GNUbashScripta=5b=6echo "$(($a**$b))" 出力 15625
bash の脆弱性再発の分析例
May 19, 2023 am 11:13 AM
BourneAgainShell (略して BASH) は、GNU/Linux で最も人気のある SHELL 実装です。1980 年に誕生しました。数十年の進化を経て、単純なターミナル コマンド ライン インタプリタから、GNU システムと深く統合された多機能インターフェイスに進化しました。 . . Bash、Unix シェルの一種。最初の正式バージョンは 1989 年にリリースされました。当初は GNU オペレーティング システムで使用することが計画されていましたが、これをデフォルトのシェルとして使用する Linux や MacOSXv10.4 など、ほとんどの Unix 系オペレーティング システムで実行できます。 Microsoft Windows 上の Cygwin および MinGW にも移植されており、MS-Windows 上でも使用できます。
Windows 11 Bug Bash ステッカーを入手できるのは今日が最終日です
May 13, 2023 pm 08:25 PM
先週 Microsoft は、長期および短期的に Windows 11 の開発を改善する (できれば) タスクに Windows 内部関係者を参加させることを目的としたキャンペーンである BugBash を発表しました。 3 月 16 日時点では、完了できるミッションの数は約 26 でしたが、現在では 75 という驚異的な数に増加しています。ただし、ここにキッカーがあります。BugBash は 3 月 22 日に終了し、フィードバック ハブに表示される BugBash 固有のステッカーを獲得する機会も終了します。 Windows11 BugBash に参加するには、開発チャネルから最新の Windows 11 プレビュー ビルド (build2) を取得する必要があります。
Bash を使用して Web セーフカラーを作成する
Jul 07, 2023 pm 06:54 PM
コンピューターのモニターのカラー パレットが限られている場合、Web デザイナーは Web セーフ カラーのセットを使用して Web サイトを作成することがよくあります。新しいデバイスで表示される最新の Web サイトでは、元の Web セーフ パレットよりも多くの色が表示されることがありますが、Web ページを作成するときに Web セーフ カラーを参照したいことがあります。こうすることで、私のページがどこでも見栄えが良くなることがわかります。 Web セーフ パレットはオンラインで見つけることができますが、簡単に参照できるように独自のコピーを用意したいと思いました。 Bash の for ループを使用して作成することもできます。 Bashfor ループ Bash の for ループの構文は次のとおりです: コレクション内の変数; do ステートメント; 完了 たとえば、1 から 3 までのすべての数値を出力するとします。 Basをすぐに使用できるようになります
すぐに Linux コマンド ライン マスターになれる 8 つのシェル コマンド
Jun 17, 2023 am 09:38 AM
プログラミングのしっかりとした基礎を持つことは、優れたソフトウェア エンジニアにとって明らかに必須の資質です。 Python のようなインタープリタ言語であっても、C++ のようなコンパイル言語であっても、少なくとも 1 つのプログラミング言語をマスターすることが重要です。ただし、これは真にバランスのとれたエンジニアになるための 1 つの側面にすぎません。シェル環境で道に迷ってしまうと、その基礎知識は役に立ちません。 Bash でコマンドを柔軟に使用すると、従来のプログラミング言語では到達できない領域に到達できます。実際には、より強力なプログラミング言語を使用する必要がない場合もあります。シェルのみを使用することで、追加の依存関係を必要とせずに、必要なタスクをより迅速かつ簡単に実行できます。この記事では、非常に便利な Bash コマンドをいくつか紹介します。
