20210220のHTMLに関する記事は4件です。

投稿日：2021-02-20T22:25:14+09:00

【初心者でもわかる】cssだけで、徐々に透明にしていく方法

どうも7noteです。徐々に透過して透明になっていく要素の作り方について

グラデーションを使って、画像やテキストなどの要素を徐々に透明になっていくように見せる方法。

↓↓↓↓↓↓

こんな感じに徐々に透明にできます。

徐々に透明になる要素の書き方
index.html
<div class="transparent">
  <img src="sample.jpg">
</div>
style.css
.transparent {
  position: relative;  /* 基準位置とする */
}
.transparent::before {
  content: "";         /* 疑似要素に必須 */
  width: 100%;         /* 幅いっぱい */
  height: 100%;        /* 高さいっぱい */
  display: block;      /* 高さを指定するためにブロック要素にする */
  background: linear-gradient(rgba(255,255,255,0) 0, #fff 80%); /* 徐々に透明にする */
  position: absolute;  /*  */
  top: 0;
  left: 0;
}
解説

徐々に透明にするためには、画像要素を本当に透明にするのではなく、背景色と同じグラデーションを上にかぶせることで透明になっているように見せかけています。

疑似要素でposition指定をしたbeforeに対して、白→透明のグラデーションをかけます。
そしてブロック要素にして画像の高さと幅とおなじになるようそれぞれ100%を指定して位置を指定すれば、徐々に透明になっている要素の完成です。

backgroundのカラー（#fff）を100%にしていないのは、100%にしてしまうと画像の縁がはっきり見えてしまうからです。

まとめ

CSSでできることは限られているので、どうやって錯覚にかけてそれっぽく見せるかが重要だと思っています。
もちろんぐちゃぐちゃなソースはアレかもしれないですが、最終的に動いて思った通りに見えているのであれば、手段はなんでもいいのかなと思います。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ

　 Tweet
Qiitaで続きを読む

投稿日：2021-02-20T19:45:07+09:00

HTML CSS 基礎

私たちが普段見ているwebページはHTMLとCSSという二つの言語から成り立っています。

HTML

ウェブサイトに表示される文字情報を記載する言語

CSS

HTMLに装飾を加えるための言語

タグ

要素のかたまりを示す記述です。
タグには、始まりを示す開始タグと、終わりを示す終了タグがあります。
終了タグが無い要素も存在します。
タグに挟まれた部分が要素となります。
例divタグ
<div>ここに書かれた物が要素</div>
タグの中にはさらにタグを挿入することができ入れ子構造をとることができます。

HTMLの構成

HTMLは大きく分けると、head要素とbody要素という2つの要素で構成されます。

まずHTMLのコード全体を見てみましょう。
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML構造学習</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>
      ページの<span class="red">見出し</span>になります。
    </h1>
    <p>
      段落1
    </p>
    <p class="second-paragraph">
      段落2<b>太字で表示</b>
    </p>
    <p id="third-paragraph">
      段落3
    </p>
     <a href="https://www.google.com/">Googleリンク</a>
  </body>
</html>
cssも見てみましょう
p {
  font-size: 20px;
  color: green;
}
.second-paragraph {
  color: purple;
  font-size: 10px;
}
#third-paragraph {
  color: blue;
}
.red {
  color: red;
}
DOCTYPE HTML

HTMLを記述する際は<!DOCTYPE HTML>をファイルの先頭に書きます。
これは「これはHTMLを記載したファイル」という宣言です。

html要素

HTML文章の始まりと終わりを示す要素です。

head要素

サイトの情報や、CSSファイルの情報を記載する部分です。画面上には表示されません。
head要素には以下のような情報を記述します。

・ページのタイトル
・CSSファイルの指定
・外部ファイルの読み込み

meta要素

HTML文章に関する情報を指定する時に使用します。閉じタグは必要なくcharset=はmeta要素の属性です。

属性

属性は、要素に情報を付け加える役割を持ちます。属性のあとには属性値が続きます。

charset属性

メタ要素にて、どのような文字コードを用いるか示すことができる属性です。今回はUTF-8

title要素

ウェブサイトのタイトルを指定する要素です。title要素内にタイトルを記述しても画面上には表示されません。検索結果や、ブラウザのタブに表示するタイトルとして使用されます。

body要素

画面上に表示したい情報を記載する部分でブラウザ上に表示されている情報は、この中に書かれたものです。

h要素

hから始まる要素は文章の見出しを作るための要素です。
h1からh6まで存在します。
タグに囲まれたテキストは見出しとして強調され、h1から順に文字の太さと大きさが変化します(h1が最大)。

p要素

文章の段落を表すものでタグで囲むと一つの段落として認識されます。

br要素

テキストを改行するための要素でテキストの中で用いることで、改行ができます。終了タグは不要です。

b要素

文字を太くする要素です。タグで囲まれている部分だけ太字になります。

a要素

...で囲ったテキストをリンクにすることができクリックすると特定のページに移動します。
aタグのhref属性に、移動させたいページのURLを指定します。

href属性

href属性はリンクの移動先を指定します。
属性値としてURLや移動させたいページのHTMLファイルが置いてあるフォルダの場所を指定することで、特定のページへのリンクが作成できます。
<a href="移動先URL">リンクとなるテキスト</a>
コメントアウト

コードを無いものとして扱うことができます。コメントアウトされたコードは認識されないため、ブラウザに表示されません。

他のプログラミング言語にも同じ機能があります。記述の仕方は言語ごとに異なり、
HTMLではコメントアウトしたいコードをで囲みます。
コード上にメモを残せるので、他人がコードを見たときに何を意図して書いてあるのかわかりやすいというメリットがあります
<h1>
  見出し
  
</h1>
コードを比べる

コードを比較するには、VSCodeの標準機能が便利です。以下の手順で確認と修正が可能です。

①見本のコードをコピーする
②自分のコードがあるファイルを開く
③command + shift + Pでコマンドパレットを開く
④>に続けてCompare Active File With Clipboardと入力し選択
⑤見本と異なる部分を確認する
⑥タイポ(誤字)や抜けているコードを修正する

HTMLとCSSの関係性

link要素

link要素は現在のファイル（HTML）から外部情報（今回であればCSSファイル）を関連付けする際に記載します。
rel属性、href属性と一緒に使用するのが一般的です。

rel属性

参照先のファイルが現在のファイルとどのような関係であるのかを明らかにします。
属性値には決められたキーワードを記載します。

href属性

href属性は、参照先の外部ファイルの場所を明らかにします。
属性値にはファイルの場所、ファイル名を記載します。
<link rel="stylesheet" href="style.css">
CSSの記述

セレクタ

CSSによる装飾を、どの部分のHTMLに適用するかを選択するための記述です。

プロパティ

セレクタで指定したHTMLの「何を変えるのか」を選択するための記述で背景の色や文字の大きさなど様々用意されています。複数ある場合順番は関係ありません。

値

プロパティで設定する内容を決めるための記述で文字の色を指定するプロパティであれば、値でどのような色にするのかを決めることができます。プロパティと値の間はコロン（ : ）で区切り、値の後にはセミコロン（ ; ）を入力します。
.body {                            
    color: blue;                   
    height: 15px;                  
}
様々なプロパティと属性

colorプロパティ

値によって自由に文字の色を指定することができます。

font-sizeプロパティ

文字の大きさを指定するプロパティです。

px

px(ピクセル)とは簡単にいうとデジタル画面の最小の単位のことです。

class属性

HTML要素に対して個別に名前を指定することができます。
class属性の属性値をclass名といいます。

classセレクタ

HTMLで指定したclass名をCSSのセレクタとして使用することができます。classセレクタを指定する場合は、「.クラス名」の形でCSSファイルに記述します。

p要素にmessageというクラス属性をつけてmessageクラスセレクタで赤色を指定したい場合
には以下の記述になります。
<p class="message">
  テキスト
</p>
.message {
  color: red;
}
id属性

特定のHTML要素のみに対して、名前を指定することができる属性で属性値をid名といいます。
id属性には「1つのページ内で、同じid名のHTML要素は一つしかないという慣例が存在します。
想定した挙動にならないことを防ぐためです。

idセレクタ

HTMLで指定したid名をCSSのセレクタとして使用することができ指定する場合は、
「#id名」の形で記述します。

p要素にmessageというid属性をつけてidセレクタで赤色を指定したい場合
には以下の記述になります。
<p id="message">
  テキスト
</p>
#id {
  color: red;
}
span要素

テキストの一部だけを装飾するために使用される要素で部分的にテキストのフォント調整、文字色・背景色を変更することができます。

以上です。

　 Tweet
Qiitaで続きを読む

投稿日：2021-02-20T14:55:19+09:00

HTMLの主な要素〜初心者だった自分に向けて〜　その⑤メディアと埋め込みコンテンツ

HTML・メディア、埋め込みコンテンツ

はじめに

今回の記事にはHTMLの中の主な要素の中でメディアと、埋め込みコンテンツについてまとめてあります。
その他のHTMLに関する記事はこちら

img要素 <img>

画像を読み込むための要素です。
src属性を指定して画像を読み込みます。

指定できる主な属性

src = "画像のURL"
必須の要素です。表示させる画像のURLを指定して読み込みます。

alt = "代替テキスト"
なんらかのエラーによって画像が表示できない場合に、その代わりとして表示するテキストを指定します。必須ではありませんが、指定すべき属性です。

height = "高さ（単位は付けない）"
表示させる画像の高さをピクセル数で指定します。ピクセル数で固定されているため単位"px"はつけずに数字のみで入力します。

width = "幅（単位は付けない）"<br>表示させる画像の幅をピクセル数で指定します。height`と同じでピクセル数で固定されているため単位"px"はつけずに数字のみで入力します。

使用例
HTML
<img src = "https://1.bp.blogspot.com/-ocRr0y766IA/XwkxkrnOvXI/AAAAAAABaCo/ux6-J7WXx58L5Ou7da9cT7pps1X2poxPwCNcBGAsYHQ/s1600/pan_pizza_toast.png" width = "100" alt = "いらすとや さんの、ピザトーストのイラストです">
video要素 <video>

この要素は、ページ内に映像再生できるメディアプレーヤーを埋め込みます。
この要素で指定できる属性の中には、「属性名 ="属性値"」の形式を取らず、「属性名」だけで指定できるものがあり、このような属性を「論理属性」と呼びます。
ちなみに、音声のみのコンテンツであればこの要素よりも<audio>要素を使用するほうがユーザーにとって使い勝手がよくなります。この<audio>要素は、<video>要素と共通する属性を多く持つ音声コンテンツ再生のためのものです。

video要素に指定できる主な属性

src = "動画のURL"

height = "高さ（単位は付けない）"
表示させるメディアプレーヤーの高さをピクセル数で指定します。ピクセル数で固定されているため単位"px"はつけずに数字のみで入力します。

width = "幅（単位は付けない）"
表示させるメディアプレーヤーの幅をピクセル数で指定します。ピクセル数で固定されているため単位"px"はつけずに数字のみで入力します。

controls
論理属性。動画の再生・ポーズ・ボリューム調整を行うコントローラー部分を表示します。

autoplay
論理属性。途中でとまらずに再生を続けられる程度のデータを読み込んだ段階で、自動的に再生を開始します。

記述例
HTML
<video src = "../video/flower_video" height = "400" controls>動画が表示されない場合の代替テキスト</video>
iframe要素 <iframe>

<iframe>はInline Frame（インラインフレーム）の略で、現在のWebページに別のWebページをインラインの状態で表示させることのできる要素です。
YouTubeの動画やGoogleMapをページに埋め込むときによく使用されます。

<iframe>要素に指定できる主な属性

src = "インラインフレームの中に表示させるページのURL"

height = "高さ（単位は付けない）"
インラインフレームの高さをピクセル数で指定します。ピクセル数で固定されているため単位"px"はつけずに数字のみで入力します。

width = "幅（単位は付けない）"
インラインフレームの幅をピクセル数で指定します。ピクセル数で固定されているため単位"px"はつけずに数字のみで入力します。

使用例
HTML
<iframe width="560" height="315" src="https://www.youtube.com/embed/zb09rw21pbQ?start=8" frameborder="0" allow="accelerometer; autoplay; picture-in-picture" allowfullscreen></iframe>
picture要素 <picture>

この要素を表示する様々な画面や端末の条件に適した画像を提供する要素です。
要素内に０個以上の<source>要素と、１つ以上の<img>要素を含みます。
<source>要素はいくつでも配置することができます。基本的に<source>要素で指定された画像の中で条件に合う画像が表示されます。
反対に<img>要素は、<picture>要素の最後に必ずひとつだけ配置する決まりになっています。そうすることで、<source>要素の画像たちがどの条件にも合致しなかったときに表示させる画像として機能させることができます。

記述例
HTML
<picture>
    <source srcset="https://1.bp.blogspot.com/-cT-3wp1oE8E/X9lJoOcpbnI/AAAAAAABc7U/l27LG4wgsoc-D9AhUwDuYfF70r6-A2ccQCNcBGAsYHQ/s872/sori_snow_boy.png" 
     media="(min-width: 800px)">  
    <img src="https://1.bp.blogspot.com/-yNEMpyTyX3o/X7zMjPLJdjI/AAAAAAABcdE/ZjQGxrQ2yQU5CATJhEOXrqr4cU8r7GRbwCNcBGAsYHQ/s726/shibasuberi_danbo-ru_boy.png" alt="" /> 
</picture>
<source>要素と<img>要素には属性srcsetで画像のURLを指定します。
そして、<media>属性によって表示する条件を指定します。
脚注：<source>要素について次項で紹介します。

source要素 <source>

<picture>、<audio>、<video>のsrc = ""属性を使用するとメディアのリソースを一つまでしか指定できないのに対し、<source>要素を組み込むことによって、メディアのリソースをいくつでも指定できるようになります。

記述例
HTML
<p>北海道の風景です。</p>
<picture>
   <source srcset="hurano.png" media="(min-width: 800px)">
   <source srcset="abasiri.png" media="(min-width: 600px)">
   <img src="mdn-sapporo.png" alt="北海道の写真">
</picture>
<source>要素に指定できる主な属性

src = "データのURL"（<audio>,<video>では必須）

media = "メディアクエリ"
この属性は、<picture>要素で指定します。srcで指定したデータが表示される条件を指定します。

srcset = "画像のURL,〜w（幅を数値で）,〜x（画素密度を数値で）"
<picture>要素で使用します。

これまでの記事

HTMLの主な要素〜初心者だった自分に向けて〜　その①メタデータ系
HTMLの主な要素〜初心者だった自分に向けて〜　その②セクショニングと、主な区分化要素
HTMLの主な要素〜初心者だった自分に向けて〜　その③テキストコンテンツ
HTMLの主な要素〜初心者だった自分に向けて〜　その④インライン要素

　 Tweet
Qiitaで続きを読む

投稿日：2021-02-20T12:15:53+09:00

【備忘録】html上の改行を挿入する

概要

下記のようなケースの対処法

ESLintでHTMLに直接改行したら怒られる
こんな時
<div>
おはようございます。
今日もいい天気ですね
</div>
Javascript側に変数用意しても直接改行しても怒られる
こんな時
<script>
const s = 
"おはようございます。
今日もいい天気ですね"
</script>
<p></p>で括ってもformatterで改行が解除されてしまう
こんな時
<p>
おはようございます。
今日もいい天気ですね
</p>
対応

JavaScriptに変数を用意する
この時、改行したい時に改行文字\nを入れる

上で生成した変数をhtmlで読み込む
この時<p>で囲む

CSSにwhite-space: pre-lineを挿入

動作

See the Pen 改行 by ishikawa takumi (@ishikawa-takumi) on CodePen.

　 Tweet
Qiitaで続きを読む

20210220のHTMLに関する記事は4件です。

【初心者でもわかる】cssだけで、徐々に透明にしていく方法

どうも7noteです。徐々に透過して透明になっていく要素の作り方について

徐々に透明になる要素の書き方

解説

まとめ

おそまつ！

HTML CSS 基礎

HTML

CSS

タグ

HTMLの構成

DOCTYPE HTML

html要素

head要素

meta要素

属性

charset属性

title要素

body要素

h要素

p要素

br要素

b要素

a要素

href属性

コメントアウト

コードを比べる

HTMLとCSSの関係性

link要素

rel属性

href属性

CSSの記述

セレクタ

プロパティ

値

様々なプロパティと属性

colorプロパティ

font-sizeプロパティ

px

class属性

classセレクタ

id属性

idセレクタ

span要素

HTMLの主な要素〜初心者だった自分に向けて〜 その⑤メディアと埋め込みコンテンツ

HTML・メディア、埋め込みコンテンツ

はじめに

img要素 <img>

指定できる主な属性

video要素 <video>

video要素に指定できる主な属性

iframe要素 <iframe>

<iframe>要素に指定できる主な属性

picture要素 <picture>

source要素 <source>

<source>要素に指定できる主な属性

これまでの記事

【備忘録】html上の改行を挿入する

概要

対応

動作

日付別

タグ一覧

HTMLの主な要素〜初心者だった自分に向けて〜　その⑤メディアと埋め込みコンテンツ

img要素 `<img>`

video要素 `<video>`

`video`要素に指定できる主な属性

iframe要素 `<iframe>`

`<iframe>`要素に指定できる主な属性

picture要素 `<picture>`

source要素 `<source>`

`<source>`要素に指定できる主な属性