あすか🐱UGOK

研究に手を出しながら、Bubble・JavaScript・HTML・CSSを勉強中です…

あすか🐱UGOK

研究に手を出しながら、Bubble・JavaScript・HTML・CSSを勉強中です。 noteでは、学習したことを少しずつアウトプットしていきたいと思います。 趣味は絵画と映画、そして愛鳥を愛でることです。

記事一覧

クラジウス教授が発見した「周囲に変化する物がなければ、熱は冷たいものから温かいものに移れない」という法則は、過去と未来を区別することができる唯一の基本的物理原則である。(カルロ・ロヴェッリ「時間は存在しない」)

ポートフォリオサイト、試しに作ってみる⑤ ~スキルページとレスポンシブ~

 今回は、自分が勉強中のスキルを紹介するページと、ポートフォリオサイトのレスポンシブ対応についてまとめていきたいと思います。 しかし、スキルページは特別紹介する…

6

ポートフォリオサイト、試しに作ってみる④ ~作品紹介ページ編~

 今回は、作品紹介ページの制作過程についてまとめていきたいと思います。 上記の画像は作品紹介ページの完成形です。 このページの「▼Click」というボタンを押すと、左…

2

ポートフォリオサイト、試しに作ってみる③ ~プロフィールページ編~

 今回は、プロフィールページ完成までのプロセスについてまとめていきたいと思います。 まず、今回作りたいプロフィールページはこちらです。 (※上記の画像は、既に一通…

3

ポートフォリオサイト、試しに作ってみる②~トップページ編~

 今回は、トップページ完成までのプロセスについてご紹介していきたいと思います。  まず、実際にコーディングする前に、簡単に手書きのHTMLの設計図を作り、頭の中でイ…

1

ポートフォリオサイト、試しに作ってみる①

 夏休みも始まってしまったことですし、この期間を利用して自分のポートフォリオサイトを作ってみようと思います。 しかし、いざポートフォリオサイトを作ろう!と意気込…

5

要素の位置決め

今回は、画像の上に文字を重ねたいとき、文字を○pxだけ右にずらしたい時などのような、要素の位置を細かく指定する方法を紹介していきます。 positionプロパティposition…

6

一つ目の壁、フォーム作成

こんにちは。今回は、私がwebコーディングの学習を始めて一番最初に躓いたフォームの作り方について書いていこうと思います。 まず、皆さんはフォームというものがどんな…

3

私と webコーディング

はじめまして、askaです。 今回、初めての投稿なので、まずは最初に簡単な自己紹介をさせていただきたいと思います。私、askaは、絵を描くこと、映画を観ること、そして家…

6

クラジウス教授が発見した「周囲に変化する物がなければ、熱は冷たいものから温かいものに移れない」という法則は、過去と未来を区別することができる唯一の基本的物理原則である。(カルロ・ロヴェッリ「時間は存在しない」)

ポートフォリオサイト、試しに作ってみる⑤ ~スキルページとレスポンシブ~

ポートフォリオサイト、試しに作ってみる⑤ ~スキルページとレスポンシブ~

 今回は、自分が勉強中のスキルを紹介するページと、ポートフォリオサイトのレスポンシブ対応についてまとめていきたいと思います。
しかし、スキルページは特別紹介するほど凝った作りではないので、メインは後者のレスポンシブ対応について述べていきます。

スキルページの作り方➀スキルページの背景設定
 今回はbackground-blend-modeを使って、背景に設定する画像を異なった色で表示させました。

もっとみる
ポートフォリオサイト、試しに作ってみる④ ~作品紹介ページ編~

ポートフォリオサイト、試しに作ってみる④ ~作品紹介ページ編~

 今回は、作品紹介ページの制作過程についてまとめていきたいと思います。

上記の画像は作品紹介ページの完成形です。
このページの「▼Click」というボタンを押すと、左二つのように、該当する作品の紹介ページが出てくる仕様になっています。また、紹介ページが出てくる時に、少しアニメーションを加えてみたいと思ったので、今回はtransitionプロパティを使って簡単なアクセントを入れてみました。

それ

もっとみる
ポートフォリオサイト、試しに作ってみる③ ~プロフィールページ編~

ポートフォリオサイト、試しに作ってみる③ ~プロフィールページ編~

 今回は、プロフィールページ完成までのプロセスについてまとめていきたいと思います。
まず、今回作りたいプロフィールページはこちらです。

(※上記の画像は、既に一通り完成させたプロフィールページの画像です。)
ひとまず、コードを書く手間を減らしたいので、前回のブログで紹介したトップページで制作したヘッダー部分のコードはコピペして使いまわします。
また、他にもHTMLのhead部分も変更を加えずにコ

もっとみる
ポートフォリオサイト、試しに作ってみる②~トップページ編~

ポートフォリオサイト、試しに作ってみる②~トップページ編~

 今回は、トップページ完成までのプロセスについてご紹介していきたいと思います。
 まず、実際にコーディングする前に、簡単に手書きのHTMLの設計図を作り、頭の中でイメージする所から始めていきました。
下記の画像が実際に作成した設計図です。(実際にコーディングしていく過程で、この設計図から何点も訂正を加えました。しかし、サイトの構成を一度頭で整理することができるので、とても役に立ちました。)

設計

もっとみる
ポートフォリオサイト、試しに作ってみる①

ポートフォリオサイト、試しに作ってみる①

 夏休みも始まってしまったことですし、この期間を利用して自分のポートフォリオサイトを作ってみようと思います。

しかし、いざポートフォリオサイトを作ろう!と意気込んでも何から手を付け始めればよいのやら…やみくもに頭に浮かんだサイトをノープランでコーディングするわけにもいきませんし。

そこで私は、Figmaというデザインツールを用いて、まずは

①ポートフォリオサイトに記載する情報
②サイトのレイ

もっとみる

要素の位置決め

今回は、画像の上に文字を重ねたいとき、文字を○pxだけ右にずらしたい時などのような、要素の位置を細かく指定する方法を紹介していきます。

positionプロパティpositionプロパティとは、要素の位置を指定する時にCSS内で使用されるプロパティです。実際にpositionプロパティは以下のように記述されます。ちなみに以下のような書き方はpositionプロパティに限らず、CSSの基本文法とな

もっとみる

一つ目の壁、フォーム作成

こんにちは。今回は、私がwebコーディングの学習を始めて一番最初に躓いたフォームの作り方について書いていこうと思います。

まず、皆さんはフォームというものがどんなものであるか知っていますか?言葉で説明すると少しわかりにくいと思ったので、画像を載せておきます。

今回は上記のようなフォームを作るために必要な知識を、順番に説明していきたいと思います。(いくつか追加する内容もあります)

※上の画像に

もっとみる

私と webコーディング

はじめまして、askaです。

今回、初めての投稿なので、まずは最初に簡単な自己紹介をさせていただきたいと思います。私、askaは、絵を描くこと、映画を観ること、そして家で飼っている愛鳥を愛でることが趣味の平凡な学生です。最近、ひょんなことからwebコーディングの勉強を始めるようになりました。ちなみに、今までブログを書いた経験もなく、習慣化できるかたいへん不安に思っております。この通り、webもブ

もっとみる