ほわぴの旅行日記

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

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

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

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

でも、自宅の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~を何度も書いてるんですが、なんか簡単になる方法ないのか。

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

 

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

ちょっと触ってみます。

バッグ 小物

 

今日からHTML,CSS,JavaScript講義追加

今日からHTML、CSSJavaScriptの講義を追加しました。

www.udemy.com

Pythonもやってるんですが、難しくてついていけないので、プログラミングに慣れることからはじめることにしました。

 

HTML、CSSは独学でやったことはあるのですが、きちんと教わったことはありません。Dream weaverをずっと使ってきて、あまりプログラム重視でやってきてないので、専門用語もろくに知らず、人には教えられる感じでもなく、ソフトで作ったコードはあんまりきれいじゃなかったり。。

うちの場合、自分しかろくに見ないので別に良いんですけど。。

 

そして、ショッピングカートのカスタマイズ、そろそろスラスラ書きたいところです。

今ショッピングカート移行、ホームページリニューアルなどいろいろ考えてるけど、カスタマイズに時間がかかりすぎて非効率です。

一度時間をとってきちんとやってみます。

 

 

N予備校にもHTML、JavaScriptの講義があるんですが、正直わかりづらくて、上記の講義、HTMLの基本だけやったらすごくわかりやすい構成になってました。

実は数学の説明もわかりづらくて、違う講座をさがそうと思ってます。

© White and Peach 2017-2019