マガジンのカバー画像

Web開発日記

118
Webサービスを作るにあたっての個人的メモ
運営しているクリエイター

2018年12月の記事一覧

Githubにissueのテンプレートを作成する方法

Githubにはissueのテンプレート機能があるようなので利用してみました。テンプレートを作成することで、複数人数で開発していても issue の書き方が統一できるので便利です。 それでは issue のテンプレート作成方法を説明します。 Githubに issue テンプレートを作成する方法 1. Settingsページへ移動 Githubの 『Settings』 → 『Options』 をクリックします。 2. テンプレート作成画面に移動 画面中程にある F

Cacooを利用してER図を簡単に作成する方法

基本的にWebのディレクションとカスタマーサポートを中心にやっているのですが、最近Webの設計・制作もやることが増えてきました。 今までだったら設計はとりあえずで簡単にやって、いきなり制作していたのですが、最近は思うところもあり設計をしっかりやっていこうという風にしています。 で、今回はER図を作ることに。立て続けに2つのプロジェクトでER図を作る機会が発生しました。せっかくの機会なので、ここらで本格的にER図の作り方を学んでみようじゃないかと思いました。 ということでま

dockerで ERROR: Encountered errors while bringing up the project. というエラーが出た時に docker stop $(docker ps -q) ↓ docker-compose up・・・ とやるとうまくいった。

画像のうえに複数の文字を重ねる方法【CSS】

今回はCSSで画像の上に複数の文字を重ねる方法を記載します。 やりたいこと画像のうえに、「カテゴリ名」と「日付」を表示したいという案件が発生したので複数表示させる方法を調べました。 やりたいこととしては下記のような表示方法です。 画像参照:LIG 画像に「NEW」と「アイコン」が重なって表示されています。こんな感じのを目標にします。 対応方法対応方法を記載します。HTML、CSSで対応します。 今回は画像に「カテゴリ名」と「日付」を表示させる方法を記載します。 ※「カ

画像のうえに文字を重ねる方法【css】

cssで画像に文字を重ねる方法を記載します。 やりたいことよくある新着のマークや 画像参照:ZOZOTOWN カテゴリを表示させたりしたいのです。 画像参照:SPOT 対応方法早速ですが対応方法を記載します。今回はCSSで対応します。 今回は画像に「NEW!」と表示させる方法を記載します。 HTML <div class="new_box new_icon"> <img src="/image.jpg"></div> CSS .new_box{

ローカルのディレクトリをGithubへアップロードする方法

今回はローカル環境で作業していたプロジェクトを、Githubにアップする方法を記載します。 前提 ・Gitをインストールしていること(※1) ・GitHubのアカウントをすでに作成済みであること(※2) ・今回はMacで作業してます。  ※1 まだインストールしていない方はこちらを参考にどうぞ  ※2 アカウント持っていない方はこちらを参考にどうぞ それでは手順を説明します。 Githubリポジトリを作成する。まずGithubを開きます。GIthubのマイページを開き、

Google Apps Script のはじめ方【超初級編】

今更ながらGoogle Apps Script利用してみました。初めての方向けに導入方法をメモします。 目次 1. Google Apps Scriptとは? 2. Google Apps Scriptを利用できるようにする。 3. Google Apps Scriptを利用する。 4. Webアプリケーションとして公開する。 5. Google Apps Scriptを利用して何をしたいの? --- 🌍 --- 1. Google Apps Scriptとは?Goog

Adobe XD とZeplinを連携してコーディングを楽する方法

目次 ・はじめに (コーディングすることになったわけ) ・Zeplinインストール ・Adobe XDとの連携 はじめに今弊社で開発しているプロジェクトで、コーディングをする機会がやってきました。 現在デザイナーさんにAdobe XDでデザインを作ってもらっており、本来であればそのデータをもとにエンジニアさんにコーディングからお願いするように依頼していたのですが、 コーディングまで対応するとスケジュール間に合わないかも!(泣)と言われたため、それならこちらでやってみるかと

ポートフォリオサイトを作ろう!【第5回ファイル作成編】

※この記事について 現在Nuxt+Netlify+Contentfulでポートフォリオサイトを構築しており、その連載記事となります。 連載記事はマガジンにまとめています。こちらをご覧ください。 ポートフォリオサイトを作ろう。今回で第5回目です。 今回は前回の設計を元に、ファイルを作っていこうと思います。一旦必要な画面のおさらいです。 TOP - about - work (contentfulで書いた記事を一覧表示) - work detail (content

ポートフォリオサイトを作ろう!【第4回画面設計編】

※この記事について 現在Nuxt+Netlify+Contentfulでポートフォリオサイトを構築しており、その連載記事となります。 連載記事はマガジンにまとめています。こちらをご覧ください。 ポートフォリオサイトを作ろう。今回で第4回目となりました。 今回は技術のことは一旦置いておいて、どのような画面にするかの設計をしたいと思います。 必要な画面と画面遷移の作成。まず必要な画面ですが、下記のような構成を考えています。 TOP - about - work (c