Aタグではできない

まず前提としてAタグではできません(正確にはできないと言う訳でではなく探したらやり方があるのかもしれません)。そう言う訳なので、ラジオボタン要素を使います。

ラジオボタン要素の書き方

ラジオボタン要素の書き方の紹介です。

HTML

<input type="radio" name="yesorno" id="yes" value="yes">
<label for="yes" class="btn">yes</label>
<input type="radio" name="yesorno" id="no" value="no">
<label for="no" class="btn">no</label>

ラジオボタンだけを追加するならこのコードだけで大丈夫です。labelのforのところにはinputのidに書いたものを入れてください。
(https://jsfiddle.net/ このページでコードのチェックができます)

ラジオボタン要素の装飾

コレだけだとボタンっぽくないのでcssで装飾します。

css

.btn {
  background-color: #f08400;
  color: white;
  font-size: 18px;
  padding: 10px 20px;
}

.btn:hover {
  background-color: chocolate;
}

普通にボタンを装飾するコードを書くだけです。

クリックしたボタンの色を変える

クリックしたボタンの色を変えるには下のコードを打ち込みます。

css

input[type="radio"]:checked + label {
  background-color: red;
}

こんな感じでおkです。htmlのinputに書いたラジオボタン要素がチェックされた時にbackgroundをredにするって感じです。

丸ポチを消す

最後に目障り(?)な丸ポチを消します。

css

input[type="radio"] {
  display: none;
}

と言ってもコレを書くだけです。

終わり

所詮僕のメモがわりなんで初歩的なとこしかかいてないですが　お役に立てば幸いです！

コード全部

HTML

<input type="radio" name="yesorno" id="yes" value="yes">
<label for="yes" class="btn">yes</label>
<input type="radio" name="yesorno" id="no" value="no">
<label for="no" class="btn">no</label>

css

.btn {
  background-color: #f08400;
  color: white;
  font-size: 18px;
  padding: 10px 20px;
}

.btn:hover {
  background-color: chocolate;
}

input[type="radio"]:checked + label {
  background-color: red;
}

input[type="radio"] {
  display: none;
}

自分用
今日覚えたこと

background-image

どうしても出なくて困った。
階層も画像の名前も確認した、要素に高さも指定した。
それでも出ない・・・

下記の構文エラーが原因だったらしい。
background-image: url(images/top.png) no-repeat;

no-repeat　はショートハンドでしか記述できないとのこと。
background: url(images/top.png) no-repeat;


ショートハンドとは・・？

長文のコードを短く省略して1行で書くこと

▼ 参考
CSSの一括指定（ショートハンド）のチートシート

ディレクトリ構造

トップページは基本的に index.html
CSSは1つの場合　style.css
が推奨される

▼ 参考
ディレクトリ構造とは？WEBサイトのファイルはどうなっている？

Audio/Video DOMとは

bodyブロックに書く音声や映像の情報。
例）
<audio data-key="76" src="sounds/tink.wav"></audio>

current Timeの使い方

    window.addEventListener('keydown', function (e){
      const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
//再生時間を取得
      var time =audio.currentTime; 
    });

例えば

audio.currentTime=0;

とすると
再生時間が最初に戻る

超初心者が独学でWEBデザイナーを目指す話。

一人で心が折れそうなのと
どれくらいまでやったかよくわかんなくなってきたので整理のために書こうと。
道標というよりかは必死にあがいてる様を垂れ流すだけの場所とする。

今のところやった事

• htmlとCSSの本でサンプルサイト作成 →それを自分用にアレンジ
• Javascriptを甘噛み →なんとなくそこはかとなく書いてあることはわかる（詳しくはわかんない）
• jQueryを甘噛み →なんとなく以下略
• 簡単そうなサイトを模写をする（トップページのみ）
• 1ページのオリジナルサイト作成 →CSSおしゃれ装飾やJsのコピペしてちょこっと変えたりして使ってみる
• WordPress甘噛み中（本使って勉強中） →現状なんとなく以下略な感じ

WordPress難しすぎて脳みそが爆発しそう。
頑張らないといけない…。
正直こんな勉強方法であってるかどうかもわからない。
確実に言えるのは何となくはわかる…ただそれだけでは意味が無いので確実に理解そして応用できるようにならねば。。。

道は険しい、ゲボでそう()

記事の概要

私が開発したWebアプリ（ポートフォリオ）の解説をします。
開発にいたる背景から、作成手順、機能、工夫したところ、課題などをまとめました。

開発したWebアプリはEventRunnerにて公開中。

以下のテストユーザーでログインできます。↓↓
アドレス ：test0001@gmail.com
パスワード：test0001

開発に必要な設計書や要件定義書は以下のリンクからご覧ください。
GitHub
設計書URL

開発の背景

私は、学生の頃から兵庫県に拠点を置く、ボランティア団体に所属しています。
この団体では、2ヶ月に1回のペースで、行事（地域奉仕活動やワークショップなど）が行われます。

それらの行事への参加者を募るために、毎回SNSで情報を共有し、出欠をとり、参加者をSNSグループに招待し、運営していました。

これが、かなり手間で、特に取りまとめする人「リーダー」の仕事量がかなり多く大変でした。
（私は、この「リーダー」の経験があり、とても大変だったと記憶しております）

行事の情報収集や参加表明などができるプラットフォームがあり、
「個人で、情報収集や登録などができれば良いなぁ〜〜〜」と思い、
イベントの参加や登録ができるWebアプリを作ってみることにしました。

また、Web系開発企業のバックエンドエンジニアへの転職を考えていたので、
このアプリを転職活動のポートフォリオとすることに決めました。

目的

• PHPを用いたWebアプリケーション開発経験を積む
• フルスクラッチ開発によってWebアプリの基本的な構成、動作を知る
• Webの仕組みの理解を深めて、自分の言葉でWebについて説明できるようになる
• 企画〜開発〜運用までを経験することで、アプリケーション開発の流れを掴む
• 成果品はポートフォリオとして、転職活動で使う
• 開発アプリによって所属団体の行事運営の円滑化を計る

スペック （as of 2020/08/01）

言語
PHP 7.2.31

DBMS
MySQL 7.4.6

CSSフレームワーク
bootstrap4

開発環境
MacOS Catalina 10.15.6
Apache 2.4.41

バージョン管理
Git 2.27.0

本番環境
Conoha

主な機能

• 開催イベントの登録
  開催される基本情報を登録・公開することができる（開催場所・時間・概要など）。

• 参加表明
  ログイン済みの参加者が、「出席」ボタンを押すと、参加者として登録される。
  また、参加の取り消しをすることもできる。

• トップページでは、本サイトの使い方を簡単に記載しておく

• マイページで参加予定のイベント詳細情報が閲覧できる

• 絞り込み検索ができる
  新着・定員数で絞り込み検索ができる

テーブル設計

以下の通り、テーブルを設計した。
ゼロからテーブル設計するのは初めてだったため、解説動画や解説サイトで情報収集し、行った。

会員テーブル（users）

No	カラム名	カラム名（日本語）	型	必須	AI	主キー
1	user_id	会員ID	integer	Yes	Yes	Yes
2	name	名前	string	Yes
3	email	メールアドレス	string	Yes
4	password	パスワード	integer	Yes
5	img	写真	string	Yes
6	introduction	紹介文	text	Yes
7	status	会員ステータス	integer	Yes
8	create_datetime	登録日時	datetime	Yes	Yes
9	update_datetime	更新日	datetime	Yes	Yes

開催場所テーブル（location）

No	カラム名	カラム名（日本語）	型	必須	AI	主キー
1	location_id	開催箇所id	integer	Yes	Yes	Yes
2	location	開催箇所名	string	Yes
3	address	住所	string	Yes
4	create_datetime	登録日時	datetime	Yes	Yes
5	update_datetime	更新日	datetime	Yes	Yes

イベントテーブル（events）

No	カラム名	カラム名（日本語）	型	必須	AI	主キー
1	event_id	イベントid	integer	Yes	Yes	Yes
2	user_id	会員ID（主催者）	integer	Yes
3	location_id	開催箇所id	integer	Yes
4	event_name	題名	string	Yes
5	introduction	説明文	string	Yes
6	date	開催日時	date	Yes
7	time	開催時間	time	Yes
8	create_datetime	作成日時	datetime	Yes	Yes
9	update_datetime	更新日時	datetime	Yes	Yes

参加者テーブル（paticipants）

No	カラム名	カラム名（日本語）	型	必須	AI	主キー
1	paticipant_id	参加ステータスid	integer	Yes	Yes	Yes
2	user_id	会員ID	integer	Yes
3	event_id	イベントID	integer	Yes
4	create_datetime	作成日時	datetime	Yes	Yes
5	update_datetime	更新日時	datetime	Yes	Yes

開発手順

1. 要件定義

まずは、開発するWebアプリの全体像を把握するため、以下のドキュメントを作成。

• アプリ概要
• 機能一覧
• テーブル設計書
• スケジュール

実際に、作成したものを以下のリンクからご覧ください。

設計書URL

アプリ概要には、開発にいたる背景や目的などをまとめた。

機能一覧には、Webアプリにつける機能をまとめた。

実際に、クライアントから依頼があったという想定で、進めるためスケジュールを作成。
納期まで、「2週間で完成させてクライアントに返す」、と想定した。

2. 環境選定

学習言語がPHPだったため、PHPでの開発を決める。
また、所有するラップトップにLAMP環境を構築したので、その環境を試したかった。
データベースは、スクールでMySQLの利用経験がある、かつ、情報量が多いことを考慮し、選んだ。

（開発途中で、Conohaサーバー内にCloud9を置いたので、開発後期ではCloud9を利用して開発した）

データベース設計

必要機能から、どんな情報を保存するか、それらをどう関連付けて管理するかを考えながらデータベース設計を行った。

コーディング

• MVCモデルで開発をする。 繰り返しのプログラムをなるべく避け、ユーザー関数を利用するなどし、第三者にも理解しやすいソースコードを心がけた。

• まずは、フロント部分を開発し全体のイメージを掴めるように開発した。
  ある程度、全体像が掴んでから、サーバーサイドの開発をした。

• Gitを利用し、バージョン管理
  チーム開発を想定しているので、開発内容をissueで管理した。
  ひとつの課題を終えるごとに、都度、pull request/mergeなどを利用した。

（これは、gitコマンドの練習にもなって、本当によかったと思っています）

CSSフレームワーク実装

PHPを書くことに集中するため、
CSSフレームワーク「Bootstrap4」を使用し、フロントは最小限の労力で実装した。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

本番環境へ（Conoha）

初めてのレンタルサーバーを契約し、作ったWebアプリを公開した。

SFTPとして、FileZillaを使用した。

公開鍵を設定し、セキュリティを高めた。

バージョン管理

GitHubにソースコードをシェアした。

工夫したところや感想

開発直後は、MVCの考え方を理解できずなかなか進まなかった。。。
どうなることかと心配したが、納期に間に合うように開発することができた。

工夫したことを以下に記録する。

実際の現場に近い状況で開発
実際の開発現場に近い状況で取り組みたかったので、開発に取り掛かる前に、
スクールのメンター先生に、現場の開発の流れを事前に情報収集し実行した。

メンター先生からのアドバイスとしては、以下があった。

• フロント画面を先に作成し、客先承認をもらう。承認をもらったフロント部分には、PHPをなるべく書かない。
• グループ開発なら、GitHubでバージョン管理（pull request/mergeなど）する。
• グループ内の情報共有はSlack。

Gitでバージョン管理
グループ開発を想定し、gitHubでバージョン管理した。
開発中に遭遇した課題に対して、都度issueを発行し、その課題を解決することを目指した。

積極的にGitコマンドを利用することで、苦手だった、黒い画面でのやりとりへの苦手意識が少なくなった。

サーバー契約し、実際に公開する
当初は、一般公開までするつもりはなかった。
「自分のPCの中だけで、運用できて、ポートフォリオ になればいいなぁ」
くらいに考えていた。

開発していくに連れて、作ったWebアプリに愛着が湧いてきて、
「本番環境に置いて、みんなに見てもらいたい」
と思うようにり、

結果的には、サーバーを契約していた！！！

本番環境に置いたことで、web全体の仕組みの理解を深めることにつながったように思う。

開発後期では、Conohaサーバー内にCloud9を置いた。
それにより、直接サーバーのディレクトリを編集することができたので、作業が捗った。

実際に抱えている問題を解決する
やるなら、自分の身の回りにある課題を解決できるようなシステムを作りたいと思った。

10年近く所属している、団体で感じていた悩みから、このテーマを思いついた。

まだまだ、実運転するには、問題があるので、今後も継続して小さな問題点を解消していきたい。
実際に、使えるアプリになるまで作り込んでいきたい。

その他

スクールで学んだことを盛り込んだWebアプリができた。
ものづくりの楽しさに触れられたのが、一番大きな収穫だったと思う。

実際に開発したことで、Webの仕組みについて、理解が深まった。
レスポンスやリクエスト、サーバーや、IPアドレスなど、
言葉としてしか理解できていなかったことが、実体として理解することができた。

学習してスキルを身につければ身につけるほど、より洗練されたモノが作れるようになることが、
本当に、楽しい。

一方で、自分の苦手とすることや、今後の課題が明確になった。
以下で、課題について記述している。

課題点と今後の展望

• フィードバックもらった箇所を改修する
  所属している団体の友人に、実際に使用感をフィードバックしてもらった。
  （フィードバック内容は、要件定義書の「今後の課題」に記載。）
  継続して、開発していく。

• ひと昔前のWebサイトのよう。。。
  Bootstrapの力を借りて、なんとなく良い感じにできているが、、、
  PHPを書くことに集中しているため、フロントがダサい。。
  JavaScriptを学び、動きのあるWebアプリに改修していきたい。

• 本当は、もっと実装したい機能がたくさんある。例えば、登録したイベントを編集できる機能とか、会員同士の友達登録（フォロー）など、、、、
  それらを実装していく

参考文献

HTMLクイックリファレンス
サル先生のGit入門
データベース設計入門#3 テーブル設計の手順【実戦形式で解説】

---

最後まで、読んでいただきありがとうございます。

どうも、7noteです。flexboxは便利ですが、たまに思い通りにならないパターンの解決方法を書いていきたいと思います。

今回はflexboxを使った4列（3列でも可）での方法になります。
5列以上の場合はまた後日、記事書く予定です。

こんな時、flexboxが便利ですが、、、

↓こんな配置をしたい時、、、
ーーーーーーーー
■　■　■　■
■　■　■　■
■　■
ーーーーーーーー

style.css

ul {
    display: flex;
    justify-content: space-between;/* 横方向に等間隔に並べる */
    flex-wrap: wrap; /* 子要素が横にはみ出たら改行させる */
}
ul li {
    width: 1em;
}

しかし、実際これをしてしまうと、こうなります。↓
ーーーーーーーー
■　■　■　■
■　■　■　■
■ 　　　 　 ■
ーーーーーーーー
一番下の行がjustify-content: space-between;の影響で、左右に配置されてしまいます。

改善する方法

疑似要素（::before,::after）を使うことで解決できます！

style.css

ul {
    display: flex;
    justify-content: space-between;/* 横方向に等間隔に並べる */
    flex-wrap: wrap; /* 子要素が横にはみ出たら改行させる */
}

/* 追記 */
ul::before {
    content: ""; /* 疑似要素には必ず必要 */
    display: block; /* 横幅を指定するためにブロック要素にする */
    width: 1em; /* liの要素と同じ横幅にする */
    order:1; /*beforeはデフォルトでは順番が先頭にくるので、順番を後ろにもってくるためのもの */
}
ul::after {
    content: ""; /* 疑似要素には必ず必要 */
    display: block; /* 横幅を指定するためにブロック要素にする */
    width: 1em; /* liの要素と同じ横幅にする */
}
/* 追記ここまで */


ul li {
    width: 1em;
}

結果は・・・
ーーーーーーーー
■　■　■　■
■　■　■　■
■　■　□　□ 　　←□はbeforeとafterです。高さがないので目には見えない要素。
ーーーーーーーー

目には見えないbeforeとafterが順番の最後にくることで、最後の2個と、before,afterの計4つが均等に並ぶことで、綺麗に最後の行を左寄せに並べることができます。
4列（3列）の場合は、要素が何個だった場合でも綺麗に左寄せにならべることができます。

まとめ

flexboxは手軽に配置を指定できるので、多用しますが、しっかりと特性を理解しなければ思いもよらない表示崩れに繋がるので、特性を理解して使い所を間違えないようにしたいですね。

おそまつ！

（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）

widthの最短・最長を指定できるmin-width・max-widthはレスポンシブな画面を作成する際によく使われるCSSプロパティです。

今回はmin-widthとmax-widthの具体的な利用シーンについて紹介をします。

min-widthの使いどころ

min-widthとは要素の最短幅を定義するCSSプロパティです。
以下では具体的なmin-widthの利用シーンについて紹介します。

要素が狭くなりすぎないように最低限の幅を確保したい場合

相対値でwidthの指定をしている場合、画面が狭くなれば要素も狭くなります。

例えば画面幅に応じてテキスト幅を変更するデザインの場合、画面が狭くなりすぎるとデザイン崩れを起こす可能性があります。

以下にデザイン崩れが起きるサンプルを用意しました。

See the Pen minwidth-before by Toshiharu Nishina (@nishina555) on CodePen.

このような場合はmin-widthで固定幅を指定して必要最低限の幅を確保します。

以下のサンプルではmin-widthを設定しているため、画面を狭くしても途中からテキスト幅の縮小が止まります。

See the Pen minwidth-after by Toshiharu Nishina (@nishina555) on CodePen.

画面が狭いときに要素が小さくなりすぎるのを防ぎたい場合

要素を相対値で表現する際に起こるケースです。

相対値で画像を表示する場合、『PCだとちょうどよかった画像のサイズがスマートフォンだと小さすぎる』といった問題が生じる可能性があります。

以下に画像が小さくなりすぎてしまうサンプルを用意しました。

See the Pen minwidth-2-before by Toshiharu Nishina (@nishina555) on CodePen.

このような場合はmin-widthで固定幅を指定して要素が小さくなりすぎるのを防ぎます。

以下のサンプルではmin-widthを設定しているため、先ほどとは違い途中で画像の縮小が止まります。

See the Pen minwidth-2-after by Toshiharu Nishina (@nishina555) on CodePen.

max-widthの使いどころ

max-widthとは要素の最長幅を定義するCSSプロパティです。
以下では具体的なmax-widthの利用シーンについて紹介します。

画面が広い時に要素が大きくなりすぎるのを制御したい場合

相対値でwidthの指定をしている場合、画面が広くなれば要素も広くなります。

相対値で画像を表示する場合、『スマートフォンで見るとちょうどよかった画像のサイズがPCだと大きすぎる』といった問題が生じる可能性があります。

以下に画像が大きくなりすぎてしまうサンプルを用意しました。

See the Pen maxwidth-1-before by Toshiharu Nishina (@nishina555) on CodePen.

このような場合はmax-widthで固定幅を指定して要素が大きくなりすぎるのを防ぎます。

以下のサンプルではmax-widthを設定しているため、先ほどとは違い途中で画像の拡大が止まります。

See the Pen maxwidth-1-after by Toshiharu Nishina (@nishina555) on CodePen.

要素が画面からはみ出さないように制御したい場合

画像などのサイズを固定値で表現する際に起こるケースです。

画面が狭くなりすぎると画像が要素からはみ出してしまい、デザイン崩れを起こす可能性があります。

以下にデザイン崩れが起きるサンプルを用意しました。

See the Pen maxwidth-2-before by Toshiharu Nishina (@nishina555) on CodePen.

画像が要素からはみ出すということは、画像サイズが相対比で100%以上になっているということです。

このような場合はmax-wdth: 100%を画像に指定して、相対幅が最大でも100%、つまり画像が要素からはみ出ないようにします。

以下のサンプルではmax-wdth: 100%を設定しているため、画面が狭くなっても画像が要素からはみ出さないようになっています。

See the Pen maxwidth-2-after by Toshiharu Nishina (@nishina555) on CodePen.

元の画像サイズより大きくさせないようにする場合

imgタグはwidth: 100%を指定すると、元画像のサイズ以上であっても要素の幅に比例してサイズが大きくなります。

以下に画像が画面幅に応じてどこまでも大きくなっていくサンプルを用意しました。

See the Pen maxwidth-3-before by Toshiharu Nishina (@nishina555) on CodePen.

imgタグにmax-width: 100%を指定すると最大でも元画像のサイズまでしか拡大されないようになります。

以下のサンプルではmax-width: 100%を指定しているため、先ほどとは違い途中で画像の拡大が止まります。

See the Pen maxwidth-3-after by Toshiharu Nishina (@nishina555) on CodePen.

まとめ

以上でmin-widthとmax-widthの具体的な利用方法について紹介を終わります。

• max-widthは最低限の幅を確保したいときに利用する
• min-widthは幅が広がりすぎないように制限したいときに利用する
• スマホ画面だと画像が小さすぎる場合はmin-width
• PC画面だと画像が大きすぎる場合はmax-width

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです！

はじめに

初Qiitaです。
@CJ3さんの投稿に感化されて、書いてみました!
DAY2で黒澤さん(@kurosawa_kuro)に頂いたお題を、少しアレンジしました。

Qiitaの書き方については、　
Qiita Markdown 書き方 まとめ　を参考にさせていただきました。
(見出しのつけ方、コードの挿入方法、リンクの挿入方法、画像の埋め込み、引用の方法、
文字の修飾(太字))

DAY1に登場したChromeデベロッパツールのConsoleで
コードをEnterで実行した後に訂正したり一部削除したりする方法がわからなかったので
そのことを材料にして、ホームページを作りました。

材料

【知りたいこと】
Consoleでコードを書いてEnterで実行した後に、書いたコードを訂正する方法
【やったこと】
「Chrome Console 訂正」「Console 実行したあと」等、
GoogleとQiitaで思いつくワードを検索にかけた
【結果】
恥ずかしながら、答えを見つけることができませんでした。
改行時にShiftを押し忘れて、Enterのみを押してしまうパターンが多いです。
コードを最初から書くことになり、困っています。

上記の材料をHTMLでホームページにまとめる

①構成を考える

1.「全部入り」の表示画面を見ながら、
　 どこにどんな文章&画像を入れるか考える
2. ノートに1.を手書きで書き出す　（ざっくりと）

②画像を準備する

Consoleの該当画面を保存する。
1.該当画面を開き、説明に必要な部分を画面コピー　[PrtSc]
2.ペイントに貼り付け
3.必要な部分のみトリミング
4.デスクトップに作ったhtmlファイルに名前をつけて保存
　（名前＝ 画面1.png、画面2.png、画面3.png)
（保存先＝ デスクトップ　>　htmlファイル）

③メモ帳にHTMLをコピペ

1.メモ帳に資料(＝黒澤さんの限定共有Qiita「基礎学習 HTML編 〜HTML + CSS + JavaScript + FirebaseによるTodoアプリ〜」) の「全部入り」のコードをコピぺ

④bodyの中身を変更

1. ①の構成をもとに、bodyの文章を自分の言葉にしていく

・追加で使用したタグ

<br>…改行
(自分用メモ：↑の<br>をQiita記事に表示させたいときは<br>の前に[ \ ]を入力する)

・メモ帳で便利だったショートカットキー

[Ctrl]+[S]…上書き保存

⑤画像を変更(②の画像にする)

1.画像の保管場所、HTMLへの画像の貼り付け方について、
　こちら(→　HTMLでimageタグを使って画像を表示する方法【初心者向け】　)
　の記事を参考にしました。
　解説動画もあり、わかりやすかったです。

この記事のなかで、alt属性 について下記のように解説されていました。

〇 alt属性の説明

目の不自由な方のための読み上げ機能において、何の画像であるかを読み上げます。また、Googleなどの検索エンジンもこの属性で何の画像か判断します。

目の不自由な方も読む(聴く)画面なのだということ、忘れてはならない視点だなと感じました。

・追加で使用したタグ

<title>…マウスカーソルを画像に合わせると画像やリンク先のタイトルを表示

全部入り

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTMLチャレンジ</title>
  </head>

  <body>

    <h1>【知りたいこと】</h1>
    <p>
        Consoleでコードを書いて[Enter]で実行した後に、<br>
        書いたコードを訂正する方法<br>
    </p>
    <p>
        以下の画面、左から<br>
       「コードを記述」→「Enterで実行」→「右クリックしても「削除」の選択肢は無い」
　　</p>
　　<p>
       <img src="画面1.png" alt="コードを記述"　title="コードを記述" width="350" height="250">
       <img src="画面2.png" alt="Enterで実行" title="Enterで実行" width="350" height="250">
       <img src="画面3.png" alt="右クリック" title="右クリックしても「削除」の選択肢は無い" width="350" height="250">
    </p>

    <h1>【やったこと】</h1>
    <p>
      GoogleとQiitaで検索<br>
      (Chrome Console  訂正」「Console  実行したあと」等)

    </p>
    <h1>【結果】</h1>
    <p>
      <ul>
        <li>恥ずかしながら、答えを見つけることができませんでした。</li>
        <li>「改行時に[Shift]を押し忘れて、[Enter]のみを押してしまう」というパターンが多いです。</li>
        <li>そうするとコード全てを消去して書き直すことになるので、困っています。</li>
      </ul>
    </p>
    <a href="https://sites.google.com/d/1OYmJ3-RmiskUwphCd-8a0w1KHyXpaqeE/p/12z4WyW3e0GxYDDczzMg3DF7qEs-tTKGf/edit">会津わろ法則３回コース</a>
  </body>
</html>

完成画面

振り返り

今回はコードをコピペ→アレンジという流れで作っていきました。
次回は改めて、自分でコードを書いてみようと思います。

出来上がった画面を見て、改行や見出しの大きさ、画像の並び方等、
「もっと見やすくしたい！」と思う箇所が多々ありました。
次回(？)触れるであろうCSSを使って、改良したいです。

あと、自分の文章力の無さを痛感しました。
文章にすることで、理解しきれていない部分に気がつけるので、
わかりやすく説明できるようQiitaで練習したいと思います。

えいや！と記事にしてしまいましたが、
色々間違っていたら、教えてもらえると嬉しいです。

材料にしたConsoleで訂正する方法は、未だ解決方法が見つかっていません。
解決次第、またQiitaに投稿してみます！

2020/8/3：記事の設定を「限定共有」から「公開」に変更。

参考

Qiita Markdown 書き方 まとめ
【Qiita】記事で挿入した画像に枠線をつける方法
HTMLでimageタグを使って画像を表示する方法【初心者向け】