プロゲート4日目。

プロゲート4日目。レスポンシブ対応の続き。

こんばんは!

今日は昨日の続きで、ポロゲートのレスポンシブ対応編をやりました。

上級編クリア!わーい♪

訓練校で教えて頂いたレスポンシブ化の方法は、max-widthだけじゃなくて、min-widthも指定していたけど、

max-widthだけ指定しても問題ないというのが新たな発見でした。

スマホサイズの時に文字サイズ、それぞれのサイズのmax-widthの具体的な数値、ヘッダーメニューの表示を変えるという所もとても勉強になりました!

面白い。

今日のアルバイトでは、名刺作りとLINEアットに表示するバナーみたいなのを作らせて貰えて凄く、凄く楽しかったです:)

デザイナー職が人気で、供給過多な理由がわかった気がしました(笑)

二日目にしてこういう事をやらせてくれる先輩。いや。師匠。

ありがたいです。<(_ _)>

しかも急かさず自由にやらせてくれるし、質問するとわざわざ作業の手を止めて教えてくれる。

訓練校でも思った事ですが、何かを創ろうとする人達は平和主義的というか。

人柄が良い人が多い。

先輩が作っているものを横目でガン見(笑)しているのですが、凄くセンスが良い(美大出身だそうです。)

良きお手本の師匠に会えてラッキー:)

今日も一日お疲れさまでした!

ご覧いただきありがとうございました♪

おやすみなさいませ☆

プロゲート3日目。

プロゲート3日目。HTMLおさらい(レスポンシブ)

こんばんは!

昨日の続きでHTMLおさらい上級編(レスポンシブ)についてのプロゲートをやっています。

わかりやすい。プロゲート。

おっかなびっくりやっていたレスポンシブ可に自信が持てるかもしれない。

今日はアルバイト初日にして残業があり(笑)

帰ってすぐお風呂に入り、PCを起動して開始しましたが・・・

もう寝る時間になってしまったので上級編クリアまで行っていないけど、

続きは明日にします。

でも、仕事を教えてくれたアルバイト先の先輩が

「今日は初日だからもう帰って良いよ!」と言っていたので、明日はさらに帰りが遅いのかもしれない。。(笑)

(面接では、残業はしちゃいけない社風と聞いていたのだけどなw
残業代、生活的には助かっちゃいますけどね。 )

まぁ、帰りが遅かったら遅かったなりに、最悪10分でも毎日続けて少しずつ進めて行こうかなと思います。

アルバイト初日からデザインさせて貰えるとは思ってなくて、画像の切り抜き練習ばっかりしていましたが、

今日は名刺のデザインをさせて頂きました!!(わーい♪)

嬉しい:)

アルバイトでも色々やらせて貰える環境である事や、先輩とか職場の方が優しさに溢れている事にも、ちょっと安心しました。

もう眠らないと明日起きれないので、寝ます!!

それでは!本日も一日お疲れ様でした:)

ご覧いただきありがとうございました!

プロゲート2日目。

プロゲート2日目。HTMLおさらい中級終了。

こんにちは!

世の中は3連休最終日。雨が止んで嬉しいですね:)

さて、私は昨日に引き続き、プロゲートのHTMLおさらいをしています。

といあえず中級終了しました:)

プロゲート凄く解りやすいです。学校で勉強した事のおさらいとしてとても良い。

これからコード勉強したい!という方にもオススメします:)

ふー。お腹がへったな・・。

最近、シマダヤの冷やし中華(ゴマだれ)にはまっています。

こちらもオススメです(笑)

買いに行こう!:)

それでは。ご覧いただきありがとうございました!

良き休日を~!

JavaScriptの勉強はじめます。

JavaScript、怖い。(笑)

こんにちは!

蒸し暑い日が続いていますねー。しかし冷房は寒い!みたいなね。

皆さんお元気でお過ごしでしょうか:)

私は、JavaScriptをマスターしたい病にかかっています(笑)

でもjquery位しか使った事がないし、それも必死だったので、

もの凄い分厚い壁に思えて少しビビッていますw

JavaScriptをマスターするにはどうしたら?とグーグル先生に聞いた所、

こちらのサイトで「JavaScriptの学習ロードマップ」としてやるべき事が載っていました!https://www.sejuku.net/blog/3984

(SamuraiBlogさん、ありがとうございます。)

千里の道も一歩から!たまにタクシーとか通るかも!(笑)

という事で、これから毎日、少しずつやってみようと思っています。

やる事リストはこちら。

1、HTML・CSS

2、JavaScript

3、HTML/CSS/JavaScriptを使ってサンプルアプリを作る

プロゲートというのは、 「オンラインプログラミング学習サービス」で、

WEBサイト制作に必要なHTML/CSS, JavaScript, jQueryや、サーバーサイドのRubyやRuby on Rails, PHPなどが学べます。

https://prog-8.com/languages

手始めに、プロゲートでHTMLとCSSの復習。初級編はクリア!

コツコツ行こうホトトギス!

それでは!ご覧いただきありがとうございました☆:)

CSS研究

BracketsでCSS研究

こんばんは!

今日はCSSの研究をしています。

動きは↓をクリック!
https://adjustacademy.com/d1812/d181211/rennsyuu2/

参考にしたサイトはコチラです!(1stwebdesignerさん、techacademyさん、ありがとうございます)https://1stwebdesigner.com/15-fun-and-inspiring-examples-of-css-animation/

z-index https://techacademy.jp/magazine/8645

明日は、jQueryのおさらいをしようと思います:)

それでは、今日はこのあたりで!

ご覧いただきありがとうございました!

良い三連休を~!

CSSアニメーションや小技について。

珍しくコードの勉強をしております。

こんばんは!

気がついたら七夕が終わっていました(笑)

少し前から町で見かける、笹の葉に付いた短冊は読んだりしていたんですけどね:)

絵馬とかもそうだけど、人のお願い事とか、夢とか見るの。なんかホッコリしますよね。

さて、今日はツイッターで流れて来た、この記事に影響を受け、久しぶりにCSSに触れています。

Webクリエイターボックスさん、ありがとうございます!

アニメーションもだいぶ触れていなかったのもあり、、

元々こんな高度な動きのもの作った事がなかったってのもあり、、で

必死です!!!(笑)

「この動きをするには、こんなCSSを描くのか!」と驚かされるばかり。

コピーしたりコードを見たりしてお勉強しております。

https://adjustacademy.com/d1812/d181211/rennsyuu/

こういうパーツ練習?を沢山しておけば、サイトを実際に「作るぞ!」となった時に

ワンポイント動きをプラスしたり、デザインの幅が増えてカッコイイサイトが作れる様になるのかもしれないな。。

もう少しやって見ます:)

ご覧いただきありがとうございました!

今日も一日お疲れ様でした!

ゆっくりおやすみくださいませ~:)

Illustraorで地図制作。

カフェサイト用地図を作りました!

今日はサイトに載せるためのIllustraorで地図を作ってみました。

サイトのURLはこちらです。(サーバー移設その他事情により非公開にしました!)

地図の作り方で参考にさせて頂いたサイトはこちら。↓


猪股 さん、ありがとうございます!

スマホの画面サイズの時のみ、サイトの連絡先の電話の項目の所から直接発信できるタグも入れてみました。

参考にしたサイトはこちらです。↓


web兄さん 、ありがとうございます!

紙のポートフォリオを更新しなければなぁ:)

今日はなんだか肌寒かったですね。 一日お疲れ様でした。

ご覧頂きありがとうございました☆:)

カフェサイト制作!

湖の畔のブックカフェを想定したサイト

今日は嬉しい報告があったのでテンションが上がっております。

昨日に引き続きカフェサイトを作っております。

コーディングをするにあたって、色々調べていたら。。

「できるコーダーさんはとにかくめんどくさがりだ。」

「手間を省いて早く帰ってゲームをする為に全力を尽くす」

という情報がありました。

そういえば、以前挑戦した「テンプレート」は手間を省くはずが、結局初めから自分でコードを打ちなおすはめになるという苦い経験が。。

はい。そこで今回再挑戦してみました!

http://yumisasaki.xyz/cafesite/

今回は順調です!

なんてラクなんだ!そして楽しい!

ありがとうテンプレート。

もっとフォントとかCSSをいじってカスタマイズしたいと思います。

地図も作りたいな:)

そうそう。コリスのツイッターで流れて来ていた情報。共有します!↓

ずっと前から読みたかった「なるほどデザイン」も安くなっていましたので買いました!

バナー職人に役立ちそうな「[買わせる]の心理学 消費者の心を動かすデザインの技法」もお安かったですよ。

気になる方は是非チラ見してみてください。

「ノンデザイナーズ デザインブック」を読めば読むほど、常に「正解ってなに?」と思ってしまっていたというか。。

型や基本は絶対大事だけど。それに沿って考え過ぎてもツマラナイデザインになるし。

ちょっとモヤっと思っていました。

でも、「なるほどデザイン」は楽しくその答えを教えてくれる感じの本でした。

それでは、ご覧頂きありがとうございました!

良い夜を~:)

LPにプラグイン無しでSNSシェアボタンをつける。

LPの改良をしました。

おはようございます!

今日は、「SNSのシェアボタンをプラグイン無しで実装する方法」について調べてやってみました。(Bootstrap 4化もしました。)

URL: https://adjustacademy.com/d1812/d181211/LP/

例えばツイッターを押すとこんな画面になります。↓

フェイスブックとgoogle+も同じように付けてはみたものの・・・。

なんと。google+って一般向けのサービスは今年の4月に終了していました!

う。使わな過ぎて気づかなかったです(笑)

実装方法についてですが、 詳しく説明してくれているサイトさんはこちらです↓

googleアナリティクスとの連携方法も載っています!

( 初心者にわかり易く画像がついていて嬉しいです。 wemo.techさん、 ありがとうございます!)
URL: https://wemo.tech/281

テスト勉強しなければと思いつつ。和風のバナーとか、サイトを作ってみたくなってきました。

あと3日だからそんな事言ってる場合じゃないですね。

記憶力がミジンコ。。

一般の人にとって「ちょっと高尾山行って来る!」くらいの試験だったとしたら、

私にとってはK2レベルなのです。万全の装備で行かねば。

がんばります:)

ご覧頂きありがとうございました!

では、良い一日を♪

LPのレスポンシブ化。

BracketsでCSSを変更してレスポンシブに挑戦。

もう夏?

こんばんは!

今日はレスポンシブについて授業で習った事の復習をかねて、LPのレスポンシブ化をしてみました。

サイトを見ている人の端末の、

・画面幅が768px以上
・画面幅が480px~767以下
・画面幅が479px以下

でCSSをいじってみました。 これで大丈夫なのかな・・。

URLはコチラです!↓

https://adjustacademy.com/d1812/d181211/LP/

修正してみたのですが、そもそも現場の方達は画面幅をいくつで想定して作っているのか。。

端末の大きさは無限にあるから、一般的なもので作るのだろうか。それは何pxなのか?

そういう、きっと現場では「当たり前の事」も、web系でお仕事が出来れば情報として普通に入ってくると思うと、アルバイトでも何でも良いので現場でお仕事をしたいなぁと思いました!

そういえば、お手本にしたいカッコイイサイトのコードを見ていたら、Bootstrapを使っていた。

とてもスマートにレスポンシブ対応もしていたので、Bootstrap についてちょっと調べてみます。

そして、なんだかとても暑いので、アイス買いに行ってきますw

それでは、ご覧頂きありがとうございました!:)

オーガニック化粧水のLPできました。

BracketsでLP制作

ULRはこちらです↓

https://adjustacademy.com/d1812/d181211/LP/

・コンセプト:ラベンダーやローズウォーター、ハトムギ、カモミールなどのオーガニックハーブ、素材を使用した肌に優しい化粧水のLP制作。

・コンバージョン:お試しキャンペーン購入サイトへの誘導。ブランドイメージアップ。キャンペーンを期に定期会員を増やす。

・ターゲット:20代~30代位の仕事をしている肌ストレスが高めの女性。

・使用アプリ:Brackets/Illustraor/Photoshop

・制作時間:10時間以上

お手本にしたサイトが画像メインで作られていたので真似をしてみました。

お手本として見た複数のサイトはどれも、「今だけ!!!!!!」とか、

色づかいがかなりギラギラ原色系を使っていたり、吹き出しを多く使っていました。

本来LPはもっと派手に解り易い感じが良いのかな。

とも思ったのですが、ブランドイメージアップもコンバージョン設定した時にあげていた事と、オーガニックの優しい製品という点から控えめに、優しいイメージで作りました。

派手さが足りない分、AOSを使って写真の表示の仕方に動きを出してみました。

AOSは初心者の私にもわかりやすくて有難かったです!おすすめです。

AOSの使い方参考サイトはこちら↓


株式会社オンズ さん、ありがとうございます!

やっとなんとなく形にはなりましたが、これからレスポンシブ可とSNS連携のコード入力を勉強して追加予定です。

でも、とりあえずやった!できた!嬉しいです!:)

ポートフォリオサイトも作り直さないとだし。。

やる事がいっぱいです!!w

ではまた。

ご覧頂きありがとうございました!

今日の作業曲:

Webサイト制作 

コーポレートサイト

・コンセプト:空気清浄機販売、環境保全、宇宙開発をしている企業(架空)のWebサイトです。

・ターゲット:綺麗好きで環境問題にも関心が高い20~30代の男女。

・工夫した点:クリーンで透き通った空気をイメージさせる画像を大きく配置し、ベースカラーは#a3b0cdを使用しました。信頼感や爽やかさ、清潔感をイメージさせる#002373をアクセントカラーに使用しました。

・使用アプリ:HTML5(Brackets)/CSS3/jquery/Illustrator/Photoshop

・制作時間:10時間以上

・URL : https://adjustacademy.com/d1812/d181211/Corporate%20website/index.html

星の飛び出す位置が一瞬ズレるので、現在原因究明中です。

まだまだショボくて、コードも汚い。。凹みますが、もっとスライダーやjqueryを沢山つかったシンプルだけどかっこいいサイトが作りたい。

次はレスポンシブ対応に挑戦してみます。

訓練校で作った作品 7

コーディング実習

・コンセプト:コーディング実習で作成したお茶のサイトです。

・使用アプリ:HTML5(Brackets)/CSS3

・制作時間:10時間

お茶サイト画像
]]>