今さら聞けないHTML　2021年03月24日

ホバーしたら数字が1回転するコードを使ってtransitonの理解を深める①

# 概要
ホバーしたら数字が1回転するコードを使ってtransitonを理解を深める

>【transitionプロパティ】
>遷移 (transition) によって、要素の2つの状態間の変化を定義することができます。それぞれの状態は :hover や :active のような疑似クラスで定義するか、 JavaScript を使用して動的に設定します。
>
>[参考：transform – CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/transform)

# 引数の説明

主なWebサイト構造設計

サイト構造設計の種類

1. レスポンシブWebデザイン
2. シングルページ・レイアウト
3. アダプティブ・デザイン
4. ワンカラム・レイアウト
5. マテリアル・デザイン

### 1. レスポンシブWebデザイン

機種の画面サイズ、ウィンドウのサイズに応じてレイアウトを最適化するWebデザイン。
PC用画面の設計を行った後、タブレット・モバイル用画面を設計するのが主流だったが、現在ではモバイル用画面を先に設計する「モバイルファースト」の傾向がある。

### 2. シングルページ・レイアウト
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1210256/8cd2fd97-449b-bc5b-c111-14265eef64c2.p

HTML学習の備忘録(ドットインストール「はじめてのHTML」#10〜#14)

＜header＞＝＜body＞内のヘッダー(文書の先頭にある部分)的要素を入れるために使う。
＜footer＞=＜body＞内のフッター(文書の最後にある部分)的要素を入れるために使う。

＜section＞=ウェブページ内のある部分が一つのかたまりと表す際に書く。

＜ul＞=unordered listつまり箇条書きリストのこと。箇条書きしたいリストの先頭と最後に使用される。
＜li＞=list itemの略。ブラウザで箇条書きの点で表示される。

リンクのURLを貼りたい場合は＜a＞を使う。(aはanchorの略)
URLの属性は＜href(リンク先を指定する属性) ‥‥＞のように‥の部分にURLを使う。
なお、リンクによっては別のタブで表示したい場合もある。その場合、＜href ‥‥の後に「target=”_blank”」と記述する。

inputタグの中で文字位置を調整

inputタグの文字位置を調整するにはpaddingを使う
例　虫メガネマークの後ろから文字を表示したい時
input>
style>
padding-left: 30px;
/style>

Grid LayoutのIE向けベンダープレフィックスをAutoprefixerに任せるなら「自動配置」に注意する

# はじめに

CSSベンダープレフィックスは手打ちでやろうとすると割と厄介ですが、[Autoprefixer](https://github.com/postcss/autoprefixer)は自動でこのベンダープレフィックスを付与してくれるため、コーディング量を少なくしメンテナンス性も高めることができるとても便利なものです。

しかし、Autoprefixerの挙動を理解していないと、IEと従来版Edge対応時に「自動配置」に振り回されるかもしれないので備忘録を残します。
決して、Autoprefixerが悪いという話ではなく、**使うときはここに気をつけよう**という趣旨になります。

なお、Autoprefixerの導入やCSS Grid Layoutの詳しい使い方等については、本記事では扱いません。

CSS Grid Layoutについては以下の記事がとても参考になると思います。
[CSS Grid Layout を極める！（基礎編）](https://qiita.com/kura07/items/e633b35e33e43240d363)
本記事でも**この記事の例として

画像の表示(HTMLとCSS)

HTMLとCSSを使って画像を表示させる方法に関しての記事。
下記2点について書きたいと思う。

・画像を表示する方法
・画像の大きさを調節する方法

### 画像の配置
まずは、画像を配置させる。
下記のようにimageというフォルダ内に画像を配置させる。
[](https://gyazo.com/6cabcce8e12e994078ad239d1906c7f6)

### 画像の表示
画像を表示するためには、img要素を使う。
img要素を用いることで、Webサイト上に画像を表示することができる。
img要素には、画像の場所を指定するsrc属性 、画像が表示されなかった場合に代替テキストなどを表示するためのalt属性も併せて使用する。

“`
image src=”image.jpeg” alt=”imagename” class=”classname”
画像を決める 代替テキスト

IntersectionObserverクラスで画面をスクロールした時、要素をふわっと出現させる。

#はじめに
ホームページなどでよく見る、下にスクロールさせると下からふわっと画像が出現するようにするにはどうすれば良いのか気になったので調べてみました！

#コード紹介&解説

このような物を作っていきます！

See the Pen

vsIE（ボタンのレイアウトが崩れる編）

# はじめに
前回の記事同様IEに苦しめられた内容を備忘録として残していきます！

ということで今回は「**ボタンのレイアウトが崩れる編**」です。
ボタンの中身の文言をただただ中央に表示したいだけなのに…！

もし他にステキな解決法があれば是非教えてください！！
では！早速！

# ボタンのレイアウトが崩れるんじゃ…

やりたかったことしては、文字が中央に配置されているような、シンプルにボタンを実装したかっただけです。
（こんなに詰むことになろうとは…）

そんな難しいことではないので以下のような感じで実装しました。

“`html:index.html

buttonタグ
aタグ

“`

（contentsについては今は特に気にしないでください。）

“`css:style.css
.button {
display: block;
widt

【初心者でもわかる】aタグで「現在のページ」・「現在のルートページ」・「非遷移」の設定方法

# どうも7noteです。微妙に違うaタグの遷移先の設定方法について解説

以下の4つの指定方法について解説していきます。

– ①`href=”./”`　（現ディレクトリのルートに遷移）
– ②`href=””`　　（現在のページに遷移）
– ③`href=”#”` 　 （現在のページのTOPに遷移）
– ④`href=”#!”`　（ページ遷移をしない）

## ①`href=”./”`　（ルートに遷移）

ルートに遷移します。**勘違いされやすいですが、現在のページに遷移するわけではありません。**わかりやすいように問題にしてみます。

—

**前提：**ディレクトリ構造は以下とする。

> index.html
/news/index.html
/news/001.html

—

**問題１：**`/news/index.html`から`href=”./”`ページ遷移した場合、どのページに遷移するか？

**答え：`/news/index.html`**

—

**問題２：**`/news/001.html`から`href=”./”`でページ遷移した場合、どの

HTML学習の備忘録(ドットインストール「はじめてのHTML」#5〜#9)

ファイルの冒頭で「これはHTML文書ですよ」と宣言するために＜！DOCTYPE＞と書く。
このタグは閉じタグが必要ない。
その次に「ここからここまでがHTML文書ですよ」という意味で＜html＞タグを書く。
それから、htmlタグにはlang属性(追加情報)で「日本語の文書だよ」という意味で”ja”を付ける。

＜body＞=HTML文書のコンテンツ・内容を示す要素。

＜meta＞=ページを記述するコードを示す要素。(「メタ」とは‥他の語の前に付いて複合語を作り、超越した、高次の、意味を表す。)
昔は様々な文字コードがあったが、最近では「UTF-８」が主流になりつつある。

＜title＞=タブのタイトルにも反映される。

faviconの設定方法‥＜link＞を使う→rel属性(リンク先の他の文書に対する関係を示すための属性)をiconにする→faviconのファイル名はhref属性(リンク先を指定する属性)に指定

次にインターネットに公開した時に検索エンジンが説明用の文章として使うことを想定して、文書の説明も加えておく。
＜meta＞を使い、name属性(要素の名前)・cont

Vue.js~オブジェクト（ドラえもん）~

https://qiita.com/akari_0618/items/36ba2fc4dee783def482
前回の記事でのオブジェクトについて触れていきたいと思います。

簡単に言うとオブジェクトとは物体なのですが、わけわからないと思うのでここではドラえもんという作品を作るということにしときます。
ということで最初にいきなりオブジェクトに突っ込むと詰むので、まずは周りから攻めていきましょう。
ドラえもんの登場人物で考えて行きましょう。

#クラス
これは設計図のです。難しいことは考えずにもう設計図だと思ってください！
しずかちゃんとかのび太くんのプロフィール用紙のようなものです。

#プロバティ
これはCSSを触っていると馴染みがあると思います。要は、１つ１の説明のようなものです。
ドラえもんだとわかりにくいので、のび太くんたちで例えます。
のび太くんたちの出身地、通ってる学校、学年などをかきます。ある程度共通項目があるので、それをかきます。

#メゾット
行動のことです。
何をするのか、特技はなにか、好物はなにかなどですね

これが、のび太くんたちの共通項目です。
ここから一人ひ

マルチタスク学習者に最適なオンライン家庭教師サイト5選

直接会って話をすることが望ましいのは言うまでもありませんが、今の時代はオンライン家庭教師が主流です。今は社会的に距離を置く時代ではありませんが、リクエストに応じて家庭教師を呼ぶのはとても楽しいことです。スケジュールの自由度が高く、時間をかけずに済む（実在の場所に通う必要もない）ため、これらのサイトには、特定の分野で上級学位を取得している数名の優秀な教師が集まってくるかもしれない。また、多くのサイトでは、デジタルホワイトボードやインタラクティブなテキスト編集など、生徒とチューターが同じ環境にいるかのように感じられるコネクテッドワークスペースを提供しています。
 
特定のコミュニティで利用可能なチューターだけに限定されず、これらのネットワークにはあまりにも多くのチューターが登録されています。つまり、あなたの生徒は、幼稚園児から高校生までの読解力や数学、高度なエンジニアリングや看護など、指導を必要とするあらゆる科目のスペシャリストと数分で対話することができるのです。また、教科の枠を超えて、大学受験や小論文、履歴書の作成、就職面接などのサポートを受けることもできます。こんなに頭を使うことができ

Vue.jsとは？？

今回は、Vue．jsについて学習していきたいと思います。
Vue.jsとは、フロントエンドで使われる言語です。Javascriptのフレームワークになります。
HTMLとCSSで書いたあとに、動きを付けることができます。
フロントエンドではよく使われる言語のようです。
他にも、Javascriptのフレームワークはたくさんあり、用途ごとに使い分けて行きます。
また、Vue.jsには更にフレームワークが存在するのですが、ここでは割愛させていただきます。

#Vue.jsを使うメリット
Vue.jsを使うメリットは、いくつかあります。
①HTMLとCSS
②Javascriptの知識があれば割とすんなり入ってくる。
③DOMがを自動的処理してくれる。（JsからHTMLとCSSのデータを取得してくれる）
です。

#導入の仕方
コマンドを使ったりすることは特にないですが
HTMLとVue自体にお決まりのような記述内容があります。

“`index.html

通常のHTMLファイルに単一コンポーネントVue.jsを組み込む方法

## 前置き
しばらく前に下記のようなことができるVueCLIの導入をして勉強していたのですが、
この開発ツールで作成した単一ファイルコンポーネント(.vueファイル)をそのまま、
普通のHTMLファイルに組み込む方法が意外とぐぐっても情報が少なかったので、
改めてまとめてみたいと思います。

### VueCLIでできること
– プロジェクトのテンプレートの作成
– 複数のjsファイルを一つにまとめる
– .vueファイルを.jsに変換する
– トランスパイル
– JavaScriptの構文チェック
– テストツールの導入など

### 単一ファイルコンポーネントとは
その前に、Vue.jsの単一ファイルコンポーネントファイルについて改めて復習します。
単一ファイルコンポーネントファイルとは、以下のように、template, script, styleの
3つがセットになった拡張子vueのファイルです。

“`vue