コーディング全般
コーディングの手順
いざコーディングし始めるときに何から手を付けるかといえばもちろんhtmlなんですが、それには理由があって文書構造や命名ルール、要素の選定にまずは集中したほうがよいです。
✅コーディングの手順
いざコーディングし始めるときに何から手を付けるかといえばもちろんhtmlなんですが、それには理由があって文書構造や命名ルール、要素の選定にまずは集中したほうがよいです。#30DaysCordingTips #DAY1 #30DAYSトライアル #100daysofcode— hoshi (@funclur_01) March 5, 2019
モジュール、コンポーネントの概念
実装する時はそれがstructure(header,footerなど)なのかmoduleなのか固有パーツなのかを意識して作りましょう。moduleの概念としては使いまわしても予期せぬ崩れなどがないことが前提です
✅モジュール、コンポーネントの概念
実装する時はそれがstructure(header,footerなど)なのかmoduleなのか固有パーツなのかを意識して作りましょう。moduleの概念としては使いまわしても予期せぬ崩れなどがないことが前提です。#30DaysCordingTips #DAY2 #30DAYSトライアル #100daysofcode— hoshi (@funclur_01) March 6, 2019
崩れの原因の見つけ方
主に崩れがあるけど何が原因か見当つかないときは要素を消していくことが重要です。具体的には崩れのない状態にctrl+zで戻るor要素やスタイルを消して崩れのない状態まで戻ると原因がわかります。
✅崩れの原因の見つけ方
主に崩れがあるけど何が原因か見当つかないときは要素を消していくことが重要です。具体的には崩れのない状態にctrl+zで戻るor要素やスタイルを消して崩れのない状態まで戻ると原因がわかります。#30DaysCordingTips #DAY16 #30DAYSトライアル #100DaysOfCode
⇩順序— hoshi (@funclur_01) March 26, 2019
HTML
button要素とa要素の使い分け
a要素はリンク、button要素は何らかのアクションが発動すると覚えれば使い分けはokなんですが、アクションを発動するけどa要素を使う場合もあります。例えば、モーダルウィンドウ、タブはhref属性に
値を入れて、JSでその値を使ってコンテンツを表示させたりするためにa要素にする例があります。
✅button要素とa要素の使い分け
a要素はリンク、button要素は何らかのアクションが発動すると覚えれば使い分けはokなんですが、アクションを発動するけどa要素を使う場合もあります。例えば、モーダルウィンドウ、タブはhref属性に#30DaysCordingTips #DAY6 #30DAYSトライアル #100DaysOfCode
↓続き— hoshi (@funclur_01) March 11, 2019
em strongの使い分け
どちらも強調ではあるのですが、その中でもstrongは重要性、緊急性を意味付けします。例えばformの必須など。emは文中のどこを強調したいか。例えば価格の数値部分のみemにするなどがよくある例です。
✅em要素とstrong要素の使い分け
どちらも強調ではあるのですが、その中でもstrongは重要性、緊急性を意味付けします。例えばformの必須など。emは文中のどこを強調したいか。例えば価格の数値部分のみemにするなどがよくある例です。#30DaysCordingTips #DAY8 #30DAYSトライアル #100DaysOfCode— hoshi (@funclur_01) March 13, 2019
dl要素
dl要素は割とくせ者でdtを見出しっぽくしてしまいがちなんですがあくまでddを説明するためのテキストで、さらにリストになってると尚良い使い方です。また、ulはliしか直下に置けないですが、dlはdiv置けます。
✅dl要素
dl要素は割とくせ者でdtを見出しっぽくしてしまいがちなんですがあくまでddを説明するためのテキストで、さらにリストになってると尚良い使い方です。また、ulはliしか直下に置けないですが、dlはdiv置けます。#30DaysCordingTips #DAY14 #30DAYSトライアル #100DaysOfCode— hoshi (@funclur_01) March 22, 2019
olの使いどころ
✅ol要素の使いどころ
olはliと違って順序を伴うリストで使用しますが、それは番号あるなしに関わらずです。例えばパンクズリストは番号は通常つかないですが、olで組んだ方がセマンティックです。#30DaysCordingTips #DAY19 #30DAYSトライアル #100DaysOfCode #新卒コーダー #駆け出しコーダー— hoshi (@funclur_01) April 1, 2019
CSS
画面サイズに合わせてfont-sizeの拡大縮小
通常しなくていいんですが、レスポンシブサイトやLPの背景にテキストが乗ってる場合は画像の縮小に合わせてテキストも縮小させたい時があります。
下記が計算式です。
font-size: calc(16vw * 100 / 900);
✅画面サイズに合わせてfont-sizeの拡大縮小
通常しなくていいんですが、レスポンシブサイトやLPの背景にテキストが乗ってる場合は画像の縮小に合わせてテキストも縮小させたい時があります。#30DaysCordingTips #DAY5 #30DAYSトライアル #100DaysOfCode
↓続き— hoshi (@funclur_01) March 9, 2019
マージン上?下?問題
マージン上をにつけるべきか下につけるべきかは悩むところです。自分も含め周りを見ていると初心者の頃下マージン派、慣れてきたら上マージン派に変わってく人が多いように感じます。
✅マージン上?下?問題
マージン上をにつけるべきか下につけるべきかは悩むところです。自分も含め周りを見ていると初心者の頃下マージン派、慣れてきたら上マージン派に変わってく人が多いように感じます。#30DaysCordingTips #DAY11 #30DAYSトライアル #100DaysOfCode— hoshi (@funclur_01) March 18, 2019
横並びの要素同士のマージンの取り方
横並びの時のマージンって隣接クラスにしたり、nth-childにしたりやり方様々あるのですが、親に左のネガティブマージン、子に左の同じマージン入れるのが一番楽です。
✅横並びの要素同士のマージンのとり方
横並びの時のマージンって隣接クラスにしたり、nth-childにしたりやり方様々あるのですが、親に左のネガティブマージン、子に左の同じマージン入れるのが一番楽です。#30DaysCordingTips #DAY17 #30DAYSトライアル #100DaysOfCode #新卒コーダー
⬇️解説— hoshi (@funclur_01) March 27, 2019
cssセレクタの入れ子
cssセレクタの入れ子はすればするほど読み込み速度低下するのでなるべく最小限の入れ子にするとよいです。ちなみにブラウザはul>li>aの場合aから順に読み込まれていきます。
✅cssセレクタの入れ子
cssセレクタの入れ子はすればするほど読み込み速度低下するのでなるべく最小限の入れ子にするとよいです。ちなみにブラウザはul>li>aの場合aから順に読み込まれていきます。#30DaysCordingTips #DAY18 #30DAYSトライアル #100DaysOfCode #新卒コーダー— hoshi (@funclur_01) March 29, 2019
個人的に使うcssセレクタベスト3
1位 子要素(A>B)
2位 隣接セレクタ(A + B)
3位 barで始まるfoo属性[foo^=”bar”]
ちなみに半角スペースで連結すればするほど読み込み速度は下がりますので、最低限必要な連結が求められます。
✅個人的に使うcssセレクタベスト3
1位 子要素(A>B)
2位 隣接セレクタ(A + B)
3位 barで始まるfoo属性[foo^="bar"]
ちなみに半角スペースで連結すればするほど読み込み速度は下がりますので、最低限必要な連結が求められます。#30DaysCordingTips #DAY10 #30DAYSトライアル #100DaysOfCode— hoshi (@funclur_01) March 16, 2019
z-indexのルールを決めよう
z-indexの数値をいくつにするかは慎重に決定しないと、適当な数値を入れてしまっては崩れの可能性があります。
自分のルールは以下↓
・z-index:1=デザイン上重ねたい要素
・z-index:100=topに戻る、ヘッダー固定
・z-index:1000=モーダルウィンドウ、スマホメニュー
✅z-indexのルールを決めよう
z-indexの数値をいくつにするかは慎重に決定しないと、適当な数値を入れてしまっては崩れの可能性があります。
自分のルールは以下↓#30DaysCordingTips #DAY13 #30DAYSトライアル #100DaysOfCode— hoshi (@funclur_01) March 20, 2019
cssスプライト
cssスプライトは画像読み込み速度最適化に有効な手法です。主にアイコンで使用します。簡単に言うとアイコン群を一枚の画像にしてcssの背景位置を変えて表示させるため画像のリクエストが
一回で済むため速度が改善します。 そのスプライト画像作るのめんどくない!?って話なんですが、gulpで瞬殺です。スプライト画像とcssが自動で生成されます。
https://uxmilk.jp/61374
https://qiita.com/nacam403/items/b8fe9f5d76c747cd7499 …
✅cssスプライト
cssスプライトは画像読み込み速度最適化に有効な手法です。主にアイコンで使用します。簡単に言うとアイコン群を一枚の画像にしてcssの背景位置を変えて表示させるため画像のリクエストが↓続き#30DaysCordingTips #DAY26 #30DAYSトライアル #100DaysOfCode #駆け出しコーダー— hoshi (@funclur_01) April 11, 2019
PCとスマホの改行ありなしを切り替える
PCでは改行させないけどスマホのみ改行させるのはレスポンシブデザインでは割とあるあるです。やり方は簡単でbr要素にcssのdisplayプロパティで表示・非表示するだけです↓
簡単な解説記事書きましたので良かったらご覧ください
https://frontendmemo.work/2019-04-12-180512
✅PCとスマホの改行ありなしを切り替える
PCでは改行させないけどスマホのみ改行させるのはレスポンシブデザインでは割とあるあるです。やり方は簡単でbr要素にcssのdisplayプロパティで表示・非表示するだけです↓続き#30DaysCordingTips #DAY27 #30DAYSトライアル #100DaysOfCode #駆け出しコーダー— hoshi (@funclur_01) April 12, 2019
float
floatはflexに置き換わったから覚えるの不要という意見があるのですが、既存サイトで使われていたらその理論は崩れます。またfloatなんて付与した要素とそれ以降の隣り合う要素が横並びになるので親要素の::afterにclear:both、display:blockして横並び解除させるものと覚えるだけでいいです。
✅float
floatはflexに置き換わったから覚えるの不要という意見があるのですが、既存サイトで使われていたらその理論は崩れます。またfloatなんて付与した要素とそれ以降の隣り合う要素が横並びになるので親要素の::afterにclear:both、display:blockして横並び解除させるものと覚えるだけでいいです。— hoshi (@funclur_01) April 15, 2019
flex、reverseの便利な実例
flexには要素順を変えたり逆にしたりするプロパティが用意されていて、どういう風に使うかというと例えば下記のように画像とテキストの横並びで、ソース準はテキスト→画像と同じなんですが親にクラスを付与するだけで見た目逆にしてます。
https://codepen.io/funclur/pen/QPORZX …
これによりcssの記述も減り、htmlの運用性もよくなります。
また、レスポンシブ時、スマホは画像が先、テキストが先などありますが、それにも対応できるので便利です。
↓flex便利なプロパティ
https://frontendmemo.work/2017-06-24-215720 …
✅flex、reverseの便利な実例
flexには要素順を変えたり逆にしたりするプロパティが用意されていて、どういう風に使うかというと例えば下記のように画像とテキストの横並びで、ソース準はテキスト→画像と同じなんですが親にクラスを付与するだけで見た目逆にしてます。https://t.co/EvoRUERE5q
↓続— hoshi (@funclur_01) April 16, 2019
JavaScript
JS機能一覧
静的サイトでよくあるJSの機能を以下難易度順に並べました。
・アイコンの自動付与
・スムーススクロール
・トグル
・高さ揃え
・スマホメニュー
・モーダルウィンドウ
・ナビカレント
・カルーセル他はajaxやパララックス、シュミレーションなど案件特有のJSです。逆に言うとこれらが作れれば大概の静的サイトはいけます。また使い回せるよう自作プラグインを作っておくと最強。既存のプラグインを使ってもいいですが、オプションの理解や改変も出来るようになると尚良いです。
✅JS機能一覧
静的サイトでよくあるJSの機能を以下難易度順に並べました。
・アイコンの自動付与
・スムーススクロール
・トグル
・高さ揃え
・スマホメニュー
・モーダルウィンドウ
・ナビカレント
・カルーセル#30DaysCordingTips #DAY19 #30DAYSトライアル #100DaysOfCode #新卒コーダー
↓続き— hoshi (@funclur_01) April 2, 2019
超便利な任意のJSのイベントが書かれてるファイルを探す方法
例えばこのJSどのファイルのどこに書いてあるんだ!?という時はキャプチャのように開発ツールのeventlistenerにファイルと行が書いてあります。
これでoneをクリックした時発動するJSはindex.htmlの17行目に書いてあるというのがわかります。
✅超便利な任意のJSのイベントが書かれてるファイルを探す方法
例えばこのJSどのファイルのどこに書いてあるんだ!?という時はキャプチャのように開発ツールのeventlistenerにファイルと行が書いてあります。#30DaysCordingTips #DAY21 #30DAYSトライアル #100DaysOfCode #新卒コーダー
↓続き pic.twitter.com/4n4yN0HDQb— hoshi (@funclur_01) April 3, 2019
JSがhead内ではなくbody閉じタグ前で読み込まれている理由
なぜかというとhtmlを読み込む前にJSを読み込んでもhtml要素の取得ができないからです。ファイルは上から順に読みますのでhtmlを読んだ後にJSの読み込みタグを記述することでhtmlを取得することが可能です。
onloadなどでhtml読み込み後実行させること可能です。 何にせよ読み込み順はとても大事なので意識するとよいですね^^
✅JSがhead内ではなくbody閉じタグ前で読み込まれている理由
なぜかというとhtmlを読み込む前にJSを読み込んでもhtml要素の取得ができないからです。ファイルは上から順に読みますのでhtmlを読んだ後にJSの読み込みタグを記述することでhtmlを取得することが可能です。
↓続き— hoshi (@funclur_01) April 4, 2019
比較演算子
==は絶対に使わないこと。意図しない挙動になる可能性があります。
等しくないは!==です。左辺が右辺以上 である(>=)や<=が覚えずらかったのですが、右が=と覚えるといいです。
✅比較演算子
==は絶対に使わないこと。意図しない挙動になる可能性があります。
等しくないは!==です。左辺が右辺以上 である(>=)や<=が覚えずらかったのですが、右が=と覚えるといいです。#30DaysCordingTips #DAY23 #30DAYSトライアル #100DaysOfCode #新卒コーダー— hoshi (@funclur_01) April 5, 2019
オブジェクト、クラス、インスタンスを解説
オブジェクトはモノであり、クラスは設計図、インスタンスは実際に作った物です。例えばエンジニアという設計図に対してfrontendやbackendというインスタンスを作っていきます。
✅オブジェクト、クラス、インスタンスを解説
オブジェクトはモノであり、クラスは設計図、インスタンスは実際に作った物です。例えばエンジニアという設計図に対してfrontendやbackendというインスタンスを作っていきます。#30DaysCordingTips #DAY30 #30DAYSトライアル #新卒コーダー
↓実例 pic.twitter.com/CCKXRDQk5z— hoshi (@funclur_01) April 17, 2019
photoshop
photshopスライスのしかた3つ
・オブジェクトを選択し新規レイヤーに基づくスライスを選択(ショートカットあり)
・新規レイヤーを複製してトリミング(透過があるとき便利)
・レイヤーの目のところをalt+クリック(透過がありスライスを保存したいとき便利)こちらを記事にしました。よろしければ参照ください。
https://frontendmemo.work/2019-03-13-174502
✅ photshopスライスのしかた3つ
・オブジェクトを選択し新規レイヤーに基づくスライスを選択(ショートカットあり)
・新規レイヤーを複製してトリミング(透過があるとき便利)
・レイヤーの目のところをalt+クリック(透過がありスライスを保存したいとき便利)↓続き
— hoshi (@funclur_01) March 12, 2019
画像フォーマット
画像フォーマット(拡張子)の選択はサイトルールや最適化、ページ速度改善において重要です。
・jpeg→色数の多い写真
・png24→透過
・png8→色数少ないアイコン
・gif→gifアニメーション
✅画像フォーマット
画像フォーマット(拡張子)の選択はサイトルールや最適化、ページ速度改善において重要です。
・jpeg→色数の多い写真
・png24→透過
・png8→色数少ないアイコン
・gif→gifアニメーション#30DaysCordingTips #DAY15 #30DAYSトライアル #100DaysOfCode— hoshi (@funclur_01) March 25, 2019
ツール
Web Developer
コーディングしたあとの自己チェックですが、下記のchrome adonのみで
・validator(Validate HTML)
・JS無効時(Disabled JavaScript)
・画像、alt(Display Alt attribute)
・アンカーリンク、リンク(Display Link Details)
・タイトルディスクリプション(View meta tag infomation)の確認ができるのでおすすめです
https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=ja …
✅Web-Developer
コーディングしたあとの自己チェックですが、下記のchrome adonのみで
・validator(Validate HTML)
・JS無効時(Disabled JavaScript)
・画像、alt(Display Alt attribute)
・アンカーリンク、リンク(Display Link Details)
・タイトルディスクリプション(View meta tag infomation)— hoshi (@funclur_01) March 7, 2019
ダミー画像
画像を入れることは決まってるけど、何の画像かは決めてないなどありますよね。そんな時は下記サイトでサイズや色をジェネレートしてsrcで読み込めば簡単にダミー画像が表示されるので便利です。
dummyimage.com
✅dummy image
画像を入れることは決まってるけど、何の画像かは決めてないなどありますよね。そんな時は下記サイトでサイズや色をジェネレートしてsrcで読み込めば簡単にダミー画像が表示されるので便利です。https://t.co/BT4j1lGF5o#30DaysCordingTips #DAY4 #30DAYSトライアル #100daysofcode— hoshi (@funclur_01) March 8, 2019
clip-pathツール紹介
clip-pathは表示領域を決められるcssのプロパティで、どんな形にでもくり抜くことができるためデザインにこだわったサイトやアイディア次第でポートフォリオでも活躍しそう。
✅clip-pathツール紹介
clip-pathは表示領域を決められるcssのプロパティで、どんな形にでもくり抜くことができるためデザインにこだわったサイトやアイディア次第でポートフォリオでも活躍しそう。
ツール↓https://t.co/5XVwJwrVZ9#30DaysCordingTips #DAY11 #30DAYSトライアル #100DaysOfCode pic.twitter.com/TSrwVfKzbp— hoshi (@funclur_01) March 19, 2019
やってみての感想
というわけで緩くやってた#30DaysCordingTipsが無事30日達成しました!
いいねやリツイートしていただいた方々、本当にありがとうございました!!!
個人的にはコーティングは複数ある正解の中でなぜその最適解を選んだかを説明できるかが重要だと思っています。never stop learning!
— hoshi (@funclur_01) April 17, 2019
連続ではありませんが土日を抜かしての投稿を30日続けてみての感想は結構大変でしたが、それなりに達成感がありました。
また、何よりいいねや反応をもらうことでモチベーションが維持できましたので見ていただいた皆様には感謝しております。
1投稿に収まりきらなかったり、何かと見にくかったこともあるかと思いますが、お役にたてれば幸いです。
また今後はしばらくWeb業界、転職、フリーランスについてツイートしていこうと思いますので、宜しければフォローお願いします。

コメント