40代目前の男がフリーランスを目指すブログ

40代目前の男がフリーランスを目指す為の日記です。

レスポンシブ

【完成】ポートフォリオ用ショッピングサイトの制作

前回、新たなポートフォリオを作成しているとの日記を書きましたが、随分日が経ってしまいました。 しかし、ようやく簡易ショッピングサイトが正式に完成し、サーバーにUP出来ましたので報告致します。 今回ショッピングサイトを作るきっかけでもあり、多く…

ポートフォリオ用ショッピングサイトの制作01

今は新たなポートフォリオとして、PHPを用いた簡易ショッピングサイトを制作しております。 今回のショッピングサイトの特徴ですが、 フレームワーク等は一切使わず、生のPHPでデータベースへの接続等を実施し、レコード取得もPHPのみで構築する。 CSSについ…

ようやく制作済みのホームページが一般公開出来ました

昨年11月から始動したホームページ制作のプロジェクトですが、昨年末に一度は制作完了したにも関わらず、レンタルサーバー選定やGoogle Search Consoleでの登録で随分と時間が掛かってしまいました。 ですが、ようやくWebブラウザにて検索ヒットされる様にな…

ホームページの制作完了

ホームページ制作ですが、12月中旬位にデザインも正式に決まり、28日に無事コーディングも終わりました。 デザイン考案は本当に大変でしたが、それに伴い、AdobeXDやFigmaというデザイン制作ソフトも使いこなせる様になり、基本的なWebサイトの特徴やレイア…

初仕事 -俳優のホームページ制作-

全く日記を更新していなかったのですが、実は11月から知り合いの紹介で初のWebサイト制作の案件を頂き、ついに本格的にお仕事が出来る様になりました。 そして、正式にオファーが来たので日記にてお伝え致します。 内容としては、とある俳優さんのオフィシャ…

WordPressの勉強11日目

9月25日(水)の日記です。 本日は『グーテンベルグ時代のWordPressノート テーマの作り方(入門編)』のKindle本の3回目の復習を行いました。 ...何で3回もやろうと決めたのかについての理由は、今まで理解出来ていなかったCSS3のGrid Layoutの復習、及びWo…

『HTML5 & CSS3 ステップアップブック』によるCSS3 Grid Layout の勉強

9月20日(金)の日記です。 前回から『グーテンベルグ時代のWordPressノート テーマの作り方2(ランディングページ&ワンカラムサイト編)』のKindle本を読んだ結果、やはりCSS3におけるGrid Layoutは学んでおく必要があると感じましたので、急遽そのレイアウ…

WordPressの勉強8日目

9月19日(木)の日記です。 『グーテンベルグ時代のWordPressノート テーマの作り方2(ランディングページ&ワンカラムサイト編)』のKindle本をコツコツ進めて、ようやくランディングページが完成しました。 実はこの書籍では従来のスタイルでランディングペ…

『HTML5 & CSS3 デザインレシピ集』を読んで

9月16日(月)の日記です。 休日であった為、フリーランスに向けてのスキル取得以外の事をメインにやっていましたが、HTML5・CSS3関連で興味が湧いた本があったのでそれを何日かに分けて読んでいました。 狩野祐東氏 著書の『HTML5 & CSS3 デザインレシピ集…

WordPressの勉強5日目(『グーテンベルグ時代のWordPressノート テーマの作り方(入門編)』)

9月13日(金)の日記です。 本日は『グーテンベルグ時代のWordPressノート テーマの作り方(入門編)』のKindle本を元に、まずは通しでサンプルのWprdPressブログの作成を行いました。 WordPressのオリジナルテーマの制作においては、 index.php functions.p…

簡易ランディングページの作成6日目

9月6日(金)の日記です。 先日は生のHTML・CSSでランディングページを書きましたが、本日は同じWebページを今度はBootstrap4にて書く事にしました。 目的としてはBootstrapの復習もそうですが、やはり実務ではBootstrapを使う機会が多いと思うので、ランデ…

簡易ランディングページの作成5日目

9月5日(木)の日記です。 本日はひたすらレスポンシブ対応に向けてSASSのコードの見直しと修正を行いました。レスポンシブ化にもそれ程労力を費やさないレイアウトをあらかじめ考えていたのですが、やはり実際に適用させるとなると、そう簡単にはいかないみ…

簡易ランディングページの作成1日目 & 『文系でもプログラミング副業で月10万円稼ぐ!』を読んで

8月30日(金)の日記です。 Bootstrapにもある程度慣れてきたので、本日からは実際に仕事で制作するとされる「ランディングページ」のスキル取得に向けて勉強を始めました。 ランディングページを簡単に調べたところ、 「検索結果や広告などを経由して訪問者…

Bootstrapの練習6日目 & メールフォームと送信機能の実装

8月29日(木)の日記です。 今回もBootstrap4を用いたサイト制作は行ないましたが、初めての試みで、メールフォームの送信機能の実装を行ないました。 まずは完成形です。 実際に各項目を入力して送信すると、下記の様に完了ページに飛び、メールが送信側と…

Bootstrapの練習5日目

8月28日(水)の日記です。 前回ではBootstrap4を用いてPC版の写経を行ないましたが、今回はこのサンプルサイトを「スマホ」と「タブレット」にも適用するレスポンシブサイトにしてみます。 Bootstrap4の規定に従い、スマホ版は画面横幅が544px以下、そして…

Bootstrapの練習2日目

8月24日(土)の日記です。 Bootstrap4の勉強ですが、『Bootstrap4 フロントエンド開発の教科書』を元にクラス名をザッと理解し、サンプルサイトの制作を行ないました。 非常に濃密な内容ですので一度に全部を覚える事は出来ませんが、1つ1つのクラスがどの…

Webサイトの写経練習3日目

8月20日(火)の日記です。 今回の写経材料ですが、巷では非常に有名なサイトで知られる、俳優 阿部寛さんのホームページにしました。 実は知り合いから提案を受けるまで、阿部寛さんのページの事は知りませんでした。 「結婚できない男」というドラマは本当…

Webサイト制作の練習3日目

8月15日(木)の日記です。 『HTML5 & CSS3 デザインブック』でのサンプルサイトの作成を一通り終えました。 まだこの時点ではリンク先もありませんし、データベースとの連携等も無い、単純なWebサイトのトップページです。 ですが、非常に勉強になりました…