20211214🐱

【初期トレーニング4】

 

今回は画像やテキストの動かし方、リストの作成、コメントアウトYouTube動画の埋め込みをした。

 

画像やテキストを動かすときは<marquee>テキスト</marquee>、<marquee><img src="./img/xxx.png"></marquee>と入力する。これを入れることによって画像やテキストが右から左に流れていく。(電車の時刻表の電子黒板?みたいな流れ方)

 

リストを作るときは<ol>か<ul>というタグを使う。

<ol>

<li>あいうえお

<li>かきくけこ

</ol>

<ol>を使うと、サイト上で"1.あいうえお 2.かきくけこ"のように<li>のところに番号が付く。

<ul>

<li>あいうえお

<li>かきくけこ

</ul>

<ul>を使うと、"・あいうえお ・かきくけこ"のように<li>のところに・が付く。

 

サイト上には表示されないがメモや説明を書きたいときはコメントアウトを使う。<!--コメントは表示されない-->と入力する。私たちが普段見ているサイトにもコメントアウトは多く使われている。(いろんなサイトを見てみたけどサイトの管理における伝言みたいに使われている気がする。外野にはよくわからなかった。)

 

YouTubeの埋め込みをしたい場合は、埋め込みたい動画ページから共有→埋め込み→コードのコピー→bodyタグ内に貼り付けで出来る。埋め込みをクリックして"動画が再生できません"と出たら、埋め込みは出来るがサイト上での再生は出来ないため閲覧者はアプリに移動しなければいけない。

 

<画像とURLの挿入>

 

課題?として出されていた画像の挿入とURLの貼り付けをしたときに手こずったので記録😵💫

まず画像の挿入。imgのディレクトリ名やタグ、画像の名前変更は間違っていないのに画像が挿入されなかった。ネットで調べたり、自分のフォルダを色々見てやっと原因が分かった。私は名前変更をした画像を他のディレクトリに保存していたため、imgディレクトリに何もないという状態だった。アップロードの際も、imgディレクトリではなくインターン用の全体ディレクトリにアップロードしていた。

・画像の挿入方法

ffftpから自分のディレクトリ内に"img"というフォルダを作る

②作ったimgフォルダ内に添付する画像のファイル名を"image.jpg"に変更しアップロードする(添付する写真が複数枚あるときは"image.jpg"の"image"を変える??)

タグは<img src="./img/image.jpg">

画像サイズを変更する場合は

<img src="./img/image.jpg"width="240px"height="180px">

 

次にリンクを貼る作業をした。貼り付けたリンク先に飛ぼうとすると"404 not found"というエラーメッセージが表示された。リンクを貼るには<a href="URL">タイトル</a>というタグを使う。"URL"のところにhttps:~という自分の貼りたいURLを入れなければいけないのだが、私はこの通りに"URL"と入力してhttps:~はタグに挟んだだけだった。

f:id:xx9701xx:20211213030623p:plain

今回は2通りやってみた。青字にしたタイトルのところに"東京ディズニーリゾート"と入れると1つ目のようになり、"https:~"というURLを貼ると2つ目のようになる。これは用途によって使い分けたらいいのかなと思った。

 

回数重ねて気付いたことはこまめにアップロードする!!こまめにやってたら気に入らなくてもすぐに手直しできるし、どこで間違えているか気付きやすい。