記事一覧
クラジウス教授が発見した「周囲に変化する物がなければ、熱は冷たいものから温かいものに移れない」という法則は、過去と未来を区別することができる唯一の基本的物理原則である。(カルロ・ロヴェッリ「時間は存在しない」)
ポートフォリオサイト、試しに作ってみる⑤ ~スキルページとレスポンシブ~
今回は、自分が勉強中のスキルを紹介するページと、ポートフォリオサイトのレスポンシブ対応についてまとめていきたいと思います。
しかし、スキルページは特別紹介するほど凝った作りではないので、メインは後者のレスポンシブ対応について述べていきます。
スキルページの作り方➀スキルページの背景設定
今回はbackground-blend-modeを使って、背景に設定する画像を異なった色で表示させました。
ポートフォリオサイト、試しに作ってみる④ ~作品紹介ページ編~
今回は、作品紹介ページの制作過程についてまとめていきたいと思います。
上記の画像は作品紹介ページの完成形です。
このページの「▼Click」というボタンを押すと、左二つのように、該当する作品の紹介ページが出てくる仕様になっています。また、紹介ページが出てくる時に、少しアニメーションを加えてみたいと思ったので、今回はtransitionプロパティを使って簡単なアクセントを入れてみました。
それ
ポートフォリオサイト、試しに作ってみる③ ~プロフィールページ編~
今回は、プロフィールページ完成までのプロセスについてまとめていきたいと思います。
まず、今回作りたいプロフィールページはこちらです。
(※上記の画像は、既に一通り完成させたプロフィールページの画像です。)
ひとまず、コードを書く手間を減らしたいので、前回のブログで紹介したトップページで制作したヘッダー部分のコードはコピペして使いまわします。
また、他にもHTMLのhead部分も変更を加えずにコ
ポートフォリオサイト、試しに作ってみる②~トップページ編~
今回は、トップページ完成までのプロセスについてご紹介していきたいと思います。
まず、実際にコーディングする前に、簡単に手書きのHTMLの設計図を作り、頭の中でイメージする所から始めていきました。
下記の画像が実際に作成した設計図です。(実際にコーディングしていく過程で、この設計図から何点も訂正を加えました。しかし、サイトの構成を一度頭で整理することができるので、とても役に立ちました。)
設計
ポートフォリオサイト、試しに作ってみる①
夏休みも始まってしまったことですし、この期間を利用して自分のポートフォリオサイトを作ってみようと思います。
しかし、いざポートフォリオサイトを作ろう!と意気込んでも何から手を付け始めればよいのやら…やみくもに頭に浮かんだサイトをノープランでコーディングするわけにもいきませんし。
そこで私は、Figmaというデザインツールを用いて、まずは
①ポートフォリオサイトに記載する情報
②サイトのレイ
一つ目の壁、フォーム作成
こんにちは。今回は、私がwebコーディングの学習を始めて一番最初に躓いたフォームの作り方について書いていこうと思います。
まず、皆さんはフォームというものがどんなものであるか知っていますか?言葉で説明すると少しわかりにくいと思ったので、画像を載せておきます。
今回は上記のようなフォームを作るために必要な知識を、順番に説明していきたいと思います。(いくつか追加する内容もあります)
※上の画像に
私と webコーディング
はじめまして、askaです。
今回、初めての投稿なので、まずは最初に簡単な自己紹介をさせていただきたいと思います。私、askaは、絵を描くこと、映画を観ること、そして家で飼っている愛鳥を愛でることが趣味の平凡な学生です。最近、ひょんなことからwebコーディングの勉強を始めるようになりました。ちなみに、今までブログを書いた経験もなく、習慣化できるかたいへん不安に思っております。この通り、webもブ