初心者のWebポートフォリオ作ってみた①

とりあえずフレームワーク

基本は自分で構築していきたいと考えたので、CSSフレームワークは使わずに今回は作成していこうと決め、次のような目標をたてました。

・レシポンシブなサイトにする
・モーションを加える
・お問い合わせ画面をpythonとmysqlで実装
・見やすいコードを書く

デザインを中心に勉強してきたので、しかっりとここでサイト構築の流れを今回はつかんでいきたいなぁと思います…

まずは、メインとなる画面のフレームワークを考えました。
とりあえず、今回はfigmaを用いてデザインの構築をしました。簡易的にデザインした部分のcssコードも記述されるので実際にコードを書きだすときに効率的にコーディングでき、初めのフレームワーク作りには結構おすすめです！

無料で使用できるWebサービスなので是非使ってみてください！
figma:https://www.figma.com/

メインビジュアルのみを簡単に構成

SEO対策と携帯表示での対策

htmlでまずは、以下のようにSEO対策を施していきました。

<!-- 検索エンジンに読み込んでもらうSEO対策 -->
<meta name="description" content="Web・アプリのデザインを行っています。企画からデザイン・コーディングまでの一連の流れをこなすことが可能です。お気軽にお問い合わせください">
<meta name="kyewords" content="Portforio,ポートフォリオ,Webサイト,スマホアプリ,アプリ,デザイン,イラスト,コーディング,ウェブ,制作">

<!-- スマホで開いたときに番号やメアドの検索を非表示にする -->
<meta name="format-detection" content="telephone=no,addr=no,emai=no">

<!-- スマホでの表示を調整 -->
<meta name="viewport" content="width==device-width,initial-scale=1.0,maximum-scale=1.0,user-scale=0">

<!-- OGPタグの設定 -->
<meta property="og:title" content="ONODA RINA'S PORTFORIO">
<meta property="og:image" content="メイン画像URL">
<meta property="og:type" content="Website">
<meta property="og:site_name" content="ONODA RINA'S PORTFORIO">
<meta property="og:description" content="Portforio,ポートフォリオ,Webサイト,スマホアプリ,アプリ,デザイン,イラスト,コーディング,ウェブ,制作">
<meta property="fb:app_id" content="App-ID（15文字の半角数字）">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="サイトのURL貼る">
<meta name="twitter:image" content="ogpのURL貼る">

ここで作っていて感じたのがOGPタグの設定って結構重要なんだなということですね。
これをつけるとSNSで表示されるリンク先のホームページ情報の文章や画像が固定されるようで、こういうもので見え方を調整していくのだなと学びました。

配置でつまづいた

次に、メインビジュアルの構築をしていきました。ここで、つまづいたのが文字を回転させて配置を行った際に%指定でleftやbottomを調整したところ斜めに動いていしまい上手く配置できなかったことです。px指定で動かしたら普通に調整できたのですが、なぜ斜めに動いたのかがいまいちわからなかったです。

.contact-head{
    position: absolute;
    right: 15px; ←%にすると斜めにずれてしまう
    top: 300px;
    color: #000000;

    transform: rotate(-90deg);
    z-index: 10;
}

こんな調子でレイアウトしていきメインのところだけ構築できました。
来週はメインビジュアルを完成させられたらと思います。