logo

パレット - カラフルに🎨

Palette — ビジュアルページビルダー、デザインの専門知識は不要です。

ライブデモ パレットをダウンロード

Scroll

CSSテキストプロパティ

05/12/2019, by Ivan

HTMLの存在期間中、多くのタグが考案されてきましたが、現在CSSが広く普及しているため、一部は放棄する必要があります。そのようなタグの中に<font>、<b>、<i>、<center>があります。後で、他の「禁止」タグを検討します。また、これらのプロパティは、HTMLページのコードの不要なコードを回避し、cssファイルに移動するのに役立ちます。

前のレッスンではcssプロパティを追加する方法と色を選択する方法を検討しました。このレッスンでは、htmlを学習するときに遭遇した可能性のある多くのプロパティを検討します。以前はタグを通じてそれらを追加したかもしれませんが、今ではcssを通じてそれらを実行しており、それはより正しいです。

CSSの色と背景

05/12/2019, by Ivan

こんにちは。前のレッスンでは、htmlファイルとcssファイルの2つのファイルを作成しました。これがそのコードです:

index.html:

<html>
 <head>
  <title>CSSチュートリアル</title>
  <link type="text/css" rel="stylesheet" media="all" href="style.css" />
 </head>
 <body>
  <p>drupalbook.orgと一緒にCSSを学びましょう</p>
  <p>2番目の行drupalbook.orgと一緒にCSSを学びましょう</p>
 </body>
</html>

style.css:

CSS チュートリアル — レッスン 1 — CSS スタイルを接続する

05/12/2019, by Ivan

CSS が何のために必要かは説明しません。このチュートリアルを開いたということは、CSS を学びたいということでしょう。私からは、CSS の可能性は非常に広く、あらゆる複雑さのレイアウトを組めるとだけ言っておきます。一方、CSS を使用するということは、size、color、bgcolor、align など、CSS の「邪魔になる」さまざまなタグ属性の使用をやめる必要があるということです。

CSS を HTML ファイルに接続する方法は少なくとも 3 つあります。最も簡単な方法、次に 2 番目、そして正しい方法を見ていきましょう。

タグ内の CSS

CSS は style 属性を使って接続できます。

CSS チュートリアル

05/12/2019, by Ivan

さて、HTML の本を読み終え、今度は美しいサイトを作るためにもう一歩進んで CSS の学習を始めます。なぜ CSS が必要なのでしょう?私の「HTML の第一歩」を読んだなら、それがどれほど小さなガイドだったか気づいたでしょう。私は装飾を担当する多くのタグや属性、つまりイタリック、太字、色、形、強調を意図的に省略しました。それはあなたには必要ないだろうという考えでそうしました。

はい、確かに、まだ <font>、<b>、<center> タグや bgcolor、align、color などの属性を使う人もいるでしょう。そして別の HTML チュートリアルを読んだとき、テキストを装飾するためのこれらや他のタグに出会ったかもしれません。そこで私が言いたいのは、それらを忘れてください!ということです。もう必要ありません。それらを使用しても、他のプログラマーやコーダーにとって理解しにくい非標準的なコードになるだけです。

これからは CSS を使ってテキストを装飾する方法を学びます。もし印刷、印刷出版物の組版に詳しいなら、CSS の可能性の全容を評価できるでしょう。CSS は font、center などのタグの個別の機能のためではなく、まさに本格的な組版のために作られたからです。

HTML の第一歩 — 結び

04/12/2019, by Ivan

ここで HTML チュートリアルを終わりにしようと思いますが、思いついたら HTML のレッスンを引き続き投稿していきます。チュートリアルがとても短く感じたかもしれませんが、タイトルは「第一歩」です。すべてのタグを説明する必要はないと思います。それは後で HTML リファレンスで行います。

学習を続けることを考えているなら、CSS の学習を続けることをお勧めします。これは HTML の一部で、HTML 要素を装飾してすべてを美しく見せることができます。

こちらが私の CSS チュートリアルへのリンクです。

HTML の第一歩 — レッスン 9 — メニューの作成

04/12/2019, by Ivan

サイトの主要な要素はメニュー(ナビゲーション)です。これを通じてサイトのページ間を移動します。また、メニューは検索エンジンによるサイトのインデックス作成にとっても重要です。ページ間のつながりがなければ、検索エンジンはすべてのページを巡回できません。メニューが何で構成されているか見てみましょう。

メニューには通常、番号なしリスト(ul、li タグ)を使用します。このように、各メニュー項目はリストの要素です。

...
<ul>
  <li></li>
  <li></li>
<ul>
...

li タグの中には通常、ページへのリンクを挿入します。

HTML の第一歩 — レッスン 8 — タグのユニバーサル属性

04/12/2019, by Ivan

さまざまなタグにはそれぞれ独自の属性があることはすでに話しました。今度は、さまざまなタグにすべてに共通の属性もあることについて話しましょう。その中でも最も人気のあるものを見ていきましょう。

id 属性

id 属性はタグの一意の名前を示します。このような名前は繰り返してはいけません。jQuery や JavaScript を扱うときに問題を引き起こす可能性があるからです。id タグの使用例をいくつか挙げます。

HTML の第一歩 — レッスン 7 — object タグ。YouTube 動画の挿入。

04/12/2019, by Ivan

自分のブログに YouTube の動画を挿入する必要がよくあります。このレッスンでは、どのタグとその属性が使用されるかを見ていきます。まずは YouTube にアクセスして動画のコードをコピーしましょう。

 

 

Youtube video

次のようなコードが得られました。

HTML の第一歩 — レッスン 6 — 画像

04/12/2019, by Ivan

サイト上の画像は非常に重要な要素です。画像がないとサイトは味気なく美しくありません。画像はサイトの装飾、フォトギャラリー、そして単なる絵として使われます。

画像は IMG タグを使って挿入します(image と完全には書かず、img とだけ書くことに注意してください)。IMG タグは単一タグ <img /> で、ペアタグはありません。

IMG タグの主要な属性は src 属性です。これはリンクの href のように機能し、src 属性に画像へのパスを挿入します。パスはリンクと同様に、相対パスまたは絶対パスで書けます。


これは私たちの index.html のコードです。