夢見るパンダじゃいられない

午前0時の交差点で微熱混じりの憂鬱は感じたことない18歳。デザインとか、言葉に惹かれています。最近は、Webデザインの勉強をしています。

ハジメテのCSS〜背景と余白〜

<h1>Hello World!</h1>

 

 

今日はやたらと作業が捗ったので、記録しておきたい気分。

 

 

それと、早速方針変更した。ので書いておこう。

 

本に従って進めていこう!と思って三分の一くらいまで進めたはいいのですが、

 

なるほどね!うん!あーね!ってコードの意味を理解できるのはいいけど、「これ、実践できるのか自分?」

 

ってなって来て、やっぱり作りたいものが先にあって、それに向かってググりながら、本で引用引きながらやったほうが、覚えられるのでは??となり、今日からこれを使っています。

 

codepen.io

 

 

これが、めちゃくちゃに便利・・・・!CSSとHTMLとJavascript、それぞれコードが打てて、それがすぐさまプレビューを脇で見ながら作業できるという優れもの・・・・!だし、それぞれコードが保存できるので、達成感を感じるのにも良さそう・・・・!

 

こちらのお題を参考に色々作って見たよ〜〜〜

 

www.webcreatorbox.com

 

主に2つ学んだので以下にば!

 

1▶︎余白

 

マージン??ん〜〜聞いたことあるけどな〜〜ん〜〜という状態だった私。

図を見れば理解しやすい〜!

 

余白には2種類あって

margin>文字の周辺

padding>内側の余白

 

だと。

 

yossense.com

 

このサイトがわかりやすい〜〜

 

1pxってどんなもんだろーか??と少しずつ値を変えながらちょうどいい間隔を探していきました。もう少し練習していこう〜

 

 

2▶︎背景

 

文字などを置く背景!は以下のようなタグを使って見た〜〜

 

background-size: 50px 50px;       

background-color: #ffff;

background-image: url("~~~~~");

 

透過加工とかもできて楽しい・・・!

 

Keynoteとかで作れば一発なのに、コードで作ろうとするとめちゃ大変・・・。だけど、思うような形が出来上がるとめちゃくちゃ嬉しいし楽しい〜〜〜〜🐼

 

最終的にこんなのができた。

 

f:id:sakosma:20171225131757p:plain

 

 

これは、このオシャサイトを模写してくようなイメージで作っていきました〜

(画像とかは適当だけども)

www.papercast.com

 

 

かっこいいサイトの文字と画像の配置を真似することを繰り返していくのがいい練習になりそうで、ワクワクしている・・・・・!模写好きぃ

 

10を目標に模写していくぞ〜〜〜〜お〜〜〜

 

初めてのことを学ぶと毎回思うけど、楽しい・・・!

わからないことをわかろうとしてわからないことが増えていく感覚、私は好きです。私はね、、、。

 

JKが3ヶ月でWebデザイナーになる話(仮)

 

おはようございます。こんにちは。こんばんは。さこぽです。

 

無事色々落ち着きまして、さこぽ史上最高級に堕落した生活を送っているところです。

 

早寝遅起き。9:00に寝て、9:00に起きる。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

よろしくない。本当によろしくない。

自戒の念を込めて、これを買いました。

 

 

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)
 

 

2480円+税。高校生にとっては痛い出費。

 

中古という手もあった、がしかし新しいものなのでそんなに変わらない。+自費で買ったほうが、責任感に追われやり切れるだろうと思ったのです。

 

そういうわけで、さこぽ、

 

Webデザイナー目指します。

 

 

なぜ

 

私の尊敬する大人の方々役5名ほどに「プログラミングはね〜〜やっといたほうがいいよ〜〜そうだね〜〜〜プログラミングはね〜〜〜〜やっててね〜〜〜損はないよ〜〜〜〜」

 

と呪文のように毎度毎度唱えられ、勝手に危機感を覚えているのです。そして、大学生になってバイトにサークルに酒にと忙しくなる前にコツコツ自分で時間を確保できる今こそタイミングなのでは、と思い立ったのです。やっぱ肉体労働じゃなくて頭脳労働(そんな言い方するのか)で稼ぎたいし。うん。

 

そこで、三日坊主という言葉では足りないほど物事続けるのが下手くそなさこぽ選手は、ここに記録を残していきたいと思います。これは、とりあえず選手宣誓のための記事。

 

目標

 

自分の作品を掲載するポートフォリオサイトをつくる。

ex)グラフィック・アクセサリー諸々。

 

 

教材

 

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)
 

 

これを章ごとに進めていきます。

 

Progateも使ったことがあり確かにゲーム感覚で楽しめるのですが、全く記憶に残らず、応用が利かない(「で、これどこで使うの?」ってなる)ということで書籍でコツコツやっていくことを選びました。

 

スクールに通うことも考えましたが、通うまでの時間もったいねー!ということで却下。自学自習の癖をつけたいというのも一つの理由です、、、。

 

日程

 

12月【奇遇なことにクリスマスは日程がないので基礎固めしちゃうぞ☆月間】

・教材CHAPTER6まで終わらそう

・教材に飽きたら、好きなサイトのソースコード見てふむふむってする

・主にHTML

 

1月【もち食べながらテキスト終わらして応用してみるぞ☆月間】

・教材CHAPTER10まで終わらそう

・サーバーとかもちょいちょい調べよう

・簡単なサイトをマークアップして見る侍。

・主にCSS

 

2月【チョコ食べながら実際に自分のサイト製作しちゃうぞ☆月間】

ポートフォリオサイトのレイアウトを考えよう

・実際に作ってみよう>わからなかったら周りの大人に相談してみよう

・それに必要なグラフィックなど、素材を集めよう

・配置してみよう

・実際に動作するか確認してみよう

 

3月【完成披露試写会】

・誰に見せるんだろう・・・・。

 

 

 

 

そんな感じで、こっそりコツコツ読者3人のこのブログで成果発表していきます。どんどこコード打つぞ〜〜〜!!いえ〜〜〜〜〜い!!!

 

・・・。と予定を立てるだけが得意なさこぽ選手ですが、今回こそ、しっかり「実行」。

 

最後に、私が大尊敬する24才経営者の御言葉で締めさせていただきましょう。

 

「できる、できないじゃない。やるか、やらないか。」

 

 

 

 

私がSMAPのSTAYを結婚披露宴の入場で流したい3つの理由

さこぽっくるです。17歳です。

 

 

SMAPが大好きです。大好きなのですが、学校に「しようよの大サビでつとぷが背中合わせになって歌うところをおかずに白米3杯いけるよね」とか「5人旅のUSJのお土産屋でつとぷがスヌーピーのカチューシャを付けあうところで友達には隠してたけど実は付き合ってたカップルが一緒に帰っているところを見てしまった時の気持ちになるよね」だとか言い合える友達がいないのでブログを始めました。

(⚠︎注意 筆者は強火つとぷ担です)

 

 

さて、先日ついにSMAP最後のアルバム(になるであろう)ベスト盤の収録曲が発表されました。

 

smap25years.com

 

ううううん、、、、なんとも感慨深いランキングになっております。

 

スマヲタ(⚠︎SMAPが出る番組を追いかけすぎて、年末年始はHDDが悲鳴をあげる人々)、コンサートをやるときにはファンクラブの友達に頼んでチケットを取ってもらう人、スマスマは毎週見てるけどコンサートには行ったことない人、などなど

いろんなファン層の意向が詰まってますね〜〜というのが始めの感想。

 

そのなかでまずは

 

第1位 STAY

 

 

「私がSMAPのSTAYを結婚式の入場曲にしたい3つの理由」

 

をテーマに書いていくぞーー!おー!!

 

ちなみに、テスト1週間前という差し迫った状態の私のツイート↓

 

 

一体何があったんでしょうか。

 

一応、「結婚式にSTAYを流す一択だから、もし私が安室奈美恵木村カエラを使うとか言い始めたら咎めてくれ」と母には伝えてあります。

 

それでは、本題に入ろう!(遅)

 

①扉が開くタイミングが非常にわかりやすい。

 

まずね、洋風の結婚式なんですよ。それでピンクのバラのリースが2つ付いた白い扉があるでしょう、そこに待ち構えるじゃないですか。そして、音とともに結婚式場のスタッフ2人が扉を開けてくれる。ピアノの伴奏がすっと切れた時、ここにしかないでしょう?????スタッフさんも緊張せず自信を持って扉を開いてくれるのではないでしょうか。タイミング間違えたら台無しだもん。スタッフさんの緊張緩和まで気を配れる国民的アイドル流石すぎる。

 

 

ロングで暗めの茶髪をゆるく巻いてハーフアップにして、白いかすみ草のバレッタをつけたお姉さんが弾いてそうなピアノの音がいいんです、本当に。一気に惹きこまれます。

夜に自分の部屋でカフェラテでも飲みながら、ラベンダーのろうそくなんかつけちゃって聞いて欲しいです。(⚠︎ぽっくるはこんなオシャレなことやったことないです)

 

 

 

②プロポーズが歌詞の一節だった。

 

永遠なんていらないからさ 5、60年 それだけでいい

 

言われてえ〜〜〜〜これ言われたすぎない?????えっ???

夜景の綺麗なフレンチ食べながらとかもいいけど、私は近所の給料日に必ず行く、行きつけのイタリア家庭料理屋で仕事終わりに夜ご飯食べてる時とかに、「え、ここで????」みたいな時に言われて〜〜〜く〜〜〜〜〜〜()

「それ引用元は?笑」って嬉しいくせに恥ずかしさ紛らわすために言いたすぎる〜〜〜〜〜〜

 

で、STAYが思い出の曲になって、披露宴でも使う。そしてその後も聞くたびにその時のことを思い出すと。SMAPの曲と共にある思い出、いい。めちゃめちゃいい。憧れる。

 

 

 

最後!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

③ 木村拓哉が出てくる。

 

 

 木村拓哉が、出てくる。

 

 

 木村拓哉が、出て、くる。

 

 

 

 

 

扉が開いた瞬間、目の前に木村拓哉が立ってるんですよ。

 

ピアノの生演奏に合わせてソロの部分を歌ってる。木村拓哉が。

久利生公平、新海元、瀬名秀俊など数々の異名を持つ木村拓哉がっ!!!!!!!

 

わけがわからなくて私は膝から崩れ落ちると。

 

その後はご想像にお任せします☆ 

 

 

 

 

 

私が結婚する時には、おじゃまっぷ!!が長寿番組として続いていて、木村さんが準レギュラーになっていることを祈るばかりです。気の利いた友達がおじゃMAP!!の番組HPのフォームから依頼してくれると信じてるよ。よろしく。

 

 

 

 

 

 

 

 

以上「私がSMAPのSTAYを結婚披露宴の入場で流したい3つの理由」でした☆すこしはSTAYが聞いてみたくなりましたか?

この1曲でこんなに気持ち悪い妄想 想像ができるほど、メッセージが詰まった素敵な曲だってこと、伝われ〜〜〜〜!

 

ええ、是非この機会に「STAY」が収録されたアルバム、買ってくださいね。SMAPを後世に残すためにもお願いしますよ!!!!

 

 

victorentertainmentshop.com

 

 

 

 

 

P.S.

もともと、STAYは2006年発売のPop! Up! SMAP

に収録されています。ぜひ聞いてみてね。ちなみにこのアルバムは私の中で1、2を争う名アルバムなので超オススメっす

 

www.jvcmusic.co.jp

 

 

 

 

 

 

桃 なぜめぐり合うのかを私たちは なにも知らない

 いつめぐり逢うのか 私たちは いつも知らない

 どこにいたの 生きてきたの

 遠い空の下 ふたつの物語

 

5 縦の糸はあなた 横の糸は私

青 織りなす布は いつか誰かを

  暖めうるかもしれない

 

緑 なぜ 生きてゆくのかを 迷った日の跡の ささくれ

黄 夢追いかけ走って ころんだ日の跡の ささくれ

赤 こんな糸がなんになるの 心許なくて ふるえてた 風の中

5 縦の糸はあなた 横の糸は私 織りなす布は 

  いつか誰かの傷をかばうかもしれない 縦の糸はあなた 横の糸は私

  逢うべき糸に出逢えることを

 

桃 人は仕合わせ と呼びます