あすか🐱UGOK

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

あすか🐱UGOK

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

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

あすか🐱UGOK

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

      　今回は、自分が勉強中のスキルを紹介するページと、ポートフォリオサイトのレスポンシブ対応についてまとめていきたいと思います。 しかし、スキルページは特別紹介するほど凝った作りではないので、メインは後者のレスポンシブ対応について述べていきます。 スキルページの作り方➀スキルページの背景設定 　今回はbackground-blend-modeを使って、背景に設定する画像を異なった色で表示させました。 手順 ・background-imgで背景画像を指定。 ・backgroun

      あすか🐱UGOK

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

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

        あすか🐱UGOK

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

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

          あすか🐱UGOK

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

        あすか🐱UGOK

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

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

          あすか🐱UGOK

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

          あすか🐱UGOK

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

          　夏休みも始まってしまったことですし、この期間を利用して自分のポートフォリオサイトを作ってみようと思います。 しかし、いざポートフォリオサイトを作ろう！と意気込んでも何から手を付け始めればよいのやら…やみくもに頭に浮かんだサイトをノープランでコーディングするわけにもいきませんし。 そこで私は、Figmaというデザインツールを用いて、まずは ①ポートフォリオサイトに記載する情報 ②サイトのレイアウトとデザイン から考え始めることにしました。 ポートフォリオサイトに記載す

          あすか🐱UGOK

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

          あすか🐱UGOK

          要素の位置決め

          今回は、画像の上に文字を重ねたいとき、文字を○pxだけ右にずらしたい時などのような、要素の位置を細かく指定する方法を紹介していきます。 positionプロパティpositionプロパティとは、要素の位置を指定する時にCSS内で使用されるプロパティです。実際にpositionプロパティは以下のように記述されます。ちなみに以下のような書き方はpositionプロパティに限らず、CSSの基本文法となっているので必ず押さえておきましょう。 セレクタ { position: 値

          あすか🐱UGOK

          要素の位置決め

          あすか🐱UGOK

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

          こんにちは。今回は、私がwebコーディングの学習を始めて一番最初に躓いたフォームの作り方について書いていこうと思います。 まず、皆さんはフォームというものがどんなものであるか知っていますか？言葉で説明すると少しわかりにくいと思ったので、画像を載せておきます。 今回は上記のようなフォームを作るために必要な知識を、順番に説明していきたいと思います。（いくつか追加する内容もあります） ※上の画像にはCSSでの加工を加えてあります。 <form>タグ<form>タグとは、フォ

          あすか🐱UGOK

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

          あすか🐱UGOK

          私と webコーディング

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

          あすか🐱UGOK

          私と webコーディング

          あすか🐱UGOK