みみぺんブログ

WEBデザイナー、エンジニア、プログラマー向けの記事を投稿します

GASを使ってGoogleスプレッドシートのデータを取得してみよう!

はじめに こんにちは、かずん(@kazoonLab)です。 Googleスプレッドシートを使ったアプリを作るのが比較的簡単だったので、それを題材に記事を書こうと思いました。 使用するのはGAS(Google Apps Script)というスクリプト言語です。 GASを使うことで、Google…

コーディング練習(5) positionを使用してトップへ戻るボタンを実装しよう

こんにちは、かなきち(@kanakichi0801)です。 この記事で、トップへ戻るボタンをpositionプロパティを使用して実装していきます。 今回コーディングする箇所はフッターです。フッターにはよくコピーライトがあります。コピーライトの記述する際に使用するタ…

JavaScriptでTodoリスト作成しよう〜Todoを完了させてみよう〜

はじめに こんにちは、かずん(@kazoonLab)です。 前回の記事では、Todoリスト用のディレクトリを作って、Todoの登録・削除機能を実装しました。 前回の記事をまだ見てない方は、以下のリンクからご覧いただけます! blog.mimipen.net 今回の記事では、Todoが…

position プロパティまとめ!基本から応用まで徹底解説!(relative・absolute・fixed・static)【CSS初心者入門】

こんにちは、かなきち(@kanakichi0801)です。今回は、CSSプロパティpositionについて解説していきます! 要素を自由な位置に配置する方法がこの記事で分かります! コーディングを始めたばかりの人でも、このプロパティの存在はなんとなくご存知なのではない…

JavaScriptでTodoリストを作ろう!(1)〜Todoの登録/削除まで〜【JavaScript初心者入門】

はじめに こんにちは、かずん(@kazoonLab)です。 今回の記事から、JavaScriptを使って「Todoリスト」を作っていきます! 今回は、タスクを追加して削除するまでを作ります!イメージは↓の通りです。 複数回に分けて、少しずつアップデートしていく予定です。…

コーディング練習(4) Google mapの埋め込み方&拡大方法を解説

こんにちは、かなきち(@kanakichi0801)です。 前回の続きで、今回は以下の部分をコーディングしていきます。さっそく作成するという方はこちらをクリック! 今回はちょっと長めです。めげずに一緒にやりきりましょう! 前回の記事をまだ見ていないよという方…

コマンド操作でパッケージ管理ツール「npm」を使ってみよう!

はじめに こんにちは、かずん(@kazoonLab)です。 前回の記事では、パッケージ管理ツール「npm」についてとインストール方法にについてご説明しました。 blog.mimipen.net 今回の記事では、npmを使ってパッケージをインストールし、コードの中で使ってみよう…

コーディング練習(3)特殊文字を使いメニュー表を実装しよう!

こんにちは、かなきち(@kanakichi0801)です。 前回の続きで、今回は以下の部分をコーディングして行きます。さっそく作成するという方はこちらをクリック! 前回の記事をまだ見ていないよという方は、以下記事から一緒にホームページを作成してみましょう! …

便利なパッケージ管理ツール「npm」をインストールしてみよう!

はじめに こんにちは、かずん(@kazoonLab)です。 今後、何記事かにわたり、パッケージ管理ツール「npm」の使い方を解説していきます。 今回の記事では、パッケージ管理ツールの役割とパッケージ管理ツール「npm」のインストール方法をご紹介します。 「npm」…

コーディング練習(2) 隣接セレクタ(li + li)の使い方

こんにちは、かなきち(@kanakichi0801)です。 前回の続きで、今回は以下の部分をコーディングして行きます。 さっそく作成するという方はこちらをクリック! 前回の記事をまだ見ていないよという方は、以下記事から一緒にホームページを作成してみましょう!…

「ターミナルでGitを使うと幸せになれる」3つの理由

はじめに こんにちは、かずん(@kazoonLab)です。 今回の記事では、バージョン管理ツール「Git」をターミナル(コマンドラインツール)で利用するメリットを紹介していきます! Gitのことはなんとなく分かっているけど、ツールの使い方を覚えるのに苦労したこと…

コーディング練習(1) ヘッダーとメインビジュアルを作ろう!

こんにちは、かなきち(@kanakichi0801)です 今回から、ホームページの作成に入っていきます! しかし、これが必ずしも100%正解ではありません。コーディングにはいろんな組み方がありますのであくまで参考としてお読みください。 また、初心者向けということ…

CSSで横並びにする方法 〜初心者はどれを選択すればいい?〜 Inline-block・Float・Flexbox〜 【CSS初心者入門】

こんにちは、かなきち(@kanakichi0801)です 今回は、CSS初心者入門【第五回】ということで、CSSで横並びにする方法を紹介していくよ! 横並びにする方法は数あれど、初心者が選択すべき方法はどれなのか? 迷うところですよね。 この記事では、Inline-block…

SVGでアニメーションを実装してみよう!可愛いサンプルもあるよ!

はじめに こんにちは、かずん(@kazoonLab)です。 前回の記事では、SVGに関する基礎的な知識、およびブラウザへの表示方法をざっとご紹介しました。 blog.mimipen.net 今回は、CSS/JSを使って、ブラウザでSVGにアニメーションをつけていこうと思います。 この…

widthとheightの使い方まとめと注意点について【CSS初心者入門】

こんにちは、かなきち(@kanakichi0801)です 今回は、CSS初心者入門【第四回】ということで、width(幅)とheight(高さ)の使い方と注意点を紹介していくよ! 「width:100%と指定したら要素がはみ出てしまう。。。なんで?」とこの記事に辿り着いた方、そのもや…