20220113🐱
【初期トレーニング6】
今回はclassタグとレイアウトをした。
classタグは同じセレクタだけど違うスタイルにしたいときに使用する。
①まずhtmlでクラス指定をする
<div class="navigation">
<h1>タイトル</h1>
<p>文章</p>
<div>
<div class="main">
<h1>タイトル</h1>
<h2>タイトル</2>
<p>文章</p>
</div>
②次にCSSで個別規定を行う
div.navigation {
text-align : center ;
}
div.main {
text-align : right ;
}
class名である" "内の言葉は自分で指定することができ、1ページ内で何度も使うことができる。利用制限はないが、class名を指定する際は使える文字の制限と命名のルールがある。
・半角英数字、ハイフン、アンダーバー が使用可能。
・頭文字はアルファベット にする
(要素に名前を付けるにはidというタグもあるがidは1ページ内で2つ同じ前をつけることができない)
レイアウトはデベロッパーツールから確認することができる。(ctrl+shift+I)
・margin(マージン) 一番外側の余白
・border(ボーダー) 枠
・pudding(パディング) 内側の余白
値の指定はpx(実数指定)、%(パーセンテージ)、auto(幅・高さを状況に応じて自動設定)がある。パソコンでの閲覧とスマホでの閲覧は画像などのサイズが変わってくることがある。その場合は％を使うとよい。margin-top、margn-right、margin-left、margin-bottomのように個別に指定することもできる。
キャッシュとCookie
キャッシュは閲覧した"ウェブページの情報”を一時的に保存する仕組みのことで、よく閲覧するページの表示スピードが上がるというメリットがある。反対に、ウェブページの更新があっても最新版は表示されずに更新前のキャッシュデータが表示されるというデメリットがある。(今回自分が指定したCSSの内容が反映されなかったが、その原因はキャッシュが残っていたから)アプリなどにもキャッシュデータがあるため使用頻度の低いアプリなど定期的にキャッシュの消去を行うことで端末の動作が早くなる。
Cookieはウェブページを閲覧した"ユーザー情報"を一時的に保存する仕組みのこと。会員登録が必要なサイトなどでログインが保持されていたり、IDとパスワードが入力されたままになっていて『ログイン』をクリックするだけの状態などはCookieにより可能になっている。ウェブページを閲覧しているときに表示される『Cookieを有効にしてください』というメッセージは言い換えると『入力内容の保持を承諾してください』という意味になる。
20211222🐱
【初期トレーニング5】
今回からcssに入った。
まずディレクトリに新規ファイルを作り、<head>タグ内に
<like rel="stylesheet" type="text/css" href="./style.css"/>
と入れるとstyle.cssが適用される。
<div>を使って入れ子構造を作った。
<div>
<h1>タイトル</h1>
<h2>見出し</h2>
<p>文章</p>
</div>
スペースを入れることで要素の上下関係が明確になり、綺麗なコードが書ける。(Tabキー・スペースキー)複雑なサイトはコードが綺麗に書かれているのでひとまとまりがわかりやすい。
前回からdivについての説明はあったが自分でしていないのでなんとなく理解に欠けている部分があった。今回実際にやってみてサイトの見やすさに驚いた。タイトル、見出し、文章で文字の太さと前後の文章の幅（？）が変わるだけで全然違う。
次にCSS。CSSとは"Cascading Style Sheets"の略で、ウェブページのスタイル(フォントサイズやカラーなど)を指定するための言語。CSSを使わないと文字がただ並んでいる簡素的で、見にくいサイトになってしまう。
色の指定。
h1{
color : red ;
}
h1などの指定する要素の事をセレクタという。文字色はred、blueなど以外にも色コードを入れることもできる。
来週中にフォントの変更をする！！
<表の作り方、画像の切り替え>
課題で出されていた表の作り方と、マウスを置いたら画像が切り替わる方法について。
まずは表の作り方。
<table border="1"> ・・・"1"はテーブルの枠線の太さ
<tr> ・・・trはテーブルの行()
<td>セル</td> ・・・tdはテーブルの列
</tr>
</table>
trは「Table Row」の略。表の行をひとつ作成する。tdは「Table Date」の略。表のデータとなるセルをひとつ作成する。
次に画像の切り替え。
<img src="./img/image1.jpg"
onmouseover="this.src='./img/image2.jpg'"
onmouseout="this.src='./img/image1.jpg'">
❕シングルクォーテーションとダブルコーテーションがあるので注意する。
上の赤文字の後にwigth="360px"height="480px"という画像サイズ変更の指示を入れることで2枚の画像の大きさをそろえることができる。
今回は特に手こずることなく出来た。マウスを置いた時の画像切り替えを確認したら、サイトがちかちかがくがくなってしまったが、入力をミスをしていたのにすぐに気付けたので良かった。
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:~はタグに挟んだだけだった。
今回は2通りやってみた。青字にしたタイトルのところに"東京ディズニーリゾート"と入れると1つ目のようになり、"https:~"というURLを貼ると2つ目のようになる。これは用途によって使い分けたらいいのかなと思った。
回数重ねて気付いたことはこまめにアップロードする！！こまめにやってたら気に入らなくてもすぐに手直しできるし、どこで間違えているか気付きやすい。
20211208
【目的】
今回は現状を整理し、次にインタビューをするfreeeさんとインフォバーンさんへの質問を考え、なぜ私たちは企業の方にインタビューすることにしたのか。FEZさん、freeeさん、インフォバーンさんという3社を選んだ目的は何なのかについて話し合った。
FEZさんのインタビュー後、ずっと頭の中がもやもやしていた。自分たちの聞きたかったことは何なのかがはっきりと定まっていないふわふわした状態で質問を考え、インタビューに臨んでしまったことが原因だと思う。今回も初めのほうは各々が思っていることや考えていることについて出し合ったが結局話の着地点が見えなかった。
先生から私たちはインタビューの目的が定まっていないと言われ、上の画像のような内容で私たちの現状について説明してくれた。そして目的が定まっていないと自分たちの聞きたいことと結果のズレに気付けないと言われてすごく納得した。こうやって可視化されたことで自分たちが企業さんから聞けていない内容と、最終目標である成功事例のパターンを見つけるために聞かなければいけない内容がわかった。
これをふまえて、freeeさんには「B to Bのデジタルマーケティングについて」、インフォバーンさんには「B to BとB to Cの違いについて」「中小企業のB to Bデジタルマーケティングのパターンについて」、成功事例のパターンを見つけるために両社に「アプローチの仕方や上手くいった方法について」聞こうという大まかな目的が定まった。あとは自分たちの聞きたい内容が引き出せるように、目的に沿った質問を考えるだけ。二度目はないから事前準備をしっかり行う。
答えがない課題って難しいなとゼミのたびに思ってる。
20211207🐱
【初期トレーニング3】
今回はサイトの背景の色や文字色の変え方について教えてもらった。
<body>タグにカラーコードを入れて<body bgcolor="#f5fffa><body>と入力すると背景に色が付く。カラーコードは「原色大辞典」を参考にした。（#f5fffaはミントクリーム！）
Web上での色を表すカラーコードには16進数が使われており、数字が多いと原色に近付き、アルファベットが多いと白に近いパステルカラーになる。
文字色は<font color="#ffffff">文章<font>で変えることができる。
<タグ>
<b>太字</b>
<strong>文字の強調<strong>
<i>斜体</i>
ワードやパワポ、エクセルを使っているときは色の変更も字体の変更もすごく簡単なのでそれが当たり前になっていたけど、実は凄いことなのでは？とこのブログを書きながら思った。
<ページのソースと検証>
Webページのソースコードの見方も教えてもらった。内容が複雑すぎて正直理解はできなかったけど、検証を使うとそのタグで構成されているところが表示されたりして見ていて面白かった。”検証”という名前の通り、こっちの言葉のほうがいいかなとか試せるのも面白かった。
20211130🐱
【初期トレーニング2】
今回はサイトの作り方を教えてもらった。
Visual Studio Codeでコーティングを行い、ffftpでアップロードをした。
<>のことをタグといい様々なタグを組み合わせることでサイトがつくられている。タグの羅列は以前動画のプログラムで見たことのある並びだったので「こうやって組み合わさっているんだ！」と勝手に感動していた。
10行ほどタグを記入しても実際に反映されたのは<p>お腹すいた</p>というたった一言だった。世の中に発信されているサイトなどは色が付いていたり、写真が挿入されていたり、文字のサイズやフォントも異なっているため、もっと複雑なプログラミングが行われているのだろう。
＜ショートカットキー＞
コピー&ペーストは私自身よく使うショートカットキーだったのですでに知っていたが、その他のものは初めて使った。
・ctrl+Z (元に戻る)
・ctrl+Y (元に戻した操作をやり直す)
・ctrl+X (切り取り)
・ctrl+A (全選択)
・ctrl+tab (右のタブに移動する)
・ctrl+tab+shift (左のタブに移動する)
・fn+f5 (ページの更新)
ついついマウスに頼りがちになってしまうが沢山ショートカットキーを使って慣れ、パパっと作業できるようになりたい。
20211125
記憶が薄れる前に今日のインタビューの振り返り✑
FEZさんはデジタルマーケティングのコンサルタントということもあるかもしれないがB to Cにおいて一般消費者にデジタルを介してどのようにアプローチするかという話が多かった気がする。
私たちはB to Bにおいて製品のアプローチから商談、購入に至るまでのすべてをデジタルで行っていると決めつけていた気がする。(私だけかもしれないけど)だからB to Bにおいてのデジタルマーケティングはあくまできっかけ作りに過ぎないと言われたときにデジタルマーケティングはひとつの手段として使われているだけで自分の中でB to Bのデジタルマーケティングについて認識のズレがあったことに気付いた。
デジタルマーケティングを取り入れるうえで困難なこととして「考えが浸透しない人に対してどうアプローチすればいいか」ということが挙げられていた。これは私たちが話し合っているときにも度々出てくる疑問であり、課題でもあった。テレビCM分の何割かをデジタルマーケティングに回したり、何回もアプローチし続けたりしていると言っていた。
今回初めて企業の方にインタビューする機会を頂いた。企業の方とお話しするのも進行をするのも初めてでテンパってしまう時もあったが、進行しますと言った自分をまずは褒めてあげたい。私はなんでも完璧に、上手くやろうとする癖がある。そのわりに上手くいかないことのほうが多く、今回も自分の中の理想と現実の差で落ち込むのが目に見えていた。しかし最近は、ラジオでもちらっと話したように失敗できるのは学生のうちまでだと思ったら今のうちに沢山失敗して経験してなんぼなのでは？という考え方に変わってきた。時間配分があんまりわからなくて前半に詰め込みすぎた気がする、反省…。
初めてのインタビューで参考にできるものがない中、右も左もわからないのに太宰ゼミの方も参加していて緊張とプレッシャーが半端なかったけどみんなに流れの確認やアドバイスをもらったり、先生にも助けて頂いてなんとか無事に終われてよかった。
次はfreeeさんのインタビューがあるのでもっと深いとこまで聞けるように準備したい。
明日はご褒美にスタバの新作飲む😽❕
