エンジニアステップ

初心者・未経験エンジニア向けの技術ブログ

WEBサイト【制作】

OGP設定方法 | WEBサイト制作初心者のための必要最低限のSNS対策【チートシート】

WEBサイト制作初心者は、最低限の「OGP設定」をすることで、SNSシェアに向けて対策をしましょう。 本記事では、 OGPとは何か? 最低限設定するべき内容 について語ります。 OGPとは?なぜ必要? OGPに最低限設定するべき内容まとめ OGPとは?なぜ必要? OGP…

【HTMLの基本】HTMLのひな形について解説【Emmetの「!」展開】

emmetを使って「!」と打つとHTMLの雛形が展開されます ↓ <html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> </body></html> この中身を簡単に解説します! EmmetのHTMlの雛形に…

【DAY22,23】スムーススクロールとonclickで下線をひく【#30DAYSトライアル2nd】

こんにちは、アルパカです #30DAYSトライアル2ndの復習&解説記事です。 個人的につまずいた箇所、調べた箇所を中心に書いています。 » 参考:Webコーダーとして仕事できるようになる30日まとめ デイトラ課題 【DAY22】スムーススクロールを作る 【DAY23】ペ…

【DAY20,21】スクロールのアニメーションとドロワーメニュー【#30DAYSトライアル2nd】

こんにちは、アルパカです #30DAYSトライアル2ndの復習&解説記事です。 個人的につまずいた箇所、調べた箇所を中心に書いています。 » 参考:Webコーダーとして仕事できるようになる30日まとめ デイトラ課題 【DAY20】アニメーション用のライブラリWow 【DA…

【DAY19】jQueryのライブラリを使う。スライダー(カルーセル)を作る【#30DAYSトライアル2nd】

こんにちは、アルパカです #30DAYSトライアル2ndの復習&解説記事です。 個人的につまずいた箇所、調べた箇所を中心に書いています。 » 参考:Webコーダーとして仕事できるようになる30日まとめ 【DAY19課題】jQueryのライブラリを使う。スライダー(カルー…

【DAY18】Progate「jQuery上級編」学習(連想配列やjqueryメソッド)【#30DAYSトライアル2nd】

こんにちは、アルパカです #30DAYSトライアル2ndの復習&解説記事です。 個人的につまずいた箇所、調べた箇所を中心に書いています。 » 参考:Webコーダーとして仕事できるようになる30日まとめ 【DAY18課題】Progateで「jQuery上級編」を学ぶ jQueryの各種…

#30DAYSトライアルの感想を勝手にまとめた

30DAYSトライアル感想まとめ エンジニアのショーヘーさん(@showheyohtaki)が主催した「#30DAYSトライアル」の感想Tweetをまとめてみました。 「私のも載せて!」って方は、アルパカ(@engineeraru)に連絡ください~(灬╹ω╹灬) #30DAYSトライアルの感想まと…

【DAY13】Progateで「JavaScriptⅠ」を学ぶ【#30DAYSトライアル2nd】

こんにちは、アルパカです #30DAYSトライアル2ndの復習&解説記事です。 個人的につまずいた箇所、調べた箇所を中心に書いています。 » 参考:Webコーダーとして仕事できるようになる30日まとめ 【DAY13課題】Progateで「JavaScriptⅠ」を学ぶ HTMLやCSSとJav…

【DAY12】コーディング後の品質を担保するテスト【#30DAYSトライアル2nd】

こんにちは、アルパカです #30DAYSトライアル2ndの復習&解説記事です。 個人的につまずいた箇所、調べた箇所を中心に書いています。 » 参考:Webコーダーとして仕事できるようになる30日まとめ 【DAY12課題】コーディング後の品質を担保するテスト 品質保証…

【DAY11】Webフォント、デバイスフォント、画像フォントの理解【#30DAYSトライアル2nd】

こんにちは、アルパカです #30DAYSトライアル2ndの復習&解説記事です。 個人的につまずいた箇所、調べた箇所を中心に書いています。 » 参考:Webコーダーとして仕事できるようになる30日まとめ 【DAY11課題】Webフォント、デバイスフォントの理解 WEBページ…

【DAY10】マウスホバー時の動きを付ける(transition,transform)【#30DAYSトライアル2nd】

こんにちは、アルパカです #30DAYSトライアル2ndの復習&解説記事です。 個人的につまずいた箇所、調べた箇所を中心に書いています。 » 参考:Webコーダーとして仕事できるようになる30日まとめ 【DAY10課題】マウスホバー時の動きを付ける transitionとtran…

【DAY8】AdobeXDからフッターのコーディング【#30DAYSトライアル2nd】

こんにちは、アルパカです #30DAYSトライアル2ndの復習&解説記事です。 個人的につまずいた箇所、調べた箇所を中心に書いています。 » 参考:Webコーダーとして仕事できるようになる30日まとめ 【DAY8課題】AdobeXDからフッターのコーディング WEBサービス…

【DAY7】AdobeXDからお問い合わせフォームのコーディング【#30DAYSトライアル2nd】

こんにちは、アルパカです #30DAYSトライアル2ndの復習&解説記事です。 個人的につまずいた箇所、調べた箇所を中心に書いています。 » 参考:Webコーダーとして仕事できるようになる30日まとめ 【DAY7課題】AdobeXDからお問い合わせフォームのコーディング …

【DAY6】AdobeXDからテーブルとGoogleMap埋め込みコーディング【#30DAYSトライアル2nd】

こんにちは、アルパカです #30DAYSトライアル2ndの復習&解説記事です。 個人的につまずいた箇所、調べた箇所を中心に書いています。 » 参考:Webコーダーとして仕事できるようになる30日まとめ 【DAY6課題】AdobeXDからテーブルとGoogleMap埋め込みコーディ…

【DAY5】AdobeXDからニュース系のコーディング【#30DAYSトライアル2nd】

こんにちは、アルパカです #30DAYSトライアル2ndの復習&解説記事です。 個人的につまずいた箇所、調べた箇所を中心に書いています。 » 参考:Webコーダーとして仕事できるようになる30日まとめ 【DAY5課題】AdobeXDからニュース系のコーディング AdobeXDか…

【DAY4】ボタン、見出しを自在に作れるようになる【#30DAYSトライアル2nd】

こんにちは、アルパカです #30DAYSトライアル2ndの復習&解説記事です。 個人的につまずいた箇所、調べた箇所を中心に書いています。 » 参考:Webコーダーとして仕事できるようになる30日まとめ 【DAY4課題】ボタン、見出しを自在に作れるようになる ボタン…

【DAY3】PerfectPixelを使ってチェックと修正【#30DAYSトライアル2nd】

こんにちは、アルパカです #30DAYSトライアル2ndの復習&解説記事です。 個人的につまずいた箇所、調べた箇所を中心に書いています。 » 参考:Webコーダーとして仕事できるようになる30日まとめ 【DAY3課題】PerfectPixelを使ってチェックと修正 Perfect Pix…

【DAY2】XDから横並びのカードのコーディング【#30DAYSトライアル2nd】

こんにちは、アルパカです #30DAYSトライアル2ndの復習&解説記事です。 個人的につまずいた箇所、調べた箇所を中心に書いています。 » 参考:Webコーダーとして仕事できるようになる30日まとめ 【DAY2課題】XDから横並びのカードのコーディング Cardの下線…

【DAY1】XDからヘッダーとメインビジュアルのコーディング【#30DAYSトライアル2nd】

こんにちは、アルパカです #30DAYSトライアル2ndの復習&解説記事です。 個人的につまずいた箇所、調べた箇所を中心に書いています。 » 参考:Webコーダーとして仕事できるようになる30日まとめ 【DAY1課題】XDからヘッダーとメインビジュアルのコーディング…

【Webコーダーとして仕事できるようになる30日】デイトラ2期まとめ【#30DAYSトライアル2nd】

こんにちは、アルパカです 「Webコーダーとして仕事できるようになる30日」と題しまして「#30DAYSトライアル」2期目が開催です。 Webコーダーとして仕事できるようになる30日【概要】 学習記録まとめ【Webコーダーとして仕事できるようになる30日】 Adobe XD…

DAY30.『成長し続けるための3つのマインドを持とう』 #30DAYSトライアル【最終日】

DAY30.『成長し続けるための3つのマインドを持とう』#30DAYSトライアルです。 最終日! » 参考:【初心者からサイト制作で月5万円を稼ぐための30日間トライアル】まとめ www.engineer-step.com DAY30.『成長し続けるための3つのマインドを持とう』 受講者の…

DAY29.『めんどくさいけど大切な事務処理をオンラインで簡単に終わらせよう』 #30DAYSトライアル

DAY29.『めんどくさいけど大切な事務処理をオンラインで簡単に終わらせよう』#30DAYSトライアルです。 » 参考:【初心者からサイト制作で月5万円を稼ぐための30日間トライアル】まとめ www.engineer-step.com DAY29.『めんどくさいけど大切な事務処理をオン…

DAY25.『実践的にコーディング力を伸ばそう』 #30DAYSトライアル

DAY25.『実践的にコーディング力を伸ばそう』#30DAYSトライアルです。 » 参考:【初心者からサイト制作で月5万円を稼ぐための30日間トライアル】まとめ www.engineer-step.com DAY25.『実践的にコーディング力を伸ばそう』 LP(randhingu pe-zi)のHTMLコーデ…

DAY24.『サイトをより見やすくオシャレにするには』 #30DAYSトライアル

DAY24.『サイトをより見やすくオシャレにするには』 #30DAYSトライアルです。 » 参考:【初心者からサイト制作で月5万円を稼ぐための30日間トライアル】まとめ www.engineer-step.com DAY24.『サイトをより見やすくオシャレにするには』 Bootstrapっぽさを無…

DAY23.『ロゴ・画像作成に便利なオンラインサービス紹介』 #30DAYSトライアル

DAY23.『ロゴ・画像作成に便利なオンラインサービス紹介』 #30DAYSトライアルです。 » 参考:【初心者からサイト制作で月5万円を稼ぐための30日間トライアル】まとめ www.engineer-step.com DAY23.『ロゴ・画像作成に便利なオンラインサービス紹介』 ロゴ・…

DAY22.『問い合わせフォームを実装しよう』 #30DAYSトライアル

DAY22.『問い合わせフォームを実装しよう』 #30DAYSトライアルです。 » 参考:【初心者からサイト制作で月5万円を稼ぐための30日間トライアル】まとめ www.engineer-step.com DAY22.『問い合わせフォームを実装しよう』 フォームを作るためにHTMLのformタグ…

DAY21.『モデルを決めて、実在するお店のLPを作ってみよう①』 #30DAYSトライアル

DAY21.『モデルを決めて、実在するお店のLPを作ってみよう①』 #30DAYSトライアルです。 トークイベントがあったので、1日お休みでした。 » 参考:【初心者からサイト制作で月5万円を稼ぐための30日間トライアル】まとめ www.engineer-step.com DAY21.『モデ…

DAY20.『ポートフォリオを公開しよう』 #30DAYSトライアル

DAY20.『ポートフォリオを公開しよう』 #30DAYSトライアルです。 ポートフォリオサイトをついに公開! » 参考:【初心者からサイト制作で月5万円を稼ぐための30日間トライアル】まとめ www.engineer-step.com DAY20.『ポートフォリオを公開しよう』 ポートフ…

DAY19.『自分のポートフォリオサイトを作ろう②』 #30DAYSトライアル

DAY19.『自分のポートフォリオサイトを作ろう②』 #30DAYSトライアルです。 ポートフォリオサイトを作成中です。 » 参考:【初心者からサイト制作で月5万円を稼ぐための30日間トライアル】まとめ www.engineer-step.com DAY19.『自分のポートフォリオサイトを…

DAY18.『HTMLテンプレートを使ってみよう+自分のポートフォリオサイトを作ろう①』 #30DAYSトライアル

DAY18.『HTMLテンプレートを使ってみよう+自分のポートフォリオサイトを作ろう①』 #30DAYSトライアルです。 ついに自分のポートフォリオサイト作成に着手です!楽しいです! » 参考:【初心者からサイト制作で月5万円を稼ぐための30日間トライアル】まとめ …