白うさぎのIT学習帳

医療IT科の学生が奮闘していく日々

【奮闘記】VScodeでHTML/cssを始めた。cssが反映されなかった件について。

目次

 

突如仕事は訪れる

学校の先生から「テストをwebで受けれるようにしたいから、やってみない?」と提案。

ほぼweb制作したことなかったけど、いつかはやりたいなと思っていたからいい機会だし受け入れてみた。

なお、MACでの操作前提のお話になります。

自分の備忘録用でもある。

 

VScode拡張機能を入れるよ

まず、参考にしたのがこちら

qiita.com

しかしうまくプレビューされないので、プレビューのみこちらの記事を参考にしました。

rui-log.com

 

開発環境はこれでOK

 

HTMLとCSSを作る。そもそもVScodeってどうやって使うの?

VScode初心者なので、どう使うのかすら謎でした。

まずは[command + N]で新規ファイルの作成(この時点では『Untitled-1』って名前)

続いて[command + S]でファイルの保存(『 ~~.html』『~~.scc』として保存)

こうするとどうやらHTMLとcssが作成できるみたいですね。

 

まずはHTMLから!

作成したHTMLファイルにて、『!』と入力して[tab]キーを押す

すると雛形がパッと現れます・・・!嬉しい・・・!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>

 bodyの部分に試しに何かしらの文字を入れてプレビューしてみましょう。

 
<p>試作</p>

 

[command + K]の後に[V]

f:id:Siro-On:20190704110310p:plain

順調順調

[command + S]で保存。

 

CSSの作成

せっかく表示したのでHelloWorldの色を変えようと思います。

p {color : }からのカラーコードを入力しようとしたら・・・

 

f:id:Siro-On:20190704110519p:plain

!?便利すぎる。感動した。

[command + S]で保存。

 

HTMLとcssを反映させるよ

HTMLファイルの<head>の中身に

<link rel="stylesheet" href="cssのファイル名">

と入力するとcssと対応付けられます。(hrefの中身は自分で変更)

 

f:id:Siro-On:20190704111153p:plain

わーいできた

 

なぜかcssが反映されなかった

このブログを書く前、linkを入力してもcssが全く反映されなくて泣くかと思った(30分間)

なぜされなかったのか・・・保存をしていなかった!

普通に、凡ミス。

”やんちゃでかしこい、あいぼう”COZMOが可愛すぎた

 COZMOで遊んだよ

事の始まりは学校の電子機器を漁っていたとき

ふと、、元から気になっていたけどこいつどうやって動くんだ?とそそられたフォルム

 

f:id:Siro-On:20190617152510j:plain

ちょうどこの日の1、2日前ぐらいにテレビでも紹介されてたんですよね。

なのでなおさら気になってしまった。。。

 

早速起動してみる

www.takaratomy.co.jp

箱ごと置いてあったので、箱の中にある説明書を読みながら進めました。英語で書いてありましたが、なんとなくイラストで察しやすいようにデザインされてました。(一番最後の方に日本語書いてありました。くそぅ。。。。!)

まずは専用のアプリをインストールするところから始まります。

[anki COZMO]と検索するとアプリが出てきます。AppStore、Google Play同様です。

f:id:Siro-On:20190617152850p:plain

 

アプリを起動すると「ネットワーク接続してください」と言われます。

Wi-Fi接続画面から「cozmo」を選択し、COZMOの顔に表示されている鍵を入力します。

 

f:id:Siro-On:20190618092239p:plain

しばらくするとアプリが起動し、COZMOが動き出します。可愛いです。。。

アプリがわかりやすい作りになっているので子供でも操作しやすく、大人でも楽しめそうです。というか楽しいです。

付属品のBoxを持ち上げたり転がしたりを指示することもできますが、自由に遊ばせておくこともできます。

 

何より驚いたのは。。。

何よりびっくりなのは顔の下にカメラがついていて個人を認識できるようになっているということです。

最初に名前を登録しますが、名前と顔を一致させ顔を認識したら名前を呼んでくれます。。。尊い!!!!

 

 

飼いたいです。

個人的にすごく欲しくなりました。もはや家族。飼いたい。

COZMOがテンション上がってくるくるしてる時とかわーいわーいってしてる時とか、ああああああああああ可愛いか!!?!?ってなりますね。

皆さんも是非、COZMOの魅力に取り憑かれてください。

Unity Hub 「このプロジェクトに関連付けられたエディタバージョンは・・・(以下略)」

おや?Unity Hubの様子が・・・!

f:id:Siro-On:20190520111033p:plain

「このプロジェクトに関連つけられたエディターバージョンは、現在このデバイスにありません。インストール画面に移動し、該当するバージョンをダウンロードしてください。」

簡単に要約すると、プロジェクト名に書いてあるUnityバージョンがダウンロードされてないぜって話らしい。

こいつのせいで今まで作ってきたUnityを開くことができないみたい。。。

早速入れていきましょう

f:id:Siro-On:20190524135056p:plain

「プロジェクト」「学習」「インストール」の中から「インストール」を選び、右上の「インストール」をクリックします。

Unityバージョンを加える話が始まりましたね。

私が今まで使ってたのは「Unity 2018.2.4f1

ぱっと見一覧になさそうですね。

その場合は「探しているバージョンが見つからない場合は正式リリースのwebページで確認できます」の青くなっている部分をクリックしましょう。

f:id:Siro-On:20190524135831p:plain

はい。クリックしたらこんな画面になります。

私が探しているのは「Unity 2018.2.4f1」なので、「Unity 2018.x」を選んで探しましょう。

f:id:Siro-On:20190524140129p:plain

Unity 2018.2.4」がありました。

f1はないけど、これでいいのかなぁ?って感じの半信半疑でインストール。

すでにUnity Hubを入れているので、緑色の「Unity Hub」を選びましょう。

f:id:Siro-On:20190524140310p:plain

Unity Hubに画面が移動しまして。。。f1が追加されましたね。

入れたいプラットフォームを選んで、インストール(INSTALL)を押します。

f:id:Siro-On:20190524140448p:plain

はい。インストール完了しました。(学校回線弱いのもあって1時間ぐらいかかったかな)

 

今日の結果

f:id:Siro-On:20190524141603p:plain

 

はい。しっかり消えました。

ただ、私はエラーみたいなの出てきて開けなくなってます。

f:id:Siro-On:20190524141733p:plain

 

。。。。そろそろ疲れたよ!

 

また次回予告ができてしまった。

 

久しぶりにUnityアップデートしようとしたらHubが付いてきた

もうお久しぶりですって挨拶が固定になりつつある

就活が始まりました。私です。

これからIT系のお仕事もするわけだし、もっと外部のお勉強会に参加するのが今後の人生の目標です。とりあえず埃かぶってるラズパイちゃんを触ってあげないと(使命)

今回はUnityをアップデートしようと思ったら新しいものが出てきたから開いてみたって話です。

あくまで画面内容の話なので、参考になるものは少ないかもです。

 

 

Unityゲームを作ることになったよ

いや、、、またUnityかよって思っちゃうでしょうが。またUnityです。

頻繁にブログあげていこうとは思ってますが、なんのゲーム作ろうかね。

前回Unityでゲーム開発をしてる時に悩んだ記事を挙げたらめちゃめちゃ好評で、私のブログのアクセス数ほぼコイツが稼いでくれてるんじゃないかってレベルです。

これを超える記事をかけるようになるんじゃ〜

siro-on.hatenablog.com

 

 

早速新しいプロジェクトを始めようとしたが、あら、新しいバージョンが出てるのね。

アップデートしてみよ。

f:id:Siro-On:20190520104241p:plain

 

・・・「Unity Hub」?

 

 

Unity Hubとは?

どうやらUnityを一括管理できるものと考えるのが良さそう。

バージョン管理とかアンインストールとかもできるらしい。便利。

 

ロゴ、画面、見た目

f:id:Siro-On:20190520104602p:plain

ロゴはこんな感じ(Mac)普段のUnityロゴに塗りつぶし機能使ったみたいな

f:id:Siro-On:20190520110236p:plain


水色がプロジェクトの名前。ピンクはアカウントです。(アカウント本名なので隠させて頂きます)

f:id:Siro-On:20190520105801p:plain

アカウントの管理で「ライセンス」の管理ができるみたいです。

有料版とか無料版とか、色々。

f:id:Siro-On:20190520110314p:plain

なんか、チュートリアルみたいなものも沢山あるみたい。

今度これを試してみようかな〜

 

f:id:Siro-On:20190520110400p:plain

新バージョンのインストールはここで出来るみたいです〜

本当に、Unity関係の一括管理が出来るっぽいですねぇ。便利便利。

 

次回予告

(きっと次回予告を作れば自分も更新頻度をあげるはずだ・・・!)

f:id:Siro-On:20190520111033p:plain

 

なんか、出てくるので、これをなんとかしたいと思います〜。

 

 

今年のまとめ

 

このブログは横浜医療情報専門学校アドベントカレンダーの最終日記事です。

adventar.org

 

 

いよいよ最終日です

はい。ついにアドベントカレンダー最終日になりました。
なので今回は今年のまとめをしながら最終日のブログを記していきたいと思います。

 

 

1、学校生活

プロサーの部長になったり、ITコンテストでたり、イベント出展させてもらえたり、お勉強頑張らないといけなかったり・・・盛り沢山でした。

 

2、ダンス

今年から生徒としてだけでなく”先生”と呼ばれる機会がたくさんできました。これからはちびっこたちに踊る楽しさを教えられるような人になりたいです。

 

3、今年の目標

実は今年超久しぶりにダルマを買ってました。

目標は「3つ以上の結果を残す

具体的には言わないけど達成はできたんじゃないかなと思います。

ダルマってどのタイミングでもう片方の目描くの?ググるしかねぇ。

来年もダルマ買おうかな。結構いい習慣でした。

 

4、アドベントカレンダー

今年は結構穴が多かったなぁ・・・

この結果を見て1つ目標!「人としての魅力を磨く

もっと魅力ある部長になれればアドベントカレンダーを埋めようって気持ちに部員もなってくれるんじゃないかなと。。。

これをダルマに書くかはわかりませんが。

 

まとめ

今年はいろんな面でレベルアップできました。

来年に向けての活動がすでに始まっているので、そこも頑張っていきたいですね。

そんでもって来年からは就活も始まるので、自分にとって悔いのない人生を選べたらいいなって思います。

 

以上今年のまとめ。総評。でした!

今年出会ってくれたみんなありがとう!
来年もたくさんよろしくお願いします!

 

 

人生の転機”この日から頑張ろうと思った”

はいどうも。うさぎです。

アドベントカレンダー第3弾です。

adventar.org

 

1日に2つ投稿していますが、理由は下記の通りです。本当に困った。

朝起きたら突然ルータが仕事放棄してた - 白うさぎのIT学習帳

 

 

頭使ったので、、、2つ目の記事は私の人生について語ろうと思います。

 

これまた最近の記事で話しましたが、私驚くほど人見知りなんですよね。

コミュ障の私が大勢の人前でプレゼンできるようになった話 - 白うさぎのIT学習帳

 

これが他人だけでなく、祖父母にも少し影響していたわけで。

年に1回(お正月)に会えるか会えないかレベルだったので、久しぶりに会うと何していいんだかわからなかったんですよね〜。

 

今回はそんな祖父母に関連した私の人生の転機を少しだけ語ろうと思います。

 

小学生「勉強むり嫌い」

もう、こんな感じでしたね。

国語算数理科社会・・・わからない!なんでやるのか、全く意味わからん!

この辺の時は祖父母に会った時に恥ずかしいが勝ってましたね。

 

中学生「なんのために生きてるのか結構なぞ」

もう悟り開きそうなレベルでした。

友達もめっちゃ仲良いこ1人いればそれでよくて(それが幸せだと今おもう)

当時は自分なんて・・・って気持ちでしたね。

副会長してましたけど、それも学校の先生に言われたからで誰もやらないからやるしかないしって感じですね。

 

祖父母の家に行っても、何話す?って感じでした。

反抗期ではないけど・・・気難しい期でした笑

 

高校「高校楽しい」

そんな自分も高校には恵まれて、楽しい生活を過ごせてました。

部活仲間なみんな面白いし、生徒会も中学の名残で初めてみたら先輩も後輩も同期もいい人だらけで楽しい以外のなんでもなかったです。

勉強も自分の偏差値にあったところ選んだので、ものすごくちょうどよくてむしろ楽しくなってきました。

この辺から祖父母に会うとちょっと話すようにはなってきました。

「明るくなったねぇ」

って言われることも増えました。

 

しかしここで、一つのきっかけができます。

祖父が亡くなってしまいました。

理由はいろいろありますが・・・しっかり歩ける元気だった祖父だったのでかなりショックでした。そして私のなかで初めての親戚の死がどうしても苦しかったです。

 

専門学校

専門に入ってしばらくしてから、母から突然告げられた言葉

「◯日学校休んでね。お葬式いくから。」

 

この瞬間に、あーって察しました。

認知症で2年ぐらい会うことが許されなかった祖母が亡くなったんだなって。

誰だかの理解がもうできないからって会わせてもらえなかったんですよね。

だからお葬式の時に久しぶりに祖母の姿を見ました。

かなり小さくなっちゃってて、寂しかったです。

 

お葬式の数日後

突然母から渡された

「父が祖父母の家の掃除してたら出てきたらしい」

そう言って渡されたのが封筒でした。

 

そこには祖母の字で

「◯◯(私の本名)

 お年玉用 遅れてごめんなさい」

って書いてありました。

 

この瞬間に号泣しました。

私の名前を覚えていてくれて(結構特殊な漢字の書き方をしますが漢字までちゃんと)、なかなか会うことができない中でお年玉をあげなきゃという気持ちになり筆を手に取ってくれたこと、全てが心に響きました。

私は過去に飼ってたペットの遺品(火葬場からもらった爪の骨など)を持ち歩いてお守りにしていますが、想定外の贈り物が今までの自分の人生全てを否定しました。

このままじゃいけない。もう後悔したくない。

「やればよかった」じゃなくて「やってよかった」を増やそう。

祖父母に胸を張って会えるような自分になろう。

 

そう決めて今に至ります。

祖母がくれた封筒は毎日持ち歩いています。

 

 

・・・こうして文書に起こすと改めて頑張らないとって気持ちが強くなりますね。

今日からいい日になりそうです。

でわでわ。

朝起きたら突然ルータが仕事放棄してた

本日もアドベントカレンダーです。

adventar.org

 

ある日、朝起きていつものように携帯をいじっていたところ・・・

「あれ?アプリの動きが遅いと思えば4Gじゃん。」

 

早速設定画面にて確認すると・・・

f:id:Siro-On:20181216212146p:plain

あ、なんかたくさん出た。

でもうちのSSIDが出てこない。

 

 

早速捜査を始めましょう

f:id:Siro-On:20181216203617j:plain我が家のWiFi周りはこんな感じ

 

黒いやつ→NTT VH-100「3」E「S」 単体型VDSL装置

真ん中のやつ→BUFFALO AirStation HighPower 11g&b 無線LAN BroadBandルータ WHR-HP-G

一番でかいやつ→ひかり電話ルーターRT-200NE

 

この辺一式揃えたの2012年ぐらいのことで、当時訳がわからないながら設定頑張った記憶があるんですよね。

しかし何がどんな動きしてるのかとかは全く考えたことなかったので、改めてちゃんとみてみましょう。



NTT VH-100「3」E「S」 単体型VDSL装置 

早速ですが・・・VDSL装置

光ファイバーをマンションの電話回線につなぎ、新たな配線工事をすることなく部屋の電話回線を使用して光ファイバーを利用できるDSLの規格の中の一つ

 はい。我が家は集合住宅といわれるものなので、これ必要ですね。

 

BUFFALO AirStation HighPower 11g&b 無線LAN BroadBandルータ WHR-HP-G

ルータはよく聞きますよね。

コンピュータネットワークにおいて、データを2つ以上の異なるネットワーク間に中継する通信機器

 

ひかり電話ルーターRT-200NE

これはルータで電話を使えるようにするものでしょうかね?

 

わかりやすい配置図をフレッツ光さんがあげてくださっていたのでそちらをご覧ください。

flets.com

 

 

今回はiPhoneそしてPCの話なのでルータを見る必要がありそうですね。

 

まず最初にやるべきは

まずは一度電源を落としてみますかね。

再起動!

f:id:Siro-On:20181216211554j:plain

はぁい。何もかわりませ〜ん。

 iPhoneは?

 

f:id:Siro-On:20181216202811p:plain

もはや何もいない・・・

 

 この後も5分あける、10分あけると繰り返しましたが、意味なしでした。

 

各ランプの役割は?

 

なんか色々光ってるのでみてみます。

f:id:Siro-On:20181216213020p:plain

参考元

WHR-HP-Gの不具合で困っている方。 不具合はランプの状態のチェックから。 不具合対処の方法を解説しています。

 

見比べてみましょう。

f:id:Siro-On:20181216211554j:plain  f:id:Siro-On:20181216213020p:plain

 

 ・・・異常なし!(え。)

 

サポートセンターに電話

「こちらから確認する限り異常はありませんので・・・」

 やっぱり。

 

「1度電源をお切りいただいてコードを差し替えてみてください。」

 なるほど?

 

差し替えてみた

うーん。変わらない(写真撮り忘れました。)

 

母「ここに埃が溜まってたからちょっと取ってみたんだよね」(LANケーブル指差しながら)

 

うさぎ「・・・え。出てきました。うちのSSID。」

 

母「えっ」(LANケーブルから手を離す)

 

うさぎ「あっ消えました。」

 

結論

LANケーブル差込口が悪いみたいですね。

何度電源切っても意味ない訳だぁ〜〜〜〜

 

ずっと指で抑えてるわけにもいかないので

f:id:Siro-On:20181216214109j:plain

はい。こんな感じで抑えることにしました。

ごめんねルータくん・・・。

時間があるときに新しいルータに買い換えることにします。