カテゴリーページだけど WEB制作工房エル・タジェール
 

コーディングカテゴリー記事の一覧です

【備忘録】Sassで@mixinを使う

コーディング

Sassで使う@mixinについてまとめておきます。

①@mixinとはCSSのスタイルをパッケージしておくもの

@mixinとは、Sassで使うCSSスタイルをまとめておけるパッケージです。
必要な時に@mixinを呼び出すことで、まとまったスタイルを適用できます。

②@mixin基本形

@mixinでパッケージを作ります。
使うときは、@includeでパッケージを呼び出します。

[Sass]
@mixin example{
border: 1px solid #fff;
margin: 10px auto;
}
//@mixinにexampleという名前をつけました。

.box1{
@include example;
background-color: #ccc;
}
//exampleという@mixinを呼び出し、background-colorもつけました。

[CSSでの表記]
.box1{
border: 1px solid #fff;
margin: 10px auto;
background-color: #ccc;
}
@includeで呼び出したことで、@mixin内のスタイルも適用されます。

③@mixinに引数(ひきすう)を1つ使う

このmixinにつける名前(ここではexample)に、引数を付けることができます。
引数とは、mixinパッケージの中で、使う時の都合にあわせてカスタマイズできる要素をいいます。
具体的に見てみましょう。

[Sass]
@mixin example($fsize){
border: 1px solid #fff;
margin: 10px auto;
font-size: $fsize;
}
//($fsize)が引数部分。かならず()で囲み、$で始めます。パッケージの中に、css記述を書いておきます。

.box1{
@include example(16px);
background-color: #ccc;
}
//@includeで引数をつけてmixinを呼び出します。

[CSSでの表記]
.box1{
border: 1px solid #fff;
margin: 10px auto;
font-size:16px;
background-color: #ccc;
}
@includeで呼び出したことで、@mixin内の引数も適用されます。

④@mixinの引数に初期値を入れる

この引数には、初期値を入れておくこともできます。
これにより、②のように指定するのと違い、使う側で変更ができるようになり、使い勝手が良くなります。

[Sass]
@mixin example($fsize:16px){
border: 1px solid #fff;
margin: 10px auto;
font-size: $fsize;
}
//($fsize)が引数部分。かならず()で囲み、$で始めます。パッケージの中に、css記述を書いておきます。

.box1{
@include example();  
background-color: #ccc;
}
.box2{
@include example(20px) 
background-color: #ccc;
}
box1は引数の初期値をそのまま使い、box2は使う側の都合で20pxとする場合です。

[CSSでの表記]
.box1{
border: 1px solid #fff;
margin: 10px auto;
font-size:16px;
background-color: #ccc;
}
.box2{
border: 1px solid #fff;
margin: 10px auto;
font-size:20px;
background-color: #ccc;
}

⑤@mixinの引数は複数入れることができる

この引数は、複数いれることもできますし、それぞれに初期値を指定することもできます。

[Sass]
@mixin example($fsize:16px, $color:#fff){
border: 1px solid #fff;
margin: 10px auto;
font-size: $fsize;
color:$color
}
//複数の引数を作る場合は、カンマで区切ります。

.box1{
@include example($color:$f00);
background-color: #ccc;
}

[CSSでの表記]
.box1{
border: 1px solid #fff;
margin: 10px auto;
font-size:16px;
color:#f00;
background-color: #ccc;
}
// 引数のうち、文字色(color)のみ変更されています。

共有:

いいね:

【初案件LP制作】納品までのルート振り返り

コーディング, ランディングページ

昨日、不動産会社さんの売却リスト収集のためのLP制作が終了し納品しました。4月1日のWEB学習開始から、161日目の納品でした。

このブログが、「案件をゲットするまで」の記録でしたので、いったんは目標達成ということになります。

なぜWEB制作だったのか

長年ライティング業務に関わってきました。WEBライティングに軸足を移してから数年立ちますが、なかなか報酬が上がらない。

同じような悩みを持っている人は少なくないと思います。

私は今年に入って、この状況を改善しようといろいろ模索して、WEB制作にたどりついています。

「文字数x単価」の世界

WEBライティング報酬が「文字数x単価」で成り立っている以上、報酬を上げるには「たくさん書く」「単価を上げる」しかないのです。

しかし、書ける時間はある程度決まっており、リサーチの時間なども考えると、書ける文字数は限られています。ひと月に10万字以上書いている人は多くないでしょう。

単価も1円台で低迷している人がほとんどではないでしょうか。単価を上げるには、「特別な資格やスキル、経験を持つ」「潤沢な予算のあるクライアントにつく」などが考えられます。潤沢な予算のある案件は、競争率も高く、結局はライティングスキルを高める必要がある、ということになります。

私は現在3円程度の案件を中心にライティングをしていますが、CMSへの流し込みなどクライアントの要求は書くだけにとどまりません。

水平拡大としてTwitter運用代行など

ライティングといっても、3000字などまとまった文章を書くだけが仕事ではありません。書くが好きな方は、「書くこと」のバリエーションを検討してみるのも良いでしょう。

私は現在Twitter運用代行を月定額で請け負っています。調べてみると、SHARPのように本格的なTwitter運用はキャラクターを設定し、月20万以上の費用をかけています。これは予算が、制作費ではなく広告費だからですね。小さな会社では、広告費として独立しておらず、予算額も大きくならないことがおおいでしょう。

私の場合も、そこまで高額ではありません。ある地方企業が新しい業務を始めており、それをエリアに浸透させることを目的とした運用です。エリア限定なら、空中戦ではなく地上戦がいいのではないかと思っているのですが、あまり重たい案件ではなく、楽しみながら行っています。毎日5~10件のツイートを行います。予約投稿も活用できるので、隙間時間にできるのがよいですね。

Instagramでの投稿代行や、ブログ記事代行などもあるようです。水平拡大は、得意な分野なら戦いやすく書きやすいのが特徴です。

垂直拡大としてのWEB制作など

WEBライティングに軸足を移してから、自分が書いた記事がどのような体裁、スタイルでWEBに掲載されるのかがずっと気になっていました。できることなら、ライティングとコーディングをまとめたWEB制作を行いたいと考えており、4月からコーディングの学習を始めることとしました。

補足ですが、2021年9月からは、サイトのディレクション業務も請け負っています。これはSEOを考慮しながら、サイト構成や書くべき記事内容を決定し、ライターさんに記事をおねがいする業務です。これも垂直拡大と言えるでしょう。

学習開始から初案件納品まで

Season1(2021年4月~6月)

この春から、3ヶ月ごとにテーマを決めて学習を続けてきています。

このブログでも書いてきたように、Season1はコーディングの基礎を学ぼうと考えていました。第1歩目をProgateで学ぶ方も多いようですが、私はあのUIが苦手でドットインストールで学習を進めました。

dotinstall.com

一通りの学習が終了したところで、codestepのサイトで実践的なコーディングを学びました。初級、中級まで自力で書く→解答を見る→できないところを模写する→ググって調べるを繰り返しました。できあがった成果物は、写真を入れ替えることでポートフォリオにも載せられますので、おすすめです。

code-step.com

私が言うのもおこがましいのですが、WEB制作の第1歩目は、ドットインストール&codestepで正解だったと思います。

6月終わり頃から、Season2の計画をたてました。マイペースを心掛けるものの、Twitterを見ていると「3ヶ月で案件ゲット」など、ほんとかどうかわからないフレーズに煽られます。

しかし「学習と実案件は本気度が違う」「実案件でどうにかするうちにスキルが上がる」というお話も聞き、Season2は実案件にトライしてみることとしました。

Seaosn2(2021年7月~9月)

実案件にトライするものの、スキルが高いわけではありません。7月以降もできるだけ毎日コーディングをすることを心がけました。実際には、ライティング案件が立て込んでいていたり、codestepが中級まで終り「codestepロス」になっており、学習ペースは落ちていました。

しかし、jQueryJavaScriptなど興味を持ったスキルについては、書籍を購入したりWebで学習したりすることを続けていました。

実案件を探す

実案件は、ライティングでもお世話になっていたクラウドワークスで探すことにしました。マナブさんのYouTubeで案件の探し方を解説していたこともあり、検索をして「良さそうだな」と思う案件に、深く考えずに応募していきました。毎日5件~10件ぐらいは応募していたと思います。

身の程知らずな応募の仕方に見えますが、クラウドワークスの1つの案件には100人以上の応募があることも良くあります。クライアントもテキストで書かれたプロフィールを全部見ることはないでしょう。案件をゲットするのは宝くじに当たるようなもの、と考えていました。

crowdworks.jp

ポートフォリオを作る

また、このようにクラウドワークス案件への応募は効率が悪かったことから、ポートフォリオサイトを作成し、WEB制作会社へ「お仕事ください」メールを送ることにしました。

ポートフォリオは、私の強みである「テキストがかけるxコーディングができる」を全面に出すことにしました。しかし今は、このコーディングスキルで「できる」なんておこがましいと考えています。どこからも返事がないはずですよね。これだけはコツコツ改善するしかないと思っています。

shinichi-miyazaki.website

WEB制作会社への売り込み

私は社会人経験で営業をしたことがありません。ましてや自分を売り込むなんて、どうやるの?というレベルです。書き方は、「WEB制作 営業 文」などをKWに研究しました。読む側の立場で考えて、違和感のない、でも熱意が伝わる文章をつくりました。

こちらのブログ記事はとても参考になりました。

harayutaweb.com

WEB制作会社は、自分の住んでいるエリアを中心に探していきました。ネットでほとんどのことが済みますのでエリアを決める必要はないかもしれませんが、なんとなく身近な会社がいいかなと思っていました。

クラウドワークス経由で突然の連絡

7月は、学習を続けるとともに、こつこつ案件への応募とメールの送信の日々でした。しかし全然反応がなく、違う方法を考えないと、と思っていたところに、クラウドワークスで応募していたあるクライアントさんから連絡がありました。

「100件以上の応募がありびっくりしていましたが、オトカツさんにおねがいすることにしました」

まさに宝くじに当たったような気持ちでした。これまで100件以上応募してきましたので、はじめはどのクライアントさんかわかりませんでした。「家か近いクライアントさんだなぁ」と思って応募したものぐらいしか認識がありません。

クライアントさんは、地元の不動産屋さんが不動産チェーン店に加盟したものの集客がイマイチとのことでした。そこで物件売却用のLPを作成したいとの依頼です。

店舗までは会いに行ける距離でしたので、直接話を聞きに行きました。私から「なぜ私だったのでしょうか」とうかがったところ、「不動産売却の世代の方から選びました」「提案文が丁寧でした」とのことでした。まさか年齢がフックになっていたとは思いませんでした。年齢が上がっても、いいことがあるものです。

LP製作開始

8月5日、LP製作をはじめました。事前にクライアントさんにお会いして、不動産マーケットのこと、エリアの現状、自社の強みなどをお聞きし、ある程度のLPイメージをお伝えしてありました。

FVから訴求、解決策などのライティングはどうにかなるものの、デザインができません。Twitter経由で大変お世話になっている #ポジティ部 に相談したところ、コミュニティ内で募集することとなりました。

twitter.com

ほどなく、一人の女性が手を上げてくれました。じつは彼女もこれが初案件とのこと。

私から構成案を伝えたところ、一週間足らずでデザインが上がってきました。これをもとにいったんコーディングをし、8月16日にクライアントさんに内容確認をおねがいしました。クライアントさんは、営業担当者に確認させると言ったっきり、翌週になっても返事が来ません。納期がしっかり決まっていたわけではないのですが、「8月中には」という話があったこともあり、私は焦りました。

8月26日にやっと、文言修正をいただき、デザイナーさんに修正をおねがいすることができました。修正デザインもすぐに上がってきましたので、本格的にコーディングを行いました。

この時点で、クライアントさんには「納期は9月上旬」で了解をいただきました。

継続しているライティング業務やディレクション業務もあり、一日中コーディングするわけに行かず、もちろんスキルも不十分でしたので、コーディングは遅々として進みませんでした。

自分でも焦りながらも、ある程度形になったところで、ポジティ部のみなさんに確認してもらいました。客観的に見るとだめなところばかりだったのですが、落ち込んでもいられず修正し、9日納品となりました。

まとめ

文中にも書きましたように、今回案件が取れたのは偶然でしかありません。実際の作業では、形を作ることだけに夢中で、クライアントの満足まで考える余裕はありませんでした。

将来的には、クライアントの目的が叶うような、スキルとテクニックをもったWEB製作者になっていきたいと思っています。

今回の案件で、ご協力いただいた皆様に、心から感謝申し上げます。

ありがとうございました。

初案件で得られたもの

初案件反省点

これは挙げたらきりが無いのですが、思いつくままに書いてみましょう。

スキル面

作業面

共有:

いいね:

【107日目】ドットインストールjavascript「ビンゴシート」を作ってみた

コーディング

javascriptに慣れようと、ドットインストールでビンゴシートを作ってみました。

ひとつひとつのコマンドの意味を理解して、整理しながらなので、進捗は遅いのですが、ビンゴシートが完成しました。

今回のjavascriptは慣れることが目的です。

共有:

いいね:

【105日目】ドットインストールの「javascriptでミニアプリを作ろう」を終わらせることにした

コーディング, ブックス

 

jQueryは、「jQuery標準デザイン講座」を毎日一つ進めていて、おそらくLesson20ぐらいまですすめて、いったん終了とする予定。

とともに、ドットインストールの「Javascriptでミニアプリ」はすすめておいて損はないなと思うようになった。

dotinstall.com

もちろん、ドットインストールの「詳解javascript」シリーズは終わらせているものの、深い理解をしているわけではない。

私が今必要としているスキルとして、そこまで深いjavascriptの知識が必要だと思っていないことから、jQueryjavascriptは、「慣れ親しんでいます」レベルで、いったん終えておこうと考えている。

共有:

いいね:

【102日目】jQueryはどう学ぶべきか

コーディング

Twitterであすまさんが配布してくださった、「Webコーディング完全ロードマップ教材」を読みました。

現在の自分の居場所がわかり、とっても参考になりました。

 

いまどこにいるのか

この資料では、中級のはじめのところにいるようです。

jQueryではprogateの学習が終わっているので、今後は「実装する」ことが大切ですね。

先日公開した私のポートフォリオにあれこれ実装させていこうと思います。

 

jQuery+javascriptはどう学ぶか

おそらく学ぶものではなくて、どんどん体験するものなのでしょう。

というわけで今後は、

とりあえず、明日からはjqueryの1000本ノックを始めます。習うより慣れろ。

共有:

いいね:

【101日目】 #codestep中級3つ目Furniture Design終わった

コーディング

codestepでコーディングの学習を進めています。

https://code-step.com/

今回は、中級3つ目Furniture Designでした。
いままでで、一番時間がかかりました。
そりゃぁ、複雑になっていきますので、当然なのですが、今回はハンバーガーメニューあり、複数ページありで、とても楽しくコーディングしました。

ハンバーガーメニューは、もう少し経験を積んだほうがいいと思いました。

共有:

いいね:

【100日目】みなさんのおかげでコーディング学習100日目を迎えました

コーディング, スキルアップ

過ぎてみるとあっと言うまでしたが、4月からコーディングの学習をはじめて、今日で100日目。いろんなみなさんに教えてもらったり、励ましてもらったりしながら、やってきました。

コーディング学習の半分以上は朝4時から。毎日新しい「できた」の連続で、一日も休むことなく続けることができました。

3ヶ月毎に目標を定めているので、100日は通過点でしかないのだけど、200日目を迎える11月には、また違った自分になっていることを夢見て、こつこつとがんばっていきます。

これからもよろしくお願いいたします。

共有:

いいね:

【99日目】 #codestep ハンバーガーメニューをまとめてみた

コーディング

さて、ハンバーガーメニューの作り方、書き方については、いったん理解しました。
しかし、なんか理解の浅さにモゾモゾしますので、今日はスプレッドシートjavascript前後のうごきをまとめてみました。

スッキリ❢
今後お仕事をする上で、理解もせずコピペだけで「できました」という仕事の仕方はしたくないと思っています。
イチから書き起こすことができなくても、なぜこのコードが入っているのか、ないとどうなっちゃうのか、については理解しておきたいと思っています。

codestep中級3つ目storesiteのハンバーガーメニューの構造を整理したものにご興味のある方は、こちらからご覧になれます。

codestep中級3ハンバーガーメニューgoogle drive spreadsheet)

共有:

いいね:

【98日目】#codestep 中級3でハンバーガー実装

コーディング

今週はずっと、#codestep中級編のstoreサイトを続けています。

https://code-step.com/store2-menu/

codestep中級編3

わたしなりに、この課題のポイントは、「複数ページのコーディング」と「ハンバーガーメニューの練習」にありました。

複数ページのコーディングについては、これから取り組みますが、ここ数日はハンバーガーメニューができるようになることを目指しています。

今日は、実際にhtml/css/jsを書いてみました。
実際に.openクラスをつけた時もcssで書いておく必要があり、ちょっと手間取りましたが、なんとか完了。

もう何回か書いてみて、しっかりイメージできるようにしておきます。

ハンバーガーメニュー実装

共有:

いいね:

【97日目】 #codestep中級 ハンバーガーメニュー登場

コーディング

codestep中級最後の課題に入っています。

https://code-step.com/store2-menu/

今回の課題をこなす上で自分の課題となっていたのは以下の点でした。

一回目のコーディングはindex.htmlから順番に書いていったのですが、複雑なコーディングになるほど、事前の情報整理が大切だと実感しました。このあともう一回コーディングをしますが、事前にペーパーでまとめてからコーディングに入ってみます。

ハンバーガーメニュー

今回の最大のテーマは、ハンバーガーメニューです。最近のレスポンシブでは使っていないサイトがないというぐらいよく見る機能ですので、なんとか自分のものにしておきたいですね。

しくみからわかっていなかったので、まずはjavascriptの流れを確認してみました。

表示後のhtml(nav)とcss(.open)を書いておいて、on(‘click’…)で.openをaddClassすることで、書いておいたcssで表示を可能とする、というものでした。

あしたは実際に記述して、確認します。

共有:

いいね:

【96日目】jQuery標準デザイン講座18まで来ました

コーディング, ブックス

毎日ひとつ、jQuery標準デザイン講座をすすめています。
進めていますと言っても、読みながら、実際にjQuery書いてみて、ふむふむと納得するレベル。

この本は「Lectures and Exercises 30Lessons」とあるとおり、30回の授業でさまざまなjQueryが使われるシーンを解説してくれています。

おそらくこの本をマスターしても、まったくゼロからjQueryのコードがかけるとは思わないし、そうなりたいわけでもない。

ただ、7月中にはこの本をひと通り終わらせれば、少なくとも次の2つができるようになっていると思う。

jQueryのコードを見たとき、どんな変化がつくのかわかる
「こんな動きをつけたい」と思った時、この本にあったなと思い出す

この2つを僕の経験に実装できたら、ちょっとはレベルが上がっている気がする。月末乞うご期待。

[itemlink post_id=”4390″]

共有:

いいね:

【95日目】ワクチン接種の左肩が痛いけど #codestep 中級3つ目をはじめました

コーディング, 雑談

6日午前中に地元の病院で1度目のワクチン接種をしました。
夕方から、打った左肩が痛くなりましたが、ひどくはありませんでした。

本日7日は、発熱はありませんでしたが、左肩が痛い。長い針を刺された(実際そうでしたけど)痛みが一日残りました。

人によって副反応はさまざまですが、反応するということはワクチンが効いているということですから、耐えられる範囲であればよしとしましょう。

閑話休題
本日からcodestep 中級3つ目store siteを開始しました。
この課題のポイントは

です。
本日は、ハンバーガーメニュー以外を作成しました。基本的にはcodestepで経験してきたことばかりで、大きく悩むことなく作成完了。

ハンバーガーメニューは、いったん学習してから、codestepやってみます。

共有:

いいね:

古い投稿ページへ
%d人のブロガーが「いいね」をつけました。