SK@Programming

メーカー社内SE（デスクトップアプリ開発:C++/C#/VB/Python）▶在宅勤務で時間が増え自分の人生を見つめ直す▶プログラミングでもっと稼ぎたい▶Web制作の勉強開始（2020/06～）▶HTML/CSS/JavaScript/WordPress学習中▶たくさんのエンジニアと繋がって良い影響を与え合っていきたい

[SK@Programming @SK_Programming]

Progateなどでプログラミングの勉強を始め、難しい..と自信を無くした人は多いでしょう。

でも大丈夫。
続けていって"これあの時やったやつ！"の繰り返しで徐々に覚えていくのがプログラミングを習得するってことです。

#プログラミング初心者
#プログラミング学習
#駆け出しエンジニアと繋がりたい

[はら @haraponta1496]

やりました！！！
「クラウドワークス　提案」
「クラウドワークス　提案文」

検索1位です！！！！
SNSマーケティングにフルコミット→SEO改善はちょろっとで成果でました😊
これからも企画とブログで１UPをお手伝いしてまいります😊

最近はクライアントのSEOコンサルもやらせて頂いています🙇‍♀️

[こうき | 間借りカレーで日本一周中 @tanshiokoki73]

ブログ書きました🐮

昨日のウェビナーでも少し話したんですが
制作会社と一緒にお仕事をする時の
僕がこれまでに体験してきた流れや必要と思える事項をまとめてます

営業の部分は今回は省略してますが
コミュニケーションを大切にスムーズに業務をこなしましょう！

https://t.co/EFitnuRAFV

[しょーご@しょーごログ運営 @samuraibrass]

ここ数日ずっと練習題材作るためXD触ってたけど、ついにできた...

[はら @haraponta1496]

久しぶりにブログを更新しました。
５０万円（＆月10万円のWEBマーケ代行）の案件獲得までのプロセスというか経緯をまとめてみました。

少しでもお仕事のスタンスのヒントになれば幸いです！

（自分の中では）高額案件受注までの経緯を共有します。 https://t.co/z3lb7uMEwz

[SK@Programming @SK_Programming]

Sassを使うメリットは、
①入れ子（ネスト）
②ファイル分割
③変数/mixinによるコードの使い回し
による記述量の削減、メンテナンス性のUPです。

↓を参考にファイル分割をしてみると修正の���やすさを実感できました🙆‍♂️
https://t.co/xbxkxXJhb9

#今日の積み上げ
#駆け出しエンジニアと繋がりたい

[SK@Programming @SK_Programming]

✅ヘッダーメニューのマウスホバーで、下線が中央から左右へ出現するアニメーションを付ける方法

before/after疑似要素で下線を左右に分け、hover時にwidthを0→50%にすればOKです🙆‍♂️

https://t.co/V8i7aLpyz3

#今日の積み上げ
#駆け出しエンジニアと繋がりたい

[SK@Programming @SK_Programming]

✅Googleフォームを静的サイトに埋め込む
＋Ajax非同期通信によりページ遷移せずに送信

しょーごさん(@samuraibrass)の下記の記事を参考にさせていただきました🙇‍♂️
https://t.co/pJsqIEInQZ

#今日の積み上げ
#駆け出しエンジニアと繋がりたい

[SK@Programming @SK_Programming]

✅slick
：スライダー用のjQueryプラグイン

CDNで導入し、jsファイルでスライドしたい要素を囲うdivタグを指定しslick()を実行するだけで実装可。

スーパー簡単です🙆‍♂️

https://t.co/88itXTL0tM

#今日の積み上げ
#駆け出しエンジニアと繋がりたい

[SK@Programming @SK_Programming]

✅AOS(Animate On Scroll)
：スクロールアニメーション用のJavaScriptプラグイン

ページのスクロールに合わせて要素をフワッと登場させたりできます🙆‍♂️

https://t.co/hNZcL8U5kx

#今日の積み上げ
#駆け出しエンジニアと繋がりたい

[SK@Programming @SK_Programming]

✅Typed.js
：タイピングアニメーション用のJavaScriptプラグイン

CDNで導入し、jsファイルで表示する文字列の配列/タイピング速度/ループ有無を指定するだけで実装可。

見てて楽しいのでポートフォリオに入れてみます❗️

https://t.co/iYFV2prKUR

#今日の積み上げ
#駆け出しエンジニアと繋がりたい

[SK@Programming @SK_Programming]

ページ上部に謎の空白が現れた。
→bodyのmarginを0にしてもダメ
…(1時間ハマる)
→head内のlinkタグの末尾に全角空白があった💧
➡全角空白を可視化するプラグイン"zenkaku"を入れた。

どこかからコードをコピーしてきてうまく動かない時は、全角空白に���意です🙆‍♂️

#駆け出しエンジニアと繋がりたい

[SK@Programming @SK_Programming]

favicon生成ツール
https://t.co/E5Nm5dm8NO

任意の画像ファイルを読み込むと、
✅favicon.ico
✅apple-touch-icon-180x180.png（スマホ用のタッチアイコン）
を自動生成してくれます。

あとはHTMLのbodyタグ内でアイコン設定すればOKです🙆‍♂️

#今日の積み上げ
#駆け出しエンジニアと繋がりたい

[ものりす @monolith_j]

こちらから受講できます✍️
2~3週間あれば取得可能だと思います

https://t.co/X74rWaYrIM

[SK@Programming @SK_Programming]

✅Emmetで要素に複数のクラス名を付けたい時は、".クラス名"を繋げて書けばOKです。

なぜか一度に１つまでしか付けられないと思い込んでいました💧
今更知りましたがこれで少し効率UPです！

#今日の積み上げ
#プログラミング初心者
#駆け出しエンジニアと繋がりたい

[SK@Programming @SK_Programming]

ポートフォリオ作成に役立ちそうなBootstrapの無料テンプレート５選

①https://t.co/A66fFZmfhG
���https://t.co/C8ieU7GbpV
③https://t.co/hGhnW4lptJ
④https://t.co/KAPLsUBvzW
⑤https://t.co/4HEV1XdSN6

ソースを見るだけでもかなり勉強になります🙆‍♂️

#駆け出しエンジニアと繋がりたい

[SK@Programming @SK_Programming]

自分の仕事の哲学は"次工程はお客様"です。

①スキルが無くても出来ないなりにお客様の困りごと解決に全力で取り組む
↓
②その姿勢が評価され信用を��る
↓
③徐々にスキルが追いついて仕事を短納期で終わらせられるようになる
↓
④更に信用が倍増していく

#駆け出しエンジニアと繋がりたい

[SK@Programming @SK_Programming]

信頼を得られる人の考え方

✅次工程はお客様

社内の人/社外の人、部署内/部署外、上司/先輩/���輩などは関係ありません。

"自分と働く全ての人はお客様"と考えて行動すれば、周囲からの信頼はぐんぐんと積みあがっていきます。

#今日の積み上げ
#駆け出しエンジニアと繋がりたい

[SK@Programming @SK_Programming]

CSSで要素の幅を画面いっぱい広げようと
✅width: 100vw;
としてしまうと、縦スクロールバーの幅の分、はみ出てしまいます。

なので、シンプルに
✅width: 100%;
とすれば画面内に収まります🙆‍♂️
(親要素も幅100%なら)

#今日の積み上げ
#プログラミング初心者
#駆け出しエンジニアと繋がりたい

[SK@Programming @SK_Programming]

#今日の積み上げ
✅CSSでinputやbuttonタグに font-family や font-size は継承されません。

↓を記述すればOKです🙆‍♂️
button, input, select, textarea {
font-family: inherit;
font-size: 100%;
}

https://t.co/4sUyQmNb6s

#プログラミング初心者
#駆け出しエンジニアと繋がりたい

[SK@Programming @SK_Programming]

smallタグのサイズ指定

・フッター内のコピーライト表示はsmallタグで囲う
・smallタグで囲うとサイズが1.2倍小さくなる

つまり、コピーライトの"font-size"には指定サイズの1.2倍大きい値を指定する。

ということですね🤔

#プログラミング初心者
#駆け出しエンジニアと繋がりたい

[SK@Programming @SK_Programming]

CSSで
✅画面幅によって改行の有無を切り替える方法

brタグにクラス名を付け、
・デフォルトは非表示(display: none)、
・メディアクエリを使い画面が小さいときに表示(display: block)

とすればOKです🙆‍♂️

#今日の積み上げ
#プログラミング初心者
#駆け出しエンジニアと繋がりたい