はじめに…

編集リクエストやご指摘のコメントをいただきありがとうございます。
正直「誰も見ていないっしょ！」というノリで自分用復習メモ兼学習意欲継続の為のルーティンとして始めた事だったので驚きました。

そもそも書き方があまり分かっていないのでお見苦しくなってしまう事も多々あるかとは思いますが、気になる点があればご指導頂けると幸いです。

学習内容

引き続きUdemy講座です。もっと時間が欲しい…

HTML/CSS

領域

<div></div>

タグ自体は意味を持たない。領域を区別（division）するためのタグ…らしい。

クラス

<div class="クラス名"></div>

グローバル属性。上記の様に書く事で区別するためのグループ名をつける事が出来る。

余白の一括指定

div {
  margin: 長さ;
}

上記の様にすると、上下左右の余白を任意の絶対値や相対値で一括指定できる。autoと入力するとウィンドウサイズに合わせて自動で調整される設定になる。

余白の個別指定

div {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

この様に入力する事で上下左右それぞれ個別に余白を指定する事も可能。

余白のショートハンドプロパティ

div {
  margin: 10px 20px 30px 40px;
  /*
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 30px;
    margin-left: 40px;
    と同じ
  */
}

上 右 下 左 の順でショートハンドプロパティでも書ける。
また、上 下、左 右において同値の場合は後半の記述を省略できる。

余白（内側）

div {
  padding: 長さ;
}

内側の余白が設定出来る。幅の指定の仕方はmarginと共通。

背景色

div {
  background-color: カラーコード;
}

RGB（rgb(0, 0, 0)）やHEX（#000000）など指定出来る他、whiteやblackなどの色の名前も使える。

枠線

div {
  border: 長さ;
}

線のタイプ、線の色も指定が可能。

所感

少しづつ覚えることが増えてきたがまだまだ初歩の段階なので復習しつつ身に付けよう。
CSSの記述真っ赤だし見やすい書き方を調べようと思います。

追記：taiy様より編集リクエストいただき格段に見やすくなりました。ありがとうございます。自分だけでも見やすく書ける様にならなくては…

諸学者向けの話ですが、要素と要素の重なりを使ったWEBデザインを紹介したいと思います。
イメージ的には以下です。

ちょっと分かりづらいですが真ん中のボーダーと右側の青丸が重なってボーダーが突き向けているが分かるでしょうか？

こう言った、要素と要素が重なりをもつデザインは結構見かけます。

positionを使う（王道パターン）

重なりのデザインと言ったらほぼこれ一択です。

html

<article>
  <time datetime="2018-08-01">1 AUG</time>  
  <h2>海岸のデコレーション</h2>
  <p>CATEGORY: 海と海岸と空</p>
</article>

css

article {
  width: 500px;
  position: relative;
}
time {
  background: #0097d8;
  color: #fff;
  padding: 20px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 0;
}
h2 {
  border-bottom: solid 2px #aaa;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

ポイントはarticleのposition: relative;とtimeのposition: absolute;です。
大雑把ですがpositionの説明を以下に図解化しました。

今回の場合はarticle要素の位置を起点とし、top: 0; right: 0;つまり右端にtimeが設置されるようにしました。

これが例えばtimeの中のtop: 0;の値をtop: 10px;に変えたとしましょう。

結果をこんな感じです。top,bottom,left,rightの値を変更することで自由自在にポジションを変えられます。

floatを使う（変化球パターン）

ちょっと変則的な使い方をします。floatの要素の回り込みの性質を利用したやり方です。正直あんまりおすすめのしないやり方で、今回の場合はたまたま要素の重なりっぽいデザインになったような感じです。

css

article {
  width: 500px;
}
time {
  background: #0097d8;
  color: #fff;
  padding: 20px;
  border-radius: 50%;
  float: right;
}
h2 {
  border-bottom: solid 2px #aaa;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

メリットをあげるとすればコードが非常にシンプルなところでしょうか。これはこれで良いのですが正直褒められたような使い方ではないですね?
ちなみにこれをさっきみたくボーダーの中心付近に配置したい場合は、timeにmargin-top: 10px;を追加すれば調整が可能です。

終わりに

今回は要素同士の重なりを作るCSSを紹介しました。またfloatのように通常の目的とは異なる使い方を知った時にはすごい斬新だなって思いました。皆さんも是非参考にして下さい。

こんにちは、株式会社ベストティーチャーで働く元気に働く たわら です。

「どの html 要素にどの CSS が当たっていて、そのファイルはどこに格納されているのか？」と思うことがあります。例えば、あるフォームにてエラーメッセージを表示するときに、別のページのフォームのエラーメッセージをいい感じに参考にしたい場合などです。

こんな 無料会員登録 画面（！）があったとします。

こんないい感じのエラーメッセージを出してくれます。

ボク「これってどのCSSが当たっているんだろう？？？」
先輩「開発者ツールを見よう！」

まずは、調べたい部分にカーソルを合わせて、右クリックをしてポップアップの検証を開きます（Chromeの場合）。そしてElementsタブのなかのStylesタブを確認します。そこでCSSのファイルを確認することができます。開発環境であれば、どのファイルの何行目のコードに記述があるかを確認できます。便利ですね。

最後に

リポジトリにはじめてさわる際などに役立つかもしれません！

こんにちは、株式会社ベストティーチャーで元気に働く たわら です。

「どの html 要素にどの CSS が当たっていて、そのファイルはどこに格納されているのか？」と思うことがあります。例えば、あるフォームにてエラーメッセージを表示するときに、別のページのフォームのエラーメッセージをいい感じに参考にしたい場合などです。

こんな 無料会員登録 画面（！）があったとします。

こんないい感じのエラーメッセージを出してくれます。

ボク「これってどのCSSが当たっているんだろう？？？」
先輩「開発者ツールを見よう！」

まずは、調べたい部分にカーソルを合わせて、右クリックをしてポップアップの検証を開きます（Chromeの場合）。そしてElementsタブのなかのStylesタブを確認します。そこでCSSのファイルを確認することができます。開発環境であれば、どのファイルの何行目のコードに記述があるかを確認できます。便利ですね。

最後に

リポジトリにはじめてさわる際などに役立つかもしれません！

See the Pen ExgaPqj by 熊瀬川直也 (@momonoki1990) on CodePen.

• デフォルトのラジオボタン(input[type="radio"])は`display: noneで消す
• ラベルと消したラジオボタンのinputはfor属性で繋がっているので、ラベルだけ残しても大丈夫(ラベルをクリックしてもラジオボタンがクリックされたことになる)
• ラジオボタンのラベル(label.radioLabel)はpadding-leftで右に寄せて、スペースを空けておく
• ラジオボタンのラベル(label.radioLabel)に:beforeを指定して、上記で空いたスペースにカスタムのラジオボタンを挿入する
• input[type="radio"]:checked + .radioLabel:afterでチェックされたラジオボタンの直後にあるラジオボタンのラベルに、:afterを指定して、チェックされたマークを挿入する。
• ラジオボタンのラベル(label.radioLabel)にposition: relateveを、カスタムのラジオボタンやチェックされたマークにはposition:absoluteを指定して、ラベルに対する相対位置でカスタムのラジオボタンやチェックされたマークの位置を定める。
• チェックされたラジオボタンの値は、getElementByIdで取得したform要素.ラジオボタンのname.valueで取得できる
• innerHTMLはメソッドではない(x 要素.innerHTML() o 要素.innerHTML = "")

参考

CSSでラジオボタン・チェックボックスをデザイン装飾する
https://web.runland.co.jp/blog_cate2/post-2650

ラジオボタンの値を取得する方法
https://lab.syncer.jp/Web/JavaScript/Snippet/30/

はじめに

今回は前回の記事Webの概要について丁寧にの続きでWeb技術の基本について更に知識を深めたいと思います。

今回の内容は

• HTMLとWebブラウザ

以上のキーワードについて説明したいと思います。

この記事のゴール

• HTML、ブラウザの言葉の意味を理解する

目次

1.世界共通言語のHTMLと人に優しいWebブラウザ
2.まとめ

1. 世界共通言語のHTMLと人に優しいWebブラウザ

前回の記事でWebページはハイパーテキストという言語で作られているというお話をしました。
このハイパーテキストの正体が実はHTML(Hyper Text Markup Language)なのです。

HTMLではタグというマークを使って文章に意味づけをしていきます。
具体的には下記の通りに記述します。
↓
ルール：「〈開始タグ〉文章〈/終了タグ〉」
具体例：「〈title〉Web技術の基本〈/title〉」

上のルールのように開始タグと終了タグで文章をはさむと意味づけをすることができます具体例では、このページのタイトルは「Web技術の基本」であることを意味します。
もちろんこれだけではイメージがつかないと思いますので、ここでは他に見出しタグの紹介をしてきたいと思います！

1-1. 見出しタグの紹介

文章には必ずある大見出しはh1というタグで表します。
下の例でも、開始タグと終了タグで文章をはさんでいますね！

sample.html

<h1>これは大見出しです</h1>

また、見出しの大きさを段階的に変えることもできます。
現在のHTMLの仕様では6段階まで設定可能です！

sample.html

<h1>これは大見出しです</h1>
<h2>これは見出しです</h2>
<h3>これは見出しです</h3>
<h4>これは見出しです</h4>
<h5>これは見出しです</h5>
<h6>これは見出しです</h6>

実際には下のように画面に表示されます

これは大見出しです

これは見出しです

これは見出しです

これは見出しです

これは見出しです

これは見出しです

他にも画像を表示させるimgタグやリンクを貼るためのaタグなど種類がたくさんあります。
このようにタグによって文章に意味づけをしながら記述をしていくのがHTMLです。

1-2. 人に優しいWebブラウザ

HTMLつまり、ハイパーテキストで書かれた文章は先程説明した通り、タグによって意味づけされている独自のものなので人間が読むにはあまりにも読みづらいです。

フランス語を知らない日本人がフランス人に話しかられても意味が理解できない状況と同じです
そこで登場するのがWebブラウザという翻訳家です。
Webブラウザは人間が理解しやすいようにハイパーテキストを翻訳してくれるプログラムのことなんです！

Webブラウザには種類がいくつかあって、一般に使われているものだと
Google ChromeやSafari、Internet Explorer、Firefoxなどが挙げられます。

Webブラウザの種類によって情報の表示の方法に多少の違いがあるのですが
HTMLは世界共通言語なので、基本的にはどのブラウザでも同じように情報を表示させる事ができるというわけです。

2. まとめ

Webページを構成するHTMLとそれを人間が理解できるように解釈してくれるWebブラウザについて理解が深められたでしょうか。
次回はWebページがどのようにして表示されるかその一連の流れについてまとめたいと思います！

• WebページはHTMLで記述される
• HTMLはタグによって文章に意味づけをしていく
• HTMLを人間にわかりやすいよに翻訳してくれるプログラムがWebブラウザである

以上です！最後まで読んでいただきありがとうございます。
お疲れ様でした。。

参考文献

Web技術の基本

どうも7noteです。点滅するアニメーションの作り方

シンプルな点滅のアニメーションの作り方です。

見本

ソース

index.html

<p>ゲームを始める<span>TAP!!</span></p>

style.css

span {
  color: #f00;
  font-size: .8em;
  vertical-align: top;
  animation : blinking 1s;             /* アニメーションを1秒間隔で行う */
  animation-iteration-count: infinite; /* 繰り返し回数を無限にする */
  animation-direction: alternate;      /* アニメーションを最初から、最後から交互に再生する */
}

/* アニメーション（右から左に移動） */
@keyframes blinking{
  0% { 
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

解説

アニメーションを1秒ごとに再生します。
1秒は0%→100%に行くのが1秒なので、往復設定をしているアニメーションでは1周するのに2秒かかっています。

animation-iteration-count: infinite;を指定して、無限に繰り返しを行っています。

おそまつ！

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

はじめに

ProgateでHTML&CSSコースを学習している途中でSEOというものを見つけたので
まとめておきたいと思います。

SEOとは何だろう

SEOとは「検索エンジン最適化（Search Engine Optimization）」の略称で、優良な被リンクを集めたり（外部施策）、ユーザーに価値あるコンテンツを提供し、適正に検索エンジンにページ内容を理解・評価されるよう技術的にWebページを最適化（内部施策）することで、GoogleやYahoo!などの検索エンジンでキーワードが検索された場合に、自サイトが上位に表示されるようにすることを意味します。
引用：SEOとは？ 押さえておくべき24のSEO対策方法とポイント

つまり検索エンジンは自分でサイトを訪問し、分かりやすいと思ったら検索上位に表示させるという仕組みになっているらしい。

SEO対策をしたとしても、すぐに検索上位に表示されるというわけではなので、
長期的にみていく必要があるみたいです。

サイトを作る上でで重要なこと

まずは検索エンジンに好かれるようサイトを作ろう

まずは検索エンジンに好かれるようなサイトを作りましょう。
検索エンジンに好かれなければ、どれだけいいページがあったとしても、読者に読んでもらうことはできません。

そこから、読者が求めていることに合うようなページを作ろう

サイトを多くの人に見てもらうには初見でもわかるような構成にする必要があります。
デザインも流行りのものを使うなどを考えましょう。

具体的なSEO対策

SEOツールを作っているGyro-n(ジャイロン)の記事から数個ピックアップしていきます。
元サイトにはもっと多くの対策が載っているのでぜひ参考にしてみてください。

対策1 コンテンツの品質と量を上げる

Googleは専門性の高い内容を評価する傾向にあるため、特定のものに対して深く掘り下げる必要があります。
コンテンツ量としては、2000~4000文字ほどあれば評価されるようです。

対策2 ページタイトルを工夫する

ページタイトルには必ずキーワードを含め、なるべく前方に表示する。
また、最大で30文字ほどにし、簡潔に記載する。

対策3 内部リンクをしっかり構成する

表示しているページからの同じサイトのリンク(内部リンク)が多ければ多いほど評価されやすくなります。
また、パンくずリスト(そのページの階層をわかりやすくしたもの)も効果的です。

※ Resultを0.25xにしてご覧ください。

See the Pen hoverで子メニューがでてくるサイドバー by 熊瀬川直也 (@momonoki1990) on CodePen.

• liの中に、親要素(a.parent)と子要素(ul.child)を並列させる。
• 子要素(ul.child)はdisplay:noneで消しておく
• 親要素と子要素をまとめるliに対して:hoverをかけ、子要素(ul.child)をdisplay: blockで表示させる。
• 親要素(a.parent)に対して:hoverをかけても、子要素(ul.child)は親要素(a.parent)に内包されていないので、子要素(ul.child)にカーソルを合わせている時に、子要素(ul.child)が消えてしまう。
• 親要素(a.parent)はdisplay: blockで広げておく
• 子要素(ul.child)は、z-index: 9999;→浮かせる、white-space: nowrap;→折り返させない、box-shadow: 0 2px 8px rgba(77, 77, 77, 0.2);→浮いているように見せる
• liの高さはaタグに対して上下paddingをかけて押し広げる(リンクの選択範囲がliの高さいっぱいまで広がる)
• 親要素と子要素をまとめるliにposition: relativeをかけて、子要素(ul.child)やspan.chevronにposition: absolute;をかけることで、子要素(ul.child)やspan.chevronの位置を定める。
• ulはlist-style: noneをかけておく。

プログラミング勉強日記

2020年11月28日
子要素内のコンテンツ配置をdisplay:flexで行う方法について学びました。

お疲れ様です?

?メモ

display:flexは、子要素の横並びにしか使ってなかったですが、子要素内でのコンテンツの配置にも使用できることを知りました? pic.twitter.com/mic8I1Td2k

— ミキ?@プログラミング (@mikiprogram) November 28, 2020

参考本

CSS設計完全ガイド ~詳細解説+実践的モジュール集

※ お手数ですが、Code Pen のResult欄を0.25xにしてご覧ください。

See the Pen headerサンプル by 熊瀬川直也 (@momonoki1990) on CodePen.

• div.header-innerで両padding内側寄せ
• ヘッダーの中に横並びにしたいdiv liはdisplay: inline-block;かけておく
• 全体を左と右の両端寄せにするため、header-innerにdisplay: flex; justify-content: space-between; align-items: center;
• header-innerの子タグはdiv二つ(left,right)にまとめる
• 左に寄せた中div.leftの中で距離をとりたいので、div.genderにmargin-left
• 並びにするものはul liをlist-style: none; margin: 0;をかけて使う。
• liに上下paddingかけて、ヘッダーの高さを押し広げる。aタグにかけた場合は、リンクの選択範囲がヘッダーの高さ分まで広がる
• 適宜li.currentにbackground-colorつけて選択されていることを示す