国際プログラマーの日とは何ですか?今年を祝う3つの方法
国際的なお祝いの日は、社会的問題、歴史的な日、およびそれぞれのキャリアを認識するための良い方法です。国際プログラマーの日は、プログラマーが日常生活を改善するために果たす役割を祝います。私たちが住んでいる文明の世界は、プログラマーの努力の賜物です。
カスケードスタイルシート(CSS)を使用すると、Webページの外観を変えることができます。フォントや色から間隔や全体的なレイアウトまで、あらゆる種類のデザインツールをすぐに利用できます。CSSは全体として複雑な言語ですが、始めるために理解する必要のある基本的な概念は2つだけです。
それはすべて、ページのどの部分をスタイリングするかを正確に特定することから始まります。
CSSファイルには、HTMLファイルのフォーマット方法を説明する一連のルールが含まれています。各ルールは、スタイルを設定する方法とスタイルを設定する方法の2つの部分で構成されます。最初の部分は、「セレクター」と呼ばれる一連の用語を使用して制御されます。
この記事の例にはスタイル宣言が含まれていますが、それらは焦点ではありません。セレクター自体が焦点です。
歴史的に、ブラウザサポートの程度が異なる3つのCSSセレクタレベル(またはバージョン)がありました。Can I Useによると、2020年には、これらはすべて、世界中の99%以上のユーザーが利用できます。
レベル1では、今日でも膨大な数のケースをカバーする4つの基本的なタイプのセレクターが導入されました。
パターン | 一致する |
---|---|
E |
すべてのE要素 |
.c |
class = "c"のすべての要素 |
#myid |
id = "myid"の要素 |
E F |
E要素内のF要素 |
疑似クラス | |
E:link |
以前にアクセスしたことのないページへのハイパーリンク |
E:visited |
すでにアクセスしたページへのハイパーリンク |
E:active |
現在選択されているハイパーリンク |
疑似要素 | |
E::first-line |
E要素の最初のフォーマットされた行 |
E::first-letter |
E要素の最初のフォーマットされた文字 |
最も単純なセレクターは「タイプセレクター」です。段落や太字のテキストなど、要素のすべてのインスタンスを対象としています。
p { margin-bottom: 0; } b { font-family: sans-serif; }
class属性を使用すると、特定の種類の段落など、さらにセマンティクスをHTML要素に追加できます。このような要素は、CSSで次のように選択できます。
.intro { font-weight: bold; }
このセレクターは一致します:
…
ただし、以下にも一致することに注意してください。
…
イントロ段落にのみ適用する場合は、タイプセレクターとクラスセレクターを組み合わせることができます。
p.intro { font-weight: bold; }
HTML id属性は、ドキュメント内で一意である必要があります。たとえば、次の場合です。
…
これが「コンテンツ」IDを持つ唯一の要素である必要があります。IDセレクターを使用すると、ドキュメント内の特定の要素をターゲットにすることができます。
#contents { color: #333; }
厳密には、このセレクターは他の2つの間のスペースに関するものであるため、「コンビネーター」です。DOMの概要で説明されているように、HTMLは階層的です。子孫セレクターを使用すると、要素を別の要素内のコンテキストで識別できます。
table b { font-weight: normal; }
疑似セレクターは、明示的には存在しないが、とにかく利用可能になっているクラスまたは要素を対象としています。それらを特別なコンテンツボーナスと考えてください。
p::first-line { text-transform: uppercase; }
同じルールのセットをそれぞれに適用する場合は、コンマを使用してセレクターをリストに結合します。それ以外の:
th { padding: 1em; } td { padding: 1em; }
あなたは書ける:
th, td { padding: 1em; }
スタイルシートは、セレクターを使用して要素に一致する一連のルールですが、複数のルールが特定の要素に一致するとどうなりますか?結果として生じる動作は、次のような場合に使用されるルールを定義する「特異性」によって管理されます。
p.intro { color: black; } p { color: gray; }
このような場合、優先されるルールは、次のようにその特異性によって定義されます。
特異性を計算するとき、各レベルは2つのセレクターがより高いレベルで同じスコアを持っている場合にのみ考慮されます。したがって、前者はIDセレクターで「勝つ」ため、「#contents」は「article.newsp.author.special」よりも具体的です。
CSSセレクターの次のリビジョンでは、属性セレクターが導入され、疑似クラスと疑似要素が拡張され、2つの新しいコンビネーターが追加されました。
パターン | 一致する |
---|---|
* |
任意の要素 |
E > F |
E要素の子であるF要素 |
E + F |
E要素の直前のF要素 |
属性セレクター | |
E[foo] |
「foo」属性を持つE要素 |
E[foo="bar"] |
「foo」属性が正確に「bar」であるE要素 |
E[foo~="bar"] |
「foo」属性が空白で区切られた値のリストであり、そのうちの1つが「bar」であるE要素 |
E[foo|="en"] |
「foo」属性に「en」で始まる値のハイフン区切りリストがあるE要素 |
疑似クラス | |
E:first-child |
E要素、その親の最初の子 |
E:lang(fr) |
言語「fr」のタイプEの要素 |
疑似要素 | |
E::before |
E要素のコンテンツの前に生成されたコンテンツ |
E::after |
E要素のコンテンツの後に生成されたコンテンツ |
「*」はどの要素にも一致します。それほど便利なことはあまりありませんが、たとえば、デフォルトのマージンをリセットする場合は、次のようにすることができます。
* { margin: 0; }
属性セレクターを使用すると、要素の属性でフィルター処理された、非常に具体的なスタイルのターゲットを設定できます。
a[title] { text-decoration: underline dotted; }
子孫コンビネータに似ていますが、これは直接の子にのみ一致し、ツリーの下の子孫には一致しません。たとえば、「ul> li」は、ここでは「セクション1」のテキストのみに一致し、「セクション1.1」には一致しません。
Section 1
Section 1.1
Section 1.2
h1 + p { font-weight: bold; }
多くの場合、マージンや特定のクラスのない導入段落を制御するのに役立ちます。このセレクターは、ある要素が別の要素の直後にある場合にのみ一致します。この例では、ここの最初の段落のみが一致し、2番目の段落は一致しません。
Contents
some extra text
Introductory paragraph
Following paragraph
このセレクターは、次の兄弟が何であるかを決定するときに、テキストではなく要素のみを考慮することに注意してください。
一部のCSSプロパティは、祖先要素から値を継承します。実際には、これは、たとえば、「body」要素のフォント面を設定することは、すべての段落、表なども同じフォント面を使用することを意味します。
もちろん、これはまさにあなたが期待することですが、継承しないプロパティ、たとえば「マージン」を考えてみてください。個々の段落や太字のテキストのすべてに、ドキュメント全体と同じ余白を持たせたくはありません。
経験則としては、理にかなった範囲で要素をターゲットにすることです。単純な「ボディ」セレクターでターゲットを設定する場合は、個々の要素をすべてターゲットにしないでください。
このレベルでは、いくつかの属性セレクターと新しいコンビネーターとともに、さらに多くの疑似クラスが追加されました。
パターン | 一致する |
---|---|
E ~ F |
E要素が前にあるF要素 |
属性セレクター | |
E[foo^="bar"] |
「foo」属性が文字列「bar」で始まるE要素 |
E[foo$="bar"] |
「foo」属性が文字列「bar」で終わるE要素 |
E[foo*="bar"] |
「foo」属性にサブストリング「bar」が含まれるE要素 |
疑似クラス | |
E:root |
E要素、ドキュメントのルート |
E:nth-child(n) |
E要素、その親のn番目の子 |
E:nth-last-child(n) |
最後の要素から数えて、親のn番目の子であるE要素 |
E:nth-of-type(n) |
E要素、そのタイプのn番目の兄弟 |
E:nth-last-of-type(n) |
E要素、そのタイプのn番目の兄弟、最後の要素から数えて |
E:last-child |
E要素、その親の最後の子 |
E:first-of-type |
E要素、そのタイプの最初の兄弟 |
E:last-of-type |
E要素、そのタイプの最後の兄弟 |
E:only-child |
E要素、その親の一人っ子 |
E:only-of-type |
E要素、そのタイプの兄弟のみ |
E:empty |
子を持たないE要素(テキストノードを含む) |
E:target |
参照元URIのターゲットであるE要素 |
E:enabled |
有効になっているユーザーインターフェイス要素E |
E:disabled |
無効になっているユーザーインターフェイス要素E |
E:checked |
チェックされるユーザーインターフェイス要素E |
E:not(s) |
単純なセレクターと一致しないE要素 |
指定された値:a[href^="https:"]
で始まり、指定された値:で終わるimg[src$=".gif"]
、または値:を含む属性を持つ要素を選択できますa[*="value"]
。
追加の疑似クラスには、「:last-child」、「:empty」(コンテンツのない要素に一致する)、およびチェックボックス入力のような要素に一致する「:checked」が含まれますが、チェックされている場合のみです。
レベル2の隣接する兄弟コンビネータと同様に、これは次の兄弟だけでなく、次々に来る兄弟と一致します。
h1 ~ p { font-size: 110%; }
これで、CSSを使用してWebページの一部を選択する方法について知っておくべきことがほぼすべてわかりました。これで、色からレイアウトまですべてをカバーする多種多様なCSSプロパティを使用してページのスタイルを設定する準備が整いました。
画像クレジット:Pankaj Patel / Unsplash
国際的なお祝いの日は、社会的問題、歴史的な日、およびそれぞれのキャリアを認識するための良い方法です。国際プログラマーの日は、プログラマーが日常生活を改善するために果たす役割を祝います。私たちが住んでいる文明の世界は、プログラマーの努力の賜物です。
あなたがプログラマーなら、長いプログラムを書くことに疲れ果ててしまう可能性が十分にあります(またはあなたはそうするでしょう!)そしておそらくあなたは自分自身に疑問に思ったことでしょう。
ブランチは、プログラミング、特にGitのバージョン管理の概念の中心です。このスターター記事では、ブランチとは何か、およびさまざまなツールを使用してブランチを作成する方法について説明します。
Node.jsは、事実上、オープンソースのクロスプラットフォームJavaScriptランタイム環境です。Node.jsを有効にすると、ブラウザーを開くことを心配することなく、UbuntuマシンでJavaScriptを実行できます。ChromeのV8JavaScriptエンジン上に構築されており、Linuxにさまざまな方法でインストールできます。
Pythonには、特定の日または月のコードを操作できる組み込みのカレンダーモジュールが用意されています。たとえば、これを使用して、1年のすべての暦月の文字列を出力できます。
API機能のテスト、実行時の動作の評価、セキュリティの検証など、自動化されたAPIテストツールを使用すると、退屈なコードを記述せずに技術を操作できます。プログラマーではないが、プログラミングチームに推奨する前にAPIをテストしたい場合でも、これらは便利です。
今年の初めに、マイクロソフトはVisual Studio2022のプレビューバージョンをワイルドプログラミングの世界にリリースしました。これは良い知らせです!これは非常に人気のあるIDEですが、それが繁栄するDevOpsエコシステムの変化のペースを考えると、調整またはおそらくオーバーホールが必要です。
ASP.NETは、Webアプリとサービスを構築するためのMicrosoftの無料のクロスプラットフォームフレームワークです。ASP.NETプラットフォームは、さまざまなアプリケーションの構築に使用されるツール、プログラミング言語、およびライブラリの開発者プラットフォームである.NETの拡張機能です。
2015年以来、EcmaScript6(ES6)はJavaScriptコーディングの実践に多くの進歩をもたらしました。多くの最新の概念がJavaScriptに導入され、コーディングエクスペリエンスが大幅に向上しました。この記事では、JavaScriptのイテレーターとジェネレーターについて学習します。
WordPressの投稿にサードパーティのサービスを埋め込むことは、訪問者の興味を引くための刺激的な方法です。埋め込まれたコンテンツは、スキャンを容易にする視覚的な手がかりも提供します。WordPressにより、このタイプのコンテンツを簡単に追加できるようになりました。
SQLとNoSQL:次のプロジェクトに最適なデータベースは何ですか?
ターミナルからPythonを実行することは避けられないことがよくあります。ただし、PythonをWindows 10に初めてインストールした場合、Windowsターミナルを介して実行できるのは、PythonがWindowsPATH環境変数に追加されている場合のみです。
コンピューターでグラフ電卓を使用できますが、Pythonプログラミング言語インタープリターは卓上電卓を兼ねることができます。公式チュートリアルで言及されているほど、Pythonコミュニティで人気のあるランニングジョークです。Pythonを電卓として使用する方法は次のとおりです。
SQLデータベースエンジンはデータをテーブルに編成しますが、MongoDBはそのデータをコレクションに格納します。ただし、従来のエンジンと同様に、データベースという用語を使用して、組織の最高レベルを指します。
今日では、ブラウザやデバイスに応じてユーザーインターフェイスを調整するウェブサイトやアプリを作成するのが一般的です。この目標を達成するには、2つのアプローチがあります。1つ目は、デバイスごとに異なるバージョンのWebサイトまたはアプリを作成することです。しかし、それは非効率的であり、予測できないエラーにつながる可能性があります。
Node.jsは、Webブラウザーの外部でJavaScriptを実行できるJavaScriptランタイム環境であり、あらゆる種類のアプリケーションを開発するための一般的な選択肢となっています。その人気の一部は、開発者のエクスペリエンスを容易にするためにそこにある多数のNPMパッケージによるものです。
すばらしいWebページのレイアウトを作成する場合は、余白、境界線、パディング、およびコンテンツについて知っておく必要があります。画像であろうとテキストであろうと、Webデザインのすべての要素は、これらのプロパティを持つボックスを使用します。ボックスモデルをいじって、複雑なレイアウトを簡単に作成できます。この記事では、CSSボックスモデルを分析し、これらのプロパティの使用方法を実際の例とともに示します。
つまり、Pythonを使用して単純なポートフォリオWebサイトを完成させたところですが、無料のホスティングを使用してそれを立ち上げたいと考えています。Herokusの無料ホスティングについて聞いたことがありますが、関連する技術を完全には理解していません。
データベースクエリであろうと数学演算の結果であろうと、Python文字列形式の方法は、結果をユーザーに提示するためのより動的で魅力的な方法を提供します。
アプリケーションプログラミングインターフェイス(API)を選択することと、それを使用できるかどうかを決定することの間の細い線です。ほとんどのRESTAPIには汎用アーキテクチャがあり、共通のリクエストパスをスレッド化します。しかし、そこにあるいくつかのAPIは標準から逸脱しています。その結果、それらは使いにくくなります。
国際的なお祝いの日は、社会的問題、歴史的な日、およびそれぞれのキャリアを認識するための良い方法です。国際プログラマーの日は、プログラマーが日常生活を改善するために果たす役割を祝います。私たちが住んでいる文明の世界は、プログラマーの努力の賜物です。
あなたがプログラマーなら、長いプログラムを書くことに疲れ果ててしまう可能性が十分にあります(またはあなたはそうするでしょう!)そしておそらくあなたは自分自身に疑問に思ったことでしょう。
ブランチは、プログラミング、特にGitのバージョン管理の概念の中心です。このスターター記事では、ブランチとは何か、およびさまざまなツールを使用してブランチを作成する方法について説明します。
Node.jsは、事実上、オープンソースのクロスプラットフォームJavaScriptランタイム環境です。Node.jsを有効にすると、ブラウザーを開くことを心配することなく、UbuntuマシンでJavaScriptを実行できます。ChromeのV8JavaScriptエンジン上に構築されており、Linuxにさまざまな方法でインストールできます。
Pythonには、特定の日または月のコードを操作できる組み込みのカレンダーモジュールが用意されています。たとえば、これを使用して、1年のすべての暦月の文字列を出力できます。
API機能のテスト、実行時の動作の評価、セキュリティの検証など、自動化されたAPIテストツールを使用すると、退屈なコードを記述せずに技術を操作できます。プログラマーではないが、プログラミングチームに推奨する前にAPIをテストしたい場合でも、これらは便利です。
今年の初めに、マイクロソフトはVisual Studio2022のプレビューバージョンをワイルドプログラミングの世界にリリースしました。これは良い知らせです!これは非常に人気のあるIDEですが、それが繁栄するDevOpsエコシステムの変化のペースを考えると、調整またはおそらくオーバーホールが必要です。
ASP.NETは、Webアプリとサービスを構築するためのMicrosoftの無料のクロスプラットフォームフレームワークです。ASP.NETプラットフォームは、さまざまなアプリケーションの構築に使用されるツール、プログラミング言語、およびライブラリの開発者プラットフォームである.NETの拡張機能です。
2015年以来、EcmaScript6(ES6)はJavaScriptコーディングの実践に多くの進歩をもたらしました。多くの最新の概念がJavaScriptに導入され、コーディングエクスペリエンスが大幅に向上しました。この記事では、JavaScriptのイテレーターとジェネレーターについて学習します。
WordPressの投稿にサードパーティのサービスを埋め込むことは、訪問者の興味を引くための刺激的な方法です。埋め込まれたコンテンツは、スキャンを容易にする視覚的な手がかりも提供します。WordPressにより、このタイプのコンテンツを簡単に追加できるようになりました。