コーディング練習してて思った事

コーディング練習してて思った事

CSSの充て方】
クラス名を次々と新しいものを乱発するよりも、
同じクラス名を付けていく。

で、CSSを充てるときに
指定の仕方で場所を区別する。
隣接セレクタとか子セレクタとかを使う。
同じclass="A"でも、

○○ブロックのA、
とか
△△ブロックの中の2番目のA、みたいな。

これを、class="A"、class="B"、class="C"、class="D"などとやっていくと混乱してしまうのだ。

【background】
背景の色指定と背景画像を出すのを両方やりたい場合、
カンマ区切りではなく半角スペースを空けて並べて記載。

(例)
background: rgba(255,255,255,0.9) url(img/aaa.png) no-repeat;

某LPのコーディング練習

この土日で、某LPの再現をしていました。
会社でのお仕事に備えて、です。

ページを見て、なるべくソースを見ずに、コーディング。
とはいえ、なんだかんだで検証画面も見てましたが。
あとは、ソースは見ないけれど、
どんな風にブロック分けして、マージンとパディングをどう取っているのかを確認して、それをヒントにコードを書いてみたり。

f:id:kiozora:20170709224655j:plain
(ちなみに画像は練習してたLPではありません)


で、そのとき色々気付いた事を、本当はこの記事に書いておこうと思ってたのですが、
今日はそこまでは出来ませんでした。
目標としては、なるだけソースコードとかを抽象化して、自分なりに参考資料を積み上げていきたいのです。
こういう時はこういう風に組む、とか。自分なりの辞書を作りたい。

あと、同じLPを2度3度やってみた方がいい気もしてます。
思えば、教本を真似て課題サイトを作った時も、本を一周しただけじゃ覚えきれなかったので。

いまの勤務先では、Photoshop作業と更新作業をしていて、そろそろコーディングも回ってくるかも、という状況です。

ひとたび会社に入ってしまうと、結構焦りますね。
自宅練習のペースは崩したくないけど、会社の仕事に困らないように予習とか準備も必要だし。
両立が難しいです。
もっと勉強して、自信を持ってから入社したかった気もします。
一方、それだといつまでも飛び込めなかったかも知れないか。

Javascript周りがまったく分からないのが今の悩みかなぁ。
HTML、CSSを仕事で使うレベルで仕上げられるように練習してると、JSの基本書を読んで勉強していく時間がなかなか取れません。

でも、今はHTMLとCSSを確り業務レベルで出来るようにした方が良いと思ってます。

CSSセレクタに関するメモ

CSSセレクタについてのメモ。

実際のサイトのセレクタはグループセレクタや子孫セレクタが多く使われてる。
できるだけ効率よく、後からでも直せるような工夫もされてると感じる。

そんなセレクタで、戸惑ったものをメモしておく。

【子セレクタ
.sec01 .group > img
親要素の直下の子要素を選択する。

【:last-child】
:last-childを複数指定するときはこう。カンマで区切ってそれぞれに:last-childを付けるのを忘れない。

.sec01 .group01 img:last-child, .sec01 .group02 img:last-child {
margin-right: 0;
}

【.group.area】
このように.で続けて指定するパターン。
groupとarea、2つのクラス名を両方持つ要素に対して。
<div class=group area></div>
半角スペースを空けて区切る子孫セレクタと混同しないように!

ゼロからコーディングする時は、CSSセレクタを綺麗にまとめられるかを大事にしないとだなー。

作りたいものが無くても良い

最近バイト先に入社した派遣社員さんは、兼業でパンの教室をやっていて、そのウェブサイトやブログを作っているという。こういうのが理想的なWEB制作だと思う。「WEBは手段です」と言っていたのが印象的だった。「WEBはメディアです」という言葉も。

WEBサイトはそもそもメディアであって、伝えたいものを伝えるためのツール。LPなら商品の広告だし。

何も伝えたいものが無くて、ただ単にWEBサイトの技術を学んでいるのは、結構しんどくなる時もある。ポートフォリオサイトを自主制作しようにもネタが無いって言う…。手段と目的が逆と言うか。

そんな中、最近読んで、面白かったもの。森博嗣の著作内の一記事。『「書きたいことがない」ということについて書きなさい。』というタイトルのエッセイだ。タイトルどおり、書きたいことが無いときの事を書いている(笑)。

で、それをもって、「プロというのは、書きたいことがなにもない状態でも書ける」と言う。書きたくないときに書けない人だったら、執筆を生業には出来ないとの事だった。

これはWEB制作でも同じかもしれないと僕は思う。実際の仕事においては、大抵はクライアントからテーマを貰うから、まあ良いとして、問題は一人で作品つくる時だよね。テーマとか別に無いし、という時。

無くても作るしかないのだと思う。WEB制作の仕事を得たいという目的は少なくともあるわけだし。就職や転職だけでなく、いまWEB制作の会社に居るのなら、そこで活かせる技術を身につける、という目的がある。まさにライスワーク。お金のため。

お絵かきもね、描きたいものが無いとか言って手を止めてたら上手くなれないし、上手くならないから余計つまらないしってパターン。ていうか自分がまさにそんな感じ。

チームラボの猪子さんが、やりたい事なんて見つかるものではない、それより何かしらスキルを身につけて、とりわけ最新の技術を身につけて、他に出来る人が居ないから頼られるみたいな状態になると、それが喜びになって自然とやりたい事になっていくのではないか、と言ってたらしい。ネットで見た。

ほんとそれな。

ものづくりってどうしても、作りたくて作ってる人の方が格好良く見られる気がする。実際それが理想だろうし。ただ、作りたいものとか無くても、作る事は出来るし、上手くなれるんだろう。だから、理想的な作り手を見て凹むのは勿体無い。作ったという事実だけ用意できれば充分。

なにか物事に夢中になって取り組めるのは、ずっと先かも知れない。これも先の森博嗣の言葉だったかな。最初はさほど情熱が無くても、それで間を空けてたら楽しくならないんだろうなぁ。

でもって、冒頭の「WEBは手段」という事でいえば。僕は、WEBサイト作りって、何かを宣伝したり、申し込みを募集したり、そういうのが本質だと思うので。自分が誰を応援したいとか、誰を宣伝したいとか、誰を助けたいとか、そういうのが見つかればベストな気がする。

続けるのが大事だよな、という話

僕は大卒後、ダラダラとフリーターとして過ごしてきました。
昨年から学んでいるウェブ制作は、真剣に続けようと思います。
深いところまで学んで、プロだと自信を持てるようになりたいです。

 

過去に、アニメ会社で働いた事がありました。
職種はアニメーターです。
1年満たずに辞めてしまいましたが。
収入が思っていた以上にキツかったし、実家の事情もあったりしました。
それはともかく、僕が初対面の人に「アニメ会社に居た」というと、絵が描ける人だと思われる事が多いんですね。
ですが、実際は、僕は絵が描けません。下手です。

 

僕が当時やっていたのは動画マンと呼ばれる仕事です。
原画マンが描いた絵を、トレスしたり、原画を2枚重ねて、間の線を補完する事で、パラパラした時に動いて見えるようにする作業です。

→参考になるサイト http://listeningside.net/a_side06.html


つまり、実際には絵を描く仕事とは少し違うのです。
もちろん、場合によっては画力が問われる作業も発生するし、動画を極めた人というのは凄いです。

ただ結局、動画スタッフの段階というか、新人の段階で辞めてしまうと、何も身に付かない。
ちゃんと数年間続けて、原画のお仕事をするようになってこそ、アニメーターと名乗れるように思います。あるいは動画を極める人になるとか。
そういう人は、プロのアニメーター・絵描きであり、もちろん「絵が上手い人」です。

 

どんなお仕事でもそうだと思いますが、続けていくうちに、プロフェッショナルになっていく。
だから会社に就職できたところで、そこがゴールじゃない。

僕は現在、一応はウェブ制作会社で働いていますが、業務内容は、先輩のお手伝いで、ごく部分的な作業です。
この前、某所で、ウェブ制作の全体像が描かれた表みたいなものを見せてもらう機会がありました。
それを見た時、自分が知らない事ばかり描かれていて「ああ、僕はウェブ制作会社勤務とは言っても、まだまだ全然、浅い関わりしか無いんだなぁ」と実感できました。

ウェブ制作では、プロジェクトリーダーやマネージャーが居て、プレゼンやらサイト構造設計やらコンテンツ仕様書があって、自分がいまやっているようなアドビソフトを使う作業は全体のごく一部なんですね。

サイト作りの最初の部分から関わったり、コアな部分に関わったりするようになるには、簡単ではなさそうです。

 

「ウェブ制作のプロです」「ウェブサイトの事なら任せてください」

そんな風に自信を持って言えるようになるには、長く続けてこそだと思います。

地道に積み重ねて行きたいと思っています。

CodePenを使って

今日はCodePenを使って、CSSの模写をしてました。

実際のサイトを見て、その通りにコーディングが出来るかの練習です。


CodePenとは、ウェブサービスの名称で、僕はWEBデザイナさんにSNSで教えてもらいました。
これの良い所は、コーディングしながら、表示結果がリアルタイムで見られる、という事です。
そして何より、インターフェイスもすげーカッコいいです。
クールです。スタイリッシュです。

 

ネットサーフィンして、真似したいレイアウトを見つけたら、CodePenでコーディング。
今回はこちらのサイトを真似してみました。

 

f:id:kiozora:20170507171928j:plain

といっても、丸ごとではありません。

ごくごく一部、ここだけです。

f:id:kiozora:20170507172011j:plain

 

で、真似して再現してみたのがこれ。

f:id:kiozora:20170507172123j:plain

元のサイトで写真が入っている所は、赤いボックスで代用。

右側の矢印(>)は、画像をbackgroundで出してるので、これも今回は省略。

アイコンフォントとか使ったら良いかもですね。

 

個人的なメモ。

overflow: hidden
line-height: 28px;

がポイント。

 

実は、他にも真似しようとしたサイトがあったのですが、あえなく挫折してました。
出来る事からコツコツとやるしか無いのかも知れません。

はじめまして

はじめまして、シゲルと申します。

都内のWEB制作会社に勤務してます。

一人前のWEBデザイナー目指して修行中です。

 

WEBサイトを自由に作れるようになるのが目標です。

このブログにはWEB制作に関して自分のやった事、やりたい事を書いていきます。

よろしくお願いします。