今さら聞けないHTML　2021年01月27日

Hello Dollyはただのプラグインではないのか検証してみた

#Hello Dollyとは
おそらくWordPressでもっとも知名度の高い、プラグイン。
**[”Hello Dolly”](https://ja.wordpress.org/plugins/hello-dolly/)**
このプラグインはWordPressをダウンロードすると初期でインストールされている。
有効化するかしないか・・・むしろ削除していいのか。
頭を抱えたことがある人もいるかも知れない。

ある先生に面白いよと言われ興味をもったのが今回の記事の発端です。

プラグインの詳細にはこう書かれている。
>”This is not just a plugin” *これはただのプラグインではない*

ということで、プラグインのファイルを覗いてみた。

##hello.php
プラグインを構成するデータはhello.phpのみ。
とてもシンプル。
変数にHello Dollyの歌詞を代入し、ランダムで取り出し、それを管理画面に出力する。
アクションはもちろんだが、ダッシュボードでのheadにCSSを適用するための関数など、
WordPressプラグインを作成するためのヒントがた

私のSERP、貧弱すぎ⁉

# 私のSERP、貧弱すぎ⁉
※SERPは検索エンジンのページに表示される読者を誘導するための文言・写真等です。

ホームページ作るようになってから2年目ぐらい。
それまで業務用のWebアプリ作成してました。
HTMLわかるしHPぐらいよゆーだろ。
そんな風に思ってた時期が僕にもありました。

## ある日気付く納品物の貧弱さ
特に苦情があったわけでもなくGoogleの匙加減で集客に成功したりまるで成果をあげれなかったりする日々。
お客様のビジネスは順調だけどネットで集客はあまり上手くいってません。

## 認めたくない納品物のダメさ加減

### 遅い
まず気になったのがレスポンスの遅さ。
せっかく貧弱なSERPにもかかわらず来てくれたお客様も閉口して帰るでしょう。
firebaseとNuxtjsでSSRしてましたがSSGに変えました。
一時的に検索順位が上がりましたがすぐ戻りました。

### metaタグがめちゃくちゃ
HPだから人の目で見てまともな状態にすればいいと**練乳**より甘い考えをしてたようです。

#### title / h1タグ
titleもHPのルートのタイト

ボーダーが２個できる？

備忘録としてアップします

チャットを終了するのボタンを作ろうとした際に、
ボーダーが２個できてしまうエラーが発生しました。

以下エラーのスクショ

https://gyazo.com/9a950170296593558bbcdf31bb9a9d86

以下問題のコード
HTML

“`main_chat.html.erb

hogefuga

チャットを終了する

“`

CSS

“

ヘッダーに変な隙間ができる原因2選とそれぞれの解決方法

#どうも7noteです。ヘッダーに隙間ができる謎を解明していきます。

大きく2つの原因が考えられます。

**・body,htmlの標準marginが効いている
・ファイルがBOM付きファイルである**

それぞれの原因の確認方法を見ていきたいと思います。

## ヘッダーの隙間を解決するなら「marginを見る」

※googleChromeでの手順です。ほかのブラウザではボタンやメニューの名称が異なるかも。

### 原因確認方法
[ブラウザを右クリック]→[検証]→[検証ツールのElementsでbodyタグをクリック]→オレンジ色になっている部分があれば標準のmarginが効いているということ。


↓↓↓↓↓↓↓↓↓↓

**「初期のmarginは無効化させる」**

“`style.css
/* 無難な書き方 */
body,h

GitHub Pagesでポートフォリオを公開する手順

無料で簡単に静的なサイトを公開できるGitHub Pages。
ポートフォリオなどを手軽に公開できるため、多くのエンジニアやデザイナーが使っていると思います。
今回はGitHub Pagesでリポジトリを公開するまでの手順をまとめます。

> …手順という手順が無いレベルの話ではあるんですけどね…。

## 公開用のリポジトリを用意する
モノがなくては始まらないので、リポジトリを用意しましょう。
ルートフォルダの`index.html`がいちばん最初に表示されるページになります。これも作っておきましょう。

特にセンシティブなデータを扱うことがないなら、この時点でPrivateではなくPublicなリポジトリにしておくことをオススメします。

## リポジトリを公開する
公開方法は簡単で、リポジトリの`Settings`ページにある`GitHub Pages`の欄をいじるだけです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1007176/5cc40ea6-e948-ff20-90

【効率化】Emmetの使い方

#はじめに
最近Web制作の案件を受注できたプログラミング初心者。
Emmetついて、まとめたので投稿しますわ?

##目次
[Emmetとは](#Emmetとは)
[HTMLの雛形](#HTMLの雛形)
[単体](#単体)
[要素を入れ子にする](#要素を入れ子にする)
[要素を複数作成する](#要素を複数作成する)
[要素を同階層に作成する](#要素を同階層に作成する)
[idとclass](#idとclass)
[混ぜて使用してみた](#混ぜて使用してみた)
[CSSの記述](#CSSの記述)

##Emmetとは
HTMLやCSSの記述をサポートしてくるプラグインのこと。
独自の省略記法によるコーディング作業を効率化している。
Web制作のお仕事は出来上がった成果物に対して報酬が出るので、
時給という概念では捉えづらい?

作業時間が長くても報酬には比例しないため、作業時間を短縮できれば単価向上に繋がる。
そのため、Emmetを使いこなすことは重要かと考える?

##HTMLの雛形
“`html
!
↓

disabled属性はデータを送信しない

Vue.jsで、とある条件の時入力フォームの値を変えられないようにしたかったので下記のようにdisabled属性を使用しました。

“`Vue.js

“`

なぜかデータが渡ってきません。
よく調べるとdisabled属性はデータもdisableにしてしまうようですね。
データは渡さないと困る条件だったので、:readonlyに変更しました。

“`Vue.js

“`

入力フォーム　無効　で検索して馬鹿の一つ覚えでdisabledを使ってしまったのがダメだったなあ、、と反省しました、、。
ただdisabledのように背景が勝手にグレーになってはくれないようなので、別途設定しなくては。

ProgateでHTML,CSSを学んでみた（5日目）

#概要
Web開発に興味が出てきたのでとりあえず一通り必要そうなものを触ってみることにしました。
ただ触るだけだと忘れてしまいそうなのでメモとして学んだことを書いてみます。
ここにあるコードはほぼ全てProgateで出てきたものです。

##入力フォームの作り方
入力フォームの作り方は\と\の2種類ある。<br /> \<input>要素は1行のテキスト入力を受け取るための要素。<br /> \<textarea>要素は複数行のテキスト入力を受け取るための要素。<br /> \<input>には終了タグが不要。<br /> \<input type="submit">のようにtype属性を指定すると送信ボタンなどが作れる。<br /> 以下にtype属性にどんなのがあるかまとめられている。<br /> [\<input>の使い方とtype属性の一覧をサンプル付きで紹介](https://webliker.info/39533/)</p> <p>“`hoge.html<br /> <input class="contact-submit" type="submit" value="送信"><br /> “`</p> <p>##複数の要素にCSSを適用す</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>CSS</div> <div class='tag-cloud-link'>Progate</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/kfuku1634_dev/items/ff43520f504e914f5497'>元記事を表示</a></div> <h3 id="outline__0_0_9"><a href='https://qiita.com/chiho0517/items/65ac66ec87ff8c2b2d5b'>初心者のためのPugの基礎知識</a></h3> <blockquote><p>## 概要<br /> 初心者のためにPug（パグ）とはなんぞやを解説していきます。</p> <p>## 対象者<br /> – HTML,CSSの知識がある<br /> – Pugを使ってみたい方</p> <p>## Pugとは<br /> Pug（パグ）は、HTMLを効率的に書くためのテンプレートエンジンです。<br /> 使い方はCSSで言うSassみたいなもので、<br /> 拡張子` .pug` のファイルを書き、変換されHTMLファイルとして出力されます。<br /> （コンパイル環境が必要になりますが、今回は環境以外の`Pug`の書き方など考え方について説明していきます。）</p> <p>#### Pugの記法<br /> インデントのみで階層化を行い書いていく。</p> <p>“`html:Pug<br /> main#main<br /> ul.btns<br /> li<br /> a.btn(href=”/”) ボタン</p> <p>“`</p> <p> **↓**</p> <p>“`html:HTML</p> <p><main id="main"></p> <ul class="btns"> <li><a href="/" class="btn">ボタン</a></li> </ul> <p></main><br /> “`</p> <p>####Pugのメリット</p> <p> **1. 閉じタグ</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>CSS</div> <div class='tag-cloud-link'>pug</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/chiho0517/items/65ac66ec87ff8c2b2d5b'>元記事を表示</a></div> <h3 id="outline__0_0_10"><a href='https://qiita.com/Yu-go/items/a5003e1d6959acad2a48'>HTMLタグの読み方まとめ</a></h3> <blockquote><p>#はじめに<br /> 普段コードを書いている時に読み方を間違ったまま覚えて、外で恥ずかしい思いをしたので、<br /> この機会にHTMLタグや属性の読み方と意味を簡単にまとめておきます。</p> <p>#HTMLタグ読み方一覧</p> <p>##1. !DOCTYPE<br /> ###読み方…ドックタイプ</p> <p>HTMLでコードを描き始める時に先頭に記載する宣言文。</p> <p>Document Type Definitionの略</p> <p>##2. a<br /> ###読み方…アンカー</p> <p>リンクの出発点・到達点を指定する。</p> <p>anchorの略。</p> <p>##3. br<br /> ###読み方…ブレイク</p> <p>改行を指定する。</p> <p>breakの略。</p> <p>##4. img<br /> ###読み方…イメージ</p> <p>画像を表示するHTMLのタグ。</p> <p>imageの略。</p> <p>##5. ul<br /> ###読み方…アンオーダードリスト</p> <p>番号なしのリストを作る。</p> <p>unordered listの略。</p> <p>##6. ol<br /> ###読み方…オーダーリスト</p> <p>番号付きのリストを作る。</p> <p>order listの略。</p> <p>##7. p<br /> ###読み方…パラグラフ</p> <p>ひとつの段落であることを表すHTMLタグ。</p> <p>「ピータグ」と読むことも</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/Yu-go/items/a5003e1d6959acad2a48'>元記事を表示</a></div> <h3 id="outline__0_0_11"><a href='https://qiita.com/TakakoWeb/items/b66f2ab4fcd83c4639fa'>Swiper Slider Space matter on Smartphone. Swiperのスライダーでスマホ表示の時にできる余分なスペースの解消。</a></h3> <blockquote><p> To make space smaller Swiper slider when viewing on smartphone.<br /> Swiperのスライダーを利用したときにスマホ（縦）表示で余分なスペースを解消。</p> <p>Too much of space like below.<br /> 以下のようにスライダーの上下にスペースが。。。<br /> <img decoding="async" width="400" alt="20210126_002546.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/750408/3f278d44-6572-14a3-48c2-4b593bbddfc1.jpeg?test=1&y=n"><br /> There is a solution to make like this.<br /> こんな感じに解決できます。<br /> <img decoding="async" width="400" alt="20210126_002522.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/750408/ed3b044a-3f</p></blockquote> </blockquote> <aside class=?test=1&y=n'widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>CSS</div> <div class='tag-cloud-link'>slider</div> <div class='tag-cloud-link'>swiper</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/TakakoWeb/items/b66f2ab4fcd83c4639fa'>元記事を表示</a></div> <h3 id="outline__0_0_12"><a href='https://qiita.com/kazu3306/items/4351761880d2b2fcb506'>HTMLとJavaScriptだけで複数の画像ファイルのアップロードとプレビュー</a></h3> <blockquote><p>#はじめに<br /> HTMLとJavaScriptを用いて複数画像のアップロードとプレビューを行うWebサイトを作成するにあたって，Web検索したところあまり記事がヒットしなかったため自作したプログラムを公開しようと考えました．JQueryなどは使わず，素のJavaScriptで作成しました．<br /> JavaScriptについての知識が浅いため，スマートでない部分もあるかと思います．</p> <p>#仕様<br /> 1. HTMLとJavaScriptのみで実装する．<br /> 1. 画像を複数枚同時に投稿できる．<br /> 1. 投稿した画像は横並びにプレビュー表示される<br /> 1. 削除ボタンを押すとプレビューから削除される</p> <p>“`:フォルダ構成<br /> ．<br /> ├─index.html<br /> ├─js/<br /> 　　└─main.js<br /> ├─css/<br /> 　　└─style.css<br /> “`</p> <p>#HTMLで雛形を作る</p> <p>まずは，HTMLで雛形を作っていきます．<br /> ファイルアップロードのためのフォームと，空のdivタグを置いておきます．</p> <p>“`html:index.html<br /> <!DOCTYPE html><br /> <html lang="ja"></p> <p><head><br /> <met</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>HTML5</div> <div class='tag-cloud-link'>Web</div> <div class='tag-cloud-link'>初心者</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/kazu3306/items/4351761880d2b2fcb506'>元記事を表示</a></div> <h3 id="outline__0_0_13"><a href='https://qiita.com/ke_na/items/b3b912b1e4c587b50d3f'>Canvasのことをちょっぴり知る</a></h3> <blockquote><p>## この記事について<br /> HTMLのCanvasで「どんなことができるのか？」「どんな作品ができるのか」というところを重点的にまとめた記事になります。技術的な内容にはあまり触れていないです。</p> <p>## 対象者<br /> – Canvasを知らない人や触ったことがない人</p> <p>### Canvasとは？<br /> HTML5から導入された図形を描くための技術仕様です。<br /> JavascriptとHTMLの`<canvas>`を使用して図形を描くことができます。</p> <p>Canvasを使った作品例だと以下のようなものがあります。</p> <p>– [ホムンクルス](https://homunculus.jp/)のコーポレートサイト<br /> – [ぷるぷるスパークリングゼリー](http://www.hakutsuru.co.jp/purupuru/)の商品紹介のサイト<br /> – [雲の上を飛んでるような作品](https://mrdoob.com/#/131/clouds)<br /> – [トランプがひたすら落ちてくる作品](https://mrdoob.com/#/142/winning_solitaire)</p> <p>### できること<br /> 基本的に2Dの図形を対象とし</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>CSS</div> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>canvas</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/ke_na/items/b3b912b1e4c587b50d3f'>元記事を表示</a></div> <h3 id="outline__0_0_14"><a href='https://qiita.com/7note/items/5d7a1fc05feb5f14e7b7'>【初心者でもわかる】縦横画面いっぱいに画像を綺麗に表示する方法</a></h3> <blockquote><p># どうも7noteです。画像が画面いっぱいに入っているファーストビューを作ります。</p> <p>画面いっぱいに画像が入っているサイトって、オシャレじゃないですか？<br /> ただ綺麗に作るためには画像の選別からCSSの書き方までちょっとした工夫や知恵が必要です。<br /> そのような細かいところを解説できればと。</p> <p>## 画像を画面幅と高さいっぱいにする方法</p> <p>“`index.html</p> <div class="first_view"><img decoding="async" src="image.jpg?test=1&y=n"></div> <p>“`</p> <p>“`style.css<br /> .first_view {<br /> width: 100vw; /* 画面幅いっぱい */<br /> height: 100vh; /* 画面高さいっぱい */<br /> }<br /> .first_view img {<br /> object-fit: cover;/* 要素いっぱいに画像を表示（はみ出た部分は削除） */<br /> width: 100%; /* 親要素の幅いっぱい */<br /> height: 100% /* 親要素の高さいっぱい */<br /> }<br /> “`</p> <p>※ IE非対応です。対応さ</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>CSS</div> <div class='tag-cloud-link'>初心者</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/7note/items/5d7a1fc05feb5f14e7b7'>元記事を表示</a></div> <h3 id="outline__0_0_15"><a href='https://qiita.com/kfuku1634_dev/items/9a480ce0db621e7f9027'>ProgateでHTML,CSSを学んでみた（4日目）</a></h3> <blockquote><p>#概要<br /> Web開発に興味が出てきたのでとりあえず一通り必要そうなものを触ってみることにしました。<br /> ただ触るだけだと忘れてしまいそうなのでメモとして学んだことを書いてみます。<br /> ここにあるコードはほぼ全てProgateで出てきたものです。</p> <p>##フッターの構造<br /> フッターの左側にロゴ、右側にリストがある。<br /> <a ref="https://qiita.com/kfuku1634_dev/items/731e98be8ff6bedc04a7">ProgateでHTML,CSSを学んでみた（3日目）</a>で\</p> <li>にCSSで要素を追加した。<br /> なので、このままではフッターにも上記と同じCSSが適用されてしまう。<br /> これを回避するには以下のように書く。</p> <p>“`hoge.css<br /> .header-list li{<br /> float: left;<br /> padding: 33px 20px;<br /> }</p> <p>“`</p> <p>##mainの構造</p> <p>###文中の一部にCSSを適用させる<br /> 一部にCSSを適用させるには以下のようにspan要素で囲む</p> <p>“`hoge.html<br /> <h1</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>CSS</div> <div class='tag-cloud-link'>Progate</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/kfuku1634_dev/items/9a480ce0db621e7f9027'>元記事を表示</a></div> <h3 id="outline__0_0_16"><a href='https://qiita.com/higurit/items/d9dddfa4f34e53f47e1e'>静的htmlをwordpress化する方法</a></h3> <blockquote> <h1 id="outline__1">静的htmlをwordpress化する方法※編集中</h1> <h2 id="outline__1_1">固定ページ</h2> <h2 id="outline__1_2">phpファイルの記載内容</h2> <p><?php get_header(); ?><br /> <!--header--><br /> ～中略､ここにhtmlを記載する～</p> <p><?php get_footer(); ?></p> <h2 id="outline__1_3">ドメイン直下</h2> <p>wp-content/themes/使用しているテーマ/index.php</p> <h2 id="outline__1_4">ショートコードを埋め込みたい</h2> <p>■元ファイル(固定ページや投稿)<br /> [ショートコード]</p> <p>■方法<br /> ○○.phpに以下記載<br /> <?php echo do_shortcode( '[ショートコード]' ); ?> </p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>PHP</div> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>WordPress</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/higurit/items/d9dddfa4f34e53f47e1e'>元記事を表示</a></div> <h3 id="outline__1_4_1"><a href='https://qiita.com/tani__san929/items/813b933ddead451f1263'>[CSS]クリック時のボタン装飾に関して(:active,box-shadow,cursor)</a></h3> <blockquote><p>今回は、HTMLとCSSを用いて<br /> クリック時にボタンが立体的かつ凹む（押している実感）仕様をまとめます。</p> <p>ここでポイントとなるのが、<br /> **:active,box-shadow,cursor**の3つのプロパティになるかと思います。<br /> #完成品<br /> </p> <p>下記の流れで完成させます。<br /> あくまで学習した事を詰め込んだので、<br /> 必要がないCSSもあるため、そこは各々で取捨選択をお願いいたします。</p> <p>#作成する手順</p> <p>| No.| 操作<br />ファイル | 手順 |<br /> |:-:|:-:|:-:|<br /> | 1 | HTML＆CSS| Boxを作成する |<br /> | 2 | HTML＆CSS| Box内に文字を作成する|<br /> | 3 | CSS | Boxの角を丸める |<br /> | 4 | CSS | Boxを立体にする |<br /> | 5 | CSS | クリック時に凹ま</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>CSS</div> <div class='tag-cloud-link'>初心者</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/tani__san929/items/813b933ddead451f1263'>元記事を表示</a></div> <h3 id="outline__1_4_2"><a href='https://qiita.com/heytommy811/items/029031d9ce05ec9fdd6f'>Codeigniterを使ってレスポンスで画像を返す</a></h3> <blockquote><p>サーバ側で何かしらの処理を実行し、その結果に基づいてクライアント側に画像を返したい場合、Codeigniterに用意されている<a href="https://codeigniter.jp/user_guide/3/libraries/output.html">出力クラス</a>を使うと便利です。<br /> ※画像以外にも任意のファイル形式を返す場合に有効です</p> <p>imgタグのsrc属性に直接URLを指定したり、JavaScriptのImageクラスを動的に生成したりするときに使用することで、画像を簡単に表示することができます。<br /> 画像のURLのみを返すような処理であれば、画像そのものを返してしまった方が実装コストが低くて済むと思います。</p> <p>### コントローラーのサンプル<br /> ※画像（$file_path）は適当に用意してパスを合わせてください。</p> <p>“`Image_responder.php<br /> <?php defined('BASEPATH') OR exit('No direct script access allowed'); class Image_responder extends CI_C</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>PHP</div> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>CodeIgniter</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/heytommy811/items/029031d9ce05ec9fdd6f'>元記事を表示</a></div> <h3 id="outline__1_4_3"><a href='https://qiita.com/SOH_engineer/items/feb34ce52ee9c967ada6'>HTML/CSS復習③</a></h3> <blockquote><p><a href="https://qiita.com/SOH_engineer/items/cc53c161465195074e6e">HTML/CSS復習②</a>からの続きです。</p> <h1 id="outline__2">floatの解除</h1> <p>通常、親要素の高さは子要素を包む高さになる。<br /> しかし、子要素が全てfloatの時には、親要素の高さは0になる。<br /> 子要素が全てfloatでも親要素が高さを持つように設定する<br /> float: leftは、</p> <p>“`CSS:CSSファイル<br /> clear: left;<br /> “`</p> <p>で解除できる。</p> <p>htmlファイルには、CSSを適用する(clear: left)ための空のタグを用意する。</p> <p>“`html:htmlファイル</p> <div class="clear"></div> <p> #空のタグ<br /> “`</p> <p>“`CSS:CSSファイル<br /> .clear {<br /> clear: left;<br /> }<br /> 以上のように設定すると、floatを解除できる。<br /> “`</p> <h1 id="outline__3">max-widthの設定</h1> <p>巨大なサイズの画面の時、要素の幅が広がりすぎないように、max-widthを指定する。</p> </blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>CSS</div> <div class='tag-cloud-link'>ドットインストール</div> <div class='tag-cloud-link'>初心者</div> <div class='tag-cloud-link'>Progate</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/SOH_engineer/items/feb34ce52ee9c967ada6'>元記事を表示</a></div> <h3 id="outline__3_4_1"><a href='https://qiita.com/SOH_engineer/items/cc53c161465195074e6e'>HTML/CSS復習②</a></h3> <blockquote><p><a href="https://qiita.com/SOH_engineer/items/723d838911b7af4cc539">HTML/CSS復習①</a>からの続きです。</p> <h1 id="outline__4">アニメーションを付ける</h1> <p>“`CSS:CSSファイル<br /> transition: 変化の対象(allだと全てのプロパティを指定) 変化の時間(例： 1s = 1秒);<br /> “`</p> <p>hoverと組み合わせて使うことが多い</p> <p>“`CSS:CSSファイル<br /> #変化の対象となるところにカーソルを乗せると背景が1秒間赤色に変化する<br /> div {<br /> transition: 変化の対象(allだと全てのプロパティを指定) 変化の時間(例： 1s = 1秒);<br /> }<br /> div: hover {<br /> background-color:red;<br /> }<br /> “`</p> <h1 id="outline__5">行間の指定</h1> <p>“`CSS:CSSファイル<br /> line-height: 〇〇px;<br /> “`</p> <h1 id="outline__6">position: absolute</h1> <p>“`CSS:CSSファイル<br /> position: absolute; #</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>CSS</div> <div class='tag-cloud-link'>ドットインストール</div> <div class='tag-cloud-link'>初心者</div> <div class='tag-cloud-link'>Progate</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/SOH_engineer/items/cc53c161465195074e6e'>元記事を表示</a></div> </div> </section> <!-- 記事下シェアボタン --> <aside> <ul class="socialList"> <li class="socialList__item"><a class="socialList__link icon-facebook" href="http://www.facebook.com/sharer.php?u=https%3A%2F%2Fmiofactor.com%2F2021%2F01%2F27%2Fpost-10009%2F&t=%E4%BB%8A%E3%81%95%E3%82%89%E8%81%9E%E3%81%91%E3%81%AA%E3%81%84HTML%E3%80%802021%E5%B9%B401%E6%9C%8827%E6%97%A5" target="_blank" title="Facebookで共有"></a></li><li class="socialList__item"><a class="socialList__link icon-twitter" href="http://twitter.com/intent/tweet?text=%E4%BB%8A%E3%81%95%E3%82%89%E8%81%9E%E3%81%91%E3%81%AA%E3%81%84HTML%E3%80%802021%E5%B9%B401%E6%9C%8827%E6%97%A5&https%3A%2F%2Fmiofactor.com%2F2021%2F01%2F27%2Fpost-10009%2F&url=https%3A%2F%2Fmiofactor.com%2F2021%2F01%2F27%2Fpost-10009%2F" target="_blank" title="Twitterで共有"></a></li><li class="socialList__item"><a class="socialList__link icon-line" href="http://line.naver.jp/R/msg/text/?%E4%BB%8A%E3%81%95%E3%82%89%E8%81%9E%E3%81%91%E3%81%AA%E3%81%84HTML%E3%80%802021%E5%B9%B401%E6%9C%8827%E6%97%A5%0D%0Ahttps%3A%2F%2Fmiofactor.com%2F2021%2F01%2F27%2Fpost-10009%2F" target="_blank" title="LINEで送る"></a></li></ul> </aside> <!-- /記事下シェアボタン --> <!-- 記事下エリア[widget] --> <aside class="widgetPost widgetPost-bottom"><aside class="widget widget-post"><h2 class="heading heading-primary">タグ</h2><div class="tagcloud"><a href="https://miofactor.com/tag/%e3%81%9d%e3%81%ae%e4%bb%96/" class="tag-cloud-link tag-link-13 tag-link-position-1" style="font-size: 8pt;" aria-label="その他 (1個の項目)">その他</a></div> </aside></aside> <!-- /記事下エリア[widget] --> <!-- 関連記事 --> <aside class="related"><h2 class="heading heading-primary">関連する記事</h2><ul class="related__list"> <li class="related__item"> <a class="related__imgLink" href="https://miofactor.com/2020/09/09/post-7509/" title="Rails関連のことを調べてみた2020年09月09日"> <img src="https://miofactor.com/wp-content/uploads/2019/10/rails-150x150.png" alt="Rails関連のことを調べてみた2020年09月09日" width="150" height="150" > </a> <h3 class="related__title"> <a href="https://miofactor.com/2020/09/09/post-7509/">Rails関連のことを調べてみた2020年09月09日</a> <span class="icon-calendar">2020.09.09</span> </h3> <p class="related__contents">目次 1. 素のrailsアプリをherokuにデプロイ2. Rails 6で認証認可入り掲示板APIを構築する #4 postのバリデーション、テス[…]</p> </li> <li class="related__item"> <a class="related__imgLink" href="https://miofactor.com/2021/12/08/post-14976/" title="Python関連のことを調べてみた2021年12月08日"> <img src="https://miofactor.com/wp-content/uploads/2019/10/python-150x150.png" alt="Python関連のことを調べてみた2021年12月08日" width="150" height="150" > </a> <h3 class="related__title"> <a href="https://miofactor.com/2021/12/08/post-14976/">Python関連のことを調べてみた2021年12月08日</a> <span class="icon-calendar">2021.12.08</span> </h3> <p class="related__contents">目次 1. [py2rb] basestring2. [py2rb] set の差異3. S3上のファイル容量を取得して、Python で集計する4.[…]</p> </li> <li class="related__item"> <a class="related__imgLink" href="https://miofactor.com/2020/11/10/post-8631/" title="今さら聞けないセキュリティ　2020年11月10日"> <img src="https://miofactor.com/wp-content/uploads/2019/11/lock-150x150.png" alt="今さら聞けないセキュリティ　2020年11月10日" width="150" height="150" > </a> <h3 class="related__title"> <a href="https://miofactor.com/2020/11/10/post-8631/">今さら聞けないセキュリティ　2020年11月10日</a> <span class="icon-calendar">2020.11.10</span> </h3> <p class="related__contents">目次 0.0.1. 【JavaScript】Webセキュリティについて0.0.2. Permitted Cross Domain Policies0.[…]</p> </li> </ul></aside> <!-- /関連記事 --> <!-- コメント --> <!-- /コメント --> <!-- PVカウンター --> <!-- /PVカウンター --> </main> <!-- /l-main --> <!-- l-sidebar --> <div class="l-sidebar"> <aside class="widget"> <div class="searchBox"> <form class="searchBox__form" method="get" target="_top" action="https://miofactor.com/" > <input class="searchBox__input" type="text" maxlength="50" name="s" placeholder="記事検索"><button class="searchBox__submit icon-search" type="submit" value="search"> </button> </form> </div></aside><aside class="widget"><h2 class="heading heading-widget">Category</h2> <ul> <li class="cat-item cat-item-1"><a href="https://miofactor.com/category/other/">OTHER</a> </li> </ul> </aside><aside class="widget"><h2 class="heading heading-widget">Back number</h2> <ul> <li><a href='https://miofactor.com/2024/09/'>2024年9月</a></li> <li><a href='https://miofactor.com/2024/08/'>2024年8月</a></li> <li><a href='https://miofactor.com/2024/07/'>2024年7月</a></li> <li><a href='https://miofactor.com/2024/06/'>2024年6月</a></li> <li><a href='https://miofactor.com/2024/05/'>2024年5月</a></li> <li><a href='https://miofactor.com/2024/04/'>2024年4月</a></li> <li><a href='https://miofactor.com/2024/03/'>2024年3月</a></li> <li><a href='https://miofactor.com/2024/02/'>2024年2月</a></li> <li><a href='https://miofactor.com/2024/01/'>2024年1月</a></li> <li><a href='https://miofactor.com/2023/12/'>2023年12月</a></li> <li><a href='https://miofactor.com/2023/11/'>2023年11月</a></li> <li><a href='https://miofactor.com/2023/10/'>2023年10月</a></li> <li><a href='https://miofactor.com/2023/09/'>2023年9月</a></li> <li><a href='https://miofactor.com/2023/08/'>2023年8月</a></li> <li><a href='https://miofactor.com/2023/07/'>2023年7月</a></li> <li><a href='https://miofactor.com/2023/04/'>2023年4月</a></li> <li><a href='https://miofactor.com/2023/03/'>2023年3月</a></li> <li><a href='https://miofactor.com/2023/02/'>2023年2月</a></li> <li><a href='https://miofactor.com/2023/01/'>2023年1月</a></li> <li><a href='https://miofactor.com/2022/12/'>2022年12月</a></li> <li><a href='https://miofactor.com/2022/11/'>2022年11月</a></li> <li><a href='https://miofactor.com/2022/10/'>2022年10月</a></li> <li><a href='https://miofactor.com/2022/09/'>2022年9月</a></li> <li><a href='https://miofactor.com/2022/08/'>2022年8月</a></li> <li><a href='https://miofactor.com/2022/07/'>2022年7月</a></li> <li><a href='https://miofactor.com/2022/06/'>2022年6月</a></li> <li><a href='https://miofactor.com/2022/05/'>2022年5月</a></li> <li><a href='https://miofactor.com/2022/04/'>2022年4月</a></li> <li><a href='https://miofactor.com/2022/03/'>2022年3月</a></li> <li><a href='https://miofactor.com/2022/02/'>2022年2月</a></li> <li><a href='https://miofactor.com/2022/01/'>2022年1月</a></li> <li><a href='https://miofactor.com/2021/12/'>2021年12月</a></li> <li><a href='https://miofactor.com/2021/11/'>2021年11月</a></li> <li><a href='https://miofactor.com/2021/10/'>2021年10月</a></li> <li><a href='https://miofactor.com/2021/09/'>2021年9月</a></li> <li><a href='https://miofactor.com/2021/08/'>2021年8月</a></li> <li><a href='https://miofactor.com/2021/07/'>2021年7月</a></li> <li><a href='https://miofactor.com/2021/06/'>2021年6月</a></li> <li><a href='https://miofactor.com/2021/05/'>2021年5月</a></li> <li><a href='https://miofactor.com/2021/04/'>2021年4月</a></li> <li><a href='https://miofactor.com/2021/03/'>2021年3月</a></li> <li><a href='https://miofactor.com/2021/02/'>2021年2月</a></li> <li><a href='https://miofactor.com/2021/01/'>2021年1月</a></li> <li><a href='https://miofactor.com/2020/12/'>2020年12月</a></li> <li><a href='https://miofactor.com/2020/11/'>2020年11月</a></li> <li><a href='https://miofactor.com/2020/10/'>2020年10月</a></li> <li><a href='https://miofactor.com/2020/09/'>2020年9月</a></li> <li><a href='https://miofactor.com/2020/08/'>2020年8月</a></li> <li><a href='https://miofactor.com/2020/07/'>2020年7月</a></li> <li><a href='https://miofactor.com/2020/06/'>2020年6月</a></li> <li><a href='https://miofactor.com/2020/05/'>2020年5月</a></li> <li><a href='https://miofactor.com/2020/04/'>2020年4月</a></li> <li><a href='https://miofactor.com/2020/03/'>2020年3月</a></li> <li><a href='https://miofactor.com/2020/02/'>2020年2月</a></li> <li><a href='https://miofactor.com/2020/01/'>2020年1月</a></li> <li><a href='https://miofactor.com/2019/12/'>2019年12月</a></li> <li><a href='https://miofactor.com/2019/11/'>2019年11月</a></li> <li><a href='https://miofactor.com/2019/10/'>2019年10月</a></li> </ul> </aside> </div> <!-- /l-sidebar --> </div> <!-- /l-wrapper --> <div class="categoryBox"> <div class="container"> <h2 class="heading heading-primary"> <span class="heading__bg u-txtShdw bgc-darkgray">OTHER</span>カテゴリの最新記事 </h2> <ul class="categoryBox__list"> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36890/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/js-554x410.png" alt="JavaScript関連のことを調べてみた" width="554" height="410" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36890/">JavaScript関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36891/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/java.jpg" alt="JAVA関連のことを調べてみた" width="540" height="270" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36891/">JAVA関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36894/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/ios-554x410.png" alt="iOS関連のことを調べてみた" width="554" height="410" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36894/">iOS関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36888/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/rails-725x410.png" alt="Rails関連のことを調べてみた" width="725" height="410" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36888/">Rails関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36884/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/lambda.png" alt="Lambda関連のことを調べてみた" width="360" height="230" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36884/">Lambda関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36886/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/python-640x410.png" alt="Python関連のことを調べてみた" width="640" height="410" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36886/">Python関連のことを調べてみた</a> </h2> </li> </ul> </div> </div> <!-- schema --> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Article ", "mainEntityOfPage":{ "@type": "WebPage", "@id": "https://miofactor.com/2021/01/27/post-10009/" }, "headline": "今さら聞けないHTML　2021年01月27日", "image": { "@type": "ImageObject", "url": "https://miofactor.com/wp-content/uploads/2019/10/python-640x410.png", "height": "410", "width": "640" }, "datePublished": "2021-01-27T14:54:41+0900", "dateModified": "2021-01-27T14:54:41+0900", "author": { "@type": "Person", "name": "editor" }, "publisher": { "@type": "Organization", "name": "f@ctor", "logo": { "@type": "ImageObject", "url": "", "width": "", "height":"" } }, "description": "目次 0.0.1. Hello Dollyはただのプラグインではないのか検証してみた0.0.2. 私のSERP、貧弱すぎ⁉0.0.3. ボーダーが２個できる？0.0.4. ヘッダーに変な隙間ができる原因2選とそれぞれの解決方法0.0.5. GitHub Pagesでポートフォリオを公開する手順0.0.6. 【効率化】Emmetの使い方0.0.7. disabled属性はデータを送信しない0.0.8 […]" } </script> <!-- /schema --> <!--l-footer--> <footer class="l-footer"> <div class="container"> <div class="pagetop u-txtShdw"><a class="pagetop__link" href="#top">Back to Top</a></div> <div class="widgetFoot"> <div class="widgetFoot__contents"> </div> <div class="widgetFoot__contents"> <aside class="widget widget-foot"><h2 class="heading heading-footer">タグ</h2><div class="tagcloud"><a href="https://miofactor.com/tag/%e3%81%9d%e3%81%ae%e4%bb%96/" class="tag-cloud-link tag-link-13 tag-link-position-1" style="font-size: 8pt;" aria-label="その他 (1個の項目)">その他</a></div> </aside> </div> <div class="widgetFoot__contents"> </div> </div> <div class="copySns "> <div class="copySns__copy"> © Copyright 2024 <a class="copySns__copyLink" href="https://miofactor.com">f@ctor</a>. <span class="copySns__copyInfo u-none"> f@ctor by <a class="copySns__copyLink" href="http://fit-jp.com/" target="_blank">FIT-Web Create</a>. Powered by <a class="copySns__copyLink" href="https://wordpress.org/" target="_blank">WordPress</a>. </span> </div> </div> </div> </footer> <!-- /l-footer --> <script type="text/javascript" src="https://miofactor.com/wp-includes/js/comment-reply.min.js?ver=6.4.1" id="comment-reply-js" async="async" data-wp-strategy="async"></script> <script> function toggle__search(){ extra__search.className="l-extra"; extra__menu.className="l-extraNone"; menuNavi__search.className = "menuNavi__link menuNavi__link-current icon-search "; menuNavi__menu.className = "menuNavi__link icon-menu"; } function toggle__menu(){ extra__search.className="l-extraNone"; extra__menu.className="l-extra"; menuNavi__search.className = "menuNavi__link icon-search"; menuNavi__menu.className = "menuNavi__link menuNavi__link-current icon-menu"; } </script><script>Array.prototype.forEach.call(document.getElementsByClassName("css-async"),function(e){e.rel = "stylesheet"});</script> </body> </html>