ほわぴの旅行日記

旅行大好き!小さな旅行から国内・海外旅行まで。日々のお勉強の進捗など。

ドットインストールをはじめてみました!

今日は朝から気分がさえず、ネガティブ記事を書いては消して…としてました…。

ずっと飲んでいた安定剤が効かなくなり、病院で薬の相談しようかと考えたけど、無理してウォーキングに行ってみたところ、安定剤以上の効果があることを今日も実感できたので、しばらくウォーキング療養しようと思います。

 

今日の景色

f:id:whiteandpeach:20190820224721j:plain

私は昔から運動神経が悪くて、水泳以外の運動はほぼ平均以下っていうかクラスで一番できない人でした。逆上がりできなかったし、50m10秒切れなかった。体育がある日はいやすぎてよく嘔吐してました。走って大差負けして同情でテープ貼ってくれても恥ずかしいだけなんです。たぶんなった人しかわからないと思います。

水泳だけは速い方で、逆に走るのが速い人が遅かったりしたので運動神経関係ないんだと思います。

そんな感じで運動は苦手なので「運動しろ」と言われてもピンとこなかったんですが、大学の時に先輩から「大学まで歩いたらバス代がうくよ」と言われて、大学まで40分かけて歩き始めたのがきっかけで歩く運動を覚えました。

歩くのは遅いので誰かいると申し訳ないんですが、ひとりだと音楽聴きながらもくもくと歩けるところが良いです。

 

今日もbootstrapをずっと勉強してました。

 

今自分の会社で管理しているサイトが5個あるんですが、1件はjimdo、残りは古いDreamweaverで作ったものです。jmdo以外はモバイル対応してないので、それをモバイル対応ページにリニューアルしたいなと考えています。

 

そしてしばらく新規での制作の仕事をストップしていたので、なんとか再開できないかと考えていて、自分の会社のサイトをリニューアル中です。

 

これまで、サイト作りするときはいつも逆引きでやってました。

 

〇〇がしたい→調べる→実行する

 

みたいな。

 

HTMLとCSSでなんとかなってたので、幅を広げずその2つでやっていたけれど、今はいろんな言語が登場してるし、いろいろやってみたいと思うようになりました。

 

それで先に自分の会社のサイトを作りはじめたんですが、前みたいに

 

〇〇がしたい→調べる→実行する

 

では対応しきれなくなりました。

まず、できることが多すぎて何をやってよいかわからない!

もしかしてこんなこともできちゃう??え、こんなことも??

と考えていると進みません。

 

なので、今回は短期集中でWEBサイト向けの講座をサーっと勉強することにしました。以前からudemyではやっていたけれど、ピンポイントの講座が見つからなかったりして困ってました。

今日調べてみたら「ドットインストール」というサイトが、自分がやりたい言語がそろっていたので、短期間でやりきってみようと思います。

bootstrapに絞った講座があるのが良いです。月額980円とのことなので1ヶ月以内でできるだけたくさんつめこみたいと思います。

 

そして勉強した後、すぐに実践に入ることが重要です。

でないとすぐ忘れる…もう若くなかった。。

 

そんな感じで婚活に割いていた時間の穴埋めができそうです。切り替えは早い方が良いです。

Githubを使って毎日プログラミング!

今日からプログラミングの勉強を再開することにしました!

 

好きだった人との一番の共通点だったプログラミング。

プログラミングの話をする人が今までいなかったので、短い期間だったけどすごく楽しかったし、ワクワクしました。そんな話のときだけ表情がすごく自然で自分も自然体でいられて、いろんなプラスな感情が多かったので、思い出すのがつらくてなかなか再開できませんでした。

もうやめてしまおう、教えてもらったことも削除してしまおうかとも思ったのですが、良いきっかけをもらったと思って続けていきたいと思います。

少し成長しました!

 

今日はGithubの楽しみ方という記事をみつけて読んでました。古い記事だけど。

blog.eiel.info

わかりづらいんですが、このグレイのマス目は活動していない日、薄い緑はちょいと活動した日、緑が濃いマスは活動しまくった日となり、緑で埋まるほど頑張ってる証拠となります!

以下は私の記録。

f:id:whiteandpeach:20190817000115j:plain

私はアカウント作成後、しばらく放置してついこの間、はじめて自分のプログラムをアップしてみたところで、まだまだ超初心者です。

Bootstrapがまだマスターできず、やりながら覚えています。

今日久しぶりにちょろっと記述して薄緑になりました!

これから緑だらけになるように、毎日30分でも時間を取りたいと思います!

 

今後はプログラミングの勉強会なんかに参加するとか、何かコミュニティで友達がみつけられないかなって考えています。

一緒にやってくれる人がいたら楽しいだろうなーとか、今後ビジネスとして何か作り上げたいという気持ちもあるので、めげずに頑張っていこうと思います。

github.com

最近の勉強量、プログラミング中心

ここのところ、勉強のこと書いてませんでした。

やめていたわけではありません!!

でも、自宅のPCをかえてから、どちらかというと仕事をしてしまっています…。

blog.whiteandpeach.com

画像解析をしたくて、ちょっと性能の良いPCにしたことで、なんと仕事をしてしまってます…!!

Photoshopがサクサク進んで効率が良いんです!

ちなみにブログもこのPCで書くことが増えました。

その分、勉強時間が減ってしまいました…。

 

f:id:whiteandpeach:20190319000601j:plain

2月にPCがきて、勉強時間が半分以下に減っています…。

反省して3月は少し復活してます。

 

ただ、内容を少しかえました。

姉から

「売り上げに直結しているのか」

と何度か聞かれ、正直「英語」と「AI」の勉強は短期間で売上が上がるものではないことがはっきりしているので、できるだけ自分の仕事の問題解決になるような勉強にかえようと思い、フロントエンジニアのプログラミングを中心に勉強しています。

 

HTML、CSSPHPSQLJavascript、(Python)など。

 

今、知人から頼まれたWEBサイトのみ管理しているけど、リニューアルしていないのですごく古臭くて自分でダサいです。

依頼されたころはまだ、その頃のスタイルだったのかもしれないけど、今はスマホ対応ではないし、PCでの表示も幅が狭いです。

リニューアルの依頼はきていないものの、なんか気に入らないので

「無料でやるのでスマホ対応ページに変更させてください」

と言って、今勉強しながら作っています。

 

そして自分のECサイトも気に入らないので、もう少しカスタマイズできるやり方でかえていきたいと思っています。ECCUBEやWordPressにするとか。

メインは楽天なので、商品紹介程度で大丈夫ではあるけど、念のため買えるようにもしておきたいみたいなサイトです。

 

そして、販売管理を弥生販売でやっているんですが、入力がすごく面倒なので連携するか、自分でシステムを作るかして性能の良いシステムを安く使いたいというのが目標です。

ちょうどよさそうな講座はとりあえず安い時に購入

www.udemy.com

APIを使うと弥生販売と連携できたり、SQLで在庫まとめたりできるんでしょうか、そのへんを深堀していきたいと思っています。

 

ちなみに今、PHPSQLをやってます。

www.udemy.com

講師の方の声がめちゃくちゃ眠くなるので進みが悪いです。。

とても優しいし、わかりやすい良い先生なんですよ!!でも眠い。。

 

難しくてもプログラムうってると慣れてきてできそうな感じがしてきます。

Bootstrapでスマホ対応ページに変換している途中ですが、ほかにもいろいろ方法があったり、年月がたつとガラって変わったりして大変なんですが、ついていけるように頑張ろうと思ってます。

 

そのため、英語、AI、数学はしばらくお休みします。

時々、気晴らしにやるかもー

Adobe Dreamweaver CCをがっつり勉強

以前少し話題したDreamweaver( ホームページを作るソフト)

blog.whiteandpeach.com

まぁ簡単に言うと、バージョンアップしてついていけなくなりました。

 

 

 元WEBデザイナーの姉のすすめでDreamweaverは4から使っているのですが、当時はCSSもまだそんなに普及してなかったし、HTMLの知識があれば独学で十分使えてました。

MXくらいまでは良かったけど、バージョンがCSになってつまづきはじめました。

一度講習を受けに行ったけど、CSS自体がよくわからなかったんです!!1万もした講習費を無駄にしてしまいました。さらにJavaScriptも全然わからない。

 

もたもたしているうちにまたよくわからない機能がたくさんついてて、ギブアップ!

そこで知人のみの依頼ですがWEB制作の仕事ストップしました。

 

自分のサイトもどんどん古くなってきてなんだか悔しくなり、1からやり直すことにしました。

そもそも習ったことないし、独学に限界がきていたのかもしれません。

 

自分の知識って「やりたいことをさがす→実行する」なので歯抜けです。

姉はすでにWEBデザイナーから退いているし、同じ業界の知人もいないので、「こうした方が良い、ああした方が良い」っていうのもわからないんですよね。

blog.whiteandpeach.com

 

わかっていることも基礎からやり直しました。

 

「こうもできるけど、こうした方が良い」っていうのがやっぱりありました!

 

上記のコースで頭の整理がついたところで、次はDreamweaverに戻ってこちらのコースを受講

www.udemy.com

Bootstrapという聞いたことがなかったやり方も今はあるらしく、そんなので簡単にスマホページ作れることがわかりました。

ほんと浦島太郎状態。

 

blog.whiteandpeach.com

 

Bootstrapはプログラミング入門にもありましたが、Dreamweaverはさらっとファイルを作ってくれるので超ラクでした。

 

私みたいな人にはやっぱりソフトが向いているのかもしれません。

 

【私みたいな人】

・決まり事が面倒

・スペルミスが多い

・タグが覚えられない

 

ボタンの説明でたいたいのことがわかってきたので、あとは拡張機能のようなそんなのまできっちりやってからWEB制作に入りたいと思います。

最初はうちの犬のホームページでも。

 

【Udemy】「 [HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門」の感想

 8月15日からUdemyで開始したフロントエンジニア初心者向け講座「 [HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門」昨日終了しました!

www.udemy.com

 

しばらく長時間PC作業はひかえてたんですが、結構集中してやってしまったので、途中身体に不調が出てしまい、座り過ぎで足腰が痛くなり痛み止めを飲んで望みました。

だいたい長い日で2時間、短い日で15分、平均30分取り組んでかかった日数2週間でした。


今回受講したきっかけは、

・新しいDreamweaverについていけなかったことと

Pythonはじめたけどプログラムへの取り組みがまだまだ慣れず、先に多少わかってる言語から始めるほうが良い

と思ったからです。

 

まずHTMLは長年の経験からほぼ理解ができているので問題なく終わりました。

講義の中で、

「_blankを使うかどうか議論されることがある」

と講師の方が言ってました。

アメリカのサイトってやたら_blank使ってて、例えばAmazon、気づいたらどんどんWindowが出てて困っちゃうんですよね!

結構戻るボタン使う人にとってはつらいです。

私は外部リンク、PDF飛ばすときくらいしか使いません。

 

そういう「使い勝手」についても教えてもらえました。

チームでやらず、ひとりでやってるとそういう情報入ってこないのでありがたいです。

 

次にCSSですが、何度か本買ったり、ネットでもコード拾ったりしてたので、だいたい理解できたのですが、margin、paddingなどはごちゃごちゃになっててまだ慣れてません。ここはきちんと覚えるかPCに貼っておきたいと思います。

 

そして知らなかったこと、BootstrapやGoogleの外部フォントなど、外部からプログラムを読み込んでやるやり方。

時代が止まってる自分は知らなかったので、そういったのが主流になっていることを理解しつつ、今後役立てていきたいと思います。

BootstrapはDreamweaverに項目があったので、使ってみたいと思います。

 

そしてJavaScript

ここまでくるとやっとプログラムって感じになりました!!

書き慣れていないので、何度もタイプミスしながらでしたが、何度も書くことでなんとなくかけそうな気がしてきた不思議です。

 

プログラムって英語みたいな構文で出来上がってるので、まずはそれに慣れないといけないんですが、これまでJavaScriptはコピペするだけで改造はほとんどやってないんですよね。

1から打つのは難しいかもしれないけど、これでもしかしたら改造もできるようになったかもしれません!

講義ではAjax通信、JQuery、Vue.jsも取り上げられました。

 

プログラムが複雑になっている分、簡単なやり方も登場してるという感じでした。

 

きちんと理解するには時間がかかりそうですが、なんとなく入りやすくなったので、今後Dreamweaverを使ってもう一度ホームページ制作にトライしたいと思います!

 

今日から以下の講義に入るんですが、店のPCにしかDreamweaverCCが入ってないので、少し時間はかかってしまいそうです。

www.udemy.com

 

【CSS】今日習ったこと【Bootstrap】

今日も仕事中の勉強も含め、2時間CSSばかりをやりました。

www.udemy.com

自分がHTMLをはじめたころは、プログラムは転がってないし、本屋さんでHTML辞書を買ってきてホームページを作ってました。掲示板のCGIの有名なサイトからひろってきたり・・・

その後はDreamweaverにばかり頼ってきて、まともにプログラムの勉強をしたことがありませんでした。

実際やってみると、こんなに技術が進化したの!???と驚きました。

めちゃくちゃ簡単になってるんです!!!

 

今日はBootstrapっていうのをやりました。

getbootstrap.com

ここのリンクを張っておけば、グリットなどが簡単に作れるそうです。

この作成者の指示書に従ってプログラムしていくそうなんですが、説明がすべて英語なので、英語の勉強にもなります!!

 

たぶんこういった補助してくれるプログラムがたくさん落ちてるんだろうと思うんですが、自分で探して使えるようになればいいなと思ってます。なんかできそう!!

 

GitHubは登録しました!!

github.com

使い方がさっぱりわかりませんが、そういった講座ものちほど受講しようと思います。

 

そして今日はBaseで作成中のサイトのヘッダーをカスタマイズしてたんですが、最初から入っているプログラムに勝てず、全然できませんでした。。設定クリアするか、どこかを消さなきゃいけないかもしれないんですがわかりませんでした…。

まだまだです。。

 

これまで普通に作ったホームページの装飾変更などで先に覚えていこうと思っています。

【勉強の成果】HTMLテーブルをCSSで装飾

短期集中でCSSをやっています。

 

blog.whiteandpeach.com

 

これまでHTMLのみで記述してきたものをCSS装飾に変更

 

f:id:whiteandpeach:20180817162735j:plain

見た目はあんまり変わらないんですが、青いリンクの色を変え、リンクをマウスオーバーにしたりしてます。

 

今まで使ってたHTML

Dreamweaverで作ったっきり、コードは触らないことが多い私です。

かなり無駄な記述がありました。

----

<table width="210" border="0" cellpadding="5" cellspacing="1" bgcolor="#996600">
<tr>
<td bgcolor="#FFFDF2"><div align="center"><img src="https://image.rakuten.co.jp/pawstore/cabinet/imgrc0112373884.jpg" alt="カテゴリ" width="210" height="30" /></div></td>
</tr>
<tr>
<td bgcolor="#FFFDF2"><table border="0"> ←何度も背景を指定してたり
<tr>
<td><a href="https://item.rakuten.co.jp/pawstore/c/0000000188/"><img src="https://image.rakuten.co.jp/pawstore/cabinet/imgrc0112361997.jpg" alt="バッグ" width="100" border="0" /></a></td> ←繰り返しサイズ指定してたり
<td><a href="https://item.rakuten.co.jp/pawstore/c/0000000188/" >バッグ</a></td>
</tr>
</table></td> ←無駄なタグがたくさん
</tr>
<tr>
<td bgcolor="#FFFDF2"><table border="0">
<tr>
<td><a href="https://item.rakuten.co.jp/pawstore/c/0000000105/"><img src="https://image.rakuten.co.jp/pawstore/cabinet/imgrc0112361998.jpg" alt="小物・ポーチ・財布" width="100" height="100" border="0" /></a></td>
<td><a href="https://item.rakuten.co.jp/pawstore/c/0000000105/">小物<br />
ポーチ<br />
財布</a></td>
</tr>
</table>

----

 

今回自力で書いたCSS

---

 <style type="text/css">
a { 

text-decoration: none;

color:#220101;

font-size: 11px;

}

a:hover {    

color: #ff0000;   

text-decoration: none;

}        

.type1{

border: 1px solid #aaa; 

border-collapse: collapse; 

border-spacing: 0; color: #270001;

img size:70px;

}
.type1 img{

width: 70px; vertical-align:middle;

}

.type1 img:hover{    

filter:alpha(opacity=80);       

opacity:0.4;

}

.table-img{ 

border: 1px solid #aaa;

}

.table-txt{    

background-color:#FDF8E8;

padding: 2px 2px 5px 5px; 

border: 1px solid #aaa;

text-align:left; vertical-align:middle;

}

---

HTML

<table class="type1">

<tbody>
 <tr>

<td class="table-img">

<a href="https://item.rakuten.co.jp/pawstore/c/0000000188/"> 

<img src="https://image.rakuten.co.jp/pawstore/cabinet/imgrc0112361997.jpg" alt="バッグ"></a></td> 

<td class="table-txt">

<a href="https://whitepeach.base.shop/categories/1177489" >バッグ</a></td></tr> <tr>  <td class="table-img">

<a href="https://item.rakuten.co.jp/pawstore/c/0000000105/">    <img src="https://image.rakuten.co.jp/pawstore/cabinet/imgrc0112361998.jpg" alt="小物・ポーチ・財布" /></a></td>

<td class="table-txt">

<a href="https://whitepeach.base.shop/categories/1178991">小物<br />ポーチ<br />財布</a></td></tr>
---

まだまだ無駄がありそうですが、なんとかわかってきました。

タグが覚えられないので、検索しながらやっています。

 

【問題点と課題】

・class="table~を何度も書いてるんですが、なんか簡単になる方法ないのか。

・線ひくときどこを指定してよいかわからず、中の線だけを点線にすることができなかった。

 

うーん!!はてなブログで練習するのもありですね。

ちょっと触ってみます。

バッグ 小物

 

© White and Peach 2017-2019