Css
Gatsbyjsでポートフォリオサイト作った
Gatsbyjsでポートフォリオサイト作った
ちょちょいと簡単にできるやろと思って始めてみたら、正味10日ほどかかってしまった。。
準備
いきなりインストールで躓く。
mpnでインストールだといろいろ警告がでるのでyarnでインストールした。
チュートリアルを試す
インストールからチュートリアル完了まで2日ほどかかった。
へぇ、便利そうやなという感想。
ダミーサイトの作成
ポートフォリオを名乗っているが実質Webサイト練習したものを画像にして載せるものなのでまずはダミーのWebを作成。
画像を作るので実質2日近くかかってしまった。
サイト作成
真似したいサイトを見本にレイアウトを作成する。
間違ってないはずなのにうまく行かない場合は
yarn run clean
yarn run develop
キャッシュのせいで最新の状態にならなくてうまくいっていないように見える時があった。
他つまったところ
- graphqlうまくいかないと思ったらタイポ。
- 画像を扱うコンポーネントはhtmlに変換されたときに沢山ラッパーが生成されているのでうまくCSSできなかった。
- 楽したくてプラグインでモーダル導入したら目的の要素にCSSするのに難儀した。
- SEO用の設定うまくいかなくて苦戦、2日位かかった。
- Netlifyでビルドすると失敗する。
CSS苦労
gatsby-plugin-imageやreact-modalを使って楽をしようとしたら、CSSの指定に苦労した。
gatsbyで直接classをつけられるのはオーバーレイコンポーネントとコンテンツコンポーネントこちらはまだわかりやすい。
React-Modalのスタイル
問題はgatsby-plugin-image
gatsby-plugin-iamge
className指定はラッパー(div)、目的のimgタグにはimgClassNameで指定。
しかもコンポーネントに渡すpropsに含まれているスタイル要素が一番強いので指定しないでCSS側で記述してもコンポーネント側のデフォルトが優先されるという。
(例：object-fit, objevt-position, widthとか)
SEO用の設定うまくいかなくて苦戦
SEOまわりで2日位かかった。
なんか最新はreact-helmet-async使ったほうが良さそうな感じだったけどうまくいかなくて、結局SSGするのだからasyncである必要ないと妥協してreact-helmetにした。
ポイント？として、proptypesの定義しないとエラーになるからちゃんと書くこと。
OGPの画像を固定にしようとしたら、通常の画面に出てこないものなので生成されずハマった。
暫定措置として、対象の画像をimport及び変数格納で画像生成するように小細工した。
以下にSEO用のコンポーネントを残す。headタグのところはうまく動いていないので後日対応予定。
import * as React from 'react'
import PropTypes from 'prop-types'
import { Helmet } from 'react-helmet'
import { useLocation } from "@reach/router"
import { useStaticQuery, graphql } from 'gatsby'
import ogpImage from '../pages/static_images/ogp_image.png'
const Seo = ({ title, description, lang = 'ja', article = false }) => {
const { pathname } = useLocation()
const data = useStaticQuery(graphql`
query {
site {
siteMetadata {
siteUrl
image
defaultTitle: title
defaultDescription: description
}
}
}
`)
const metaTitle = title || data.site.siteMetadata.defaultTitle
const metaDescription = description || data.site.siteMetadata.defaultDescription
const pageTitle = title? title: 'TOP page'
console.log(article)
return (
<Helmet
htmlAttributes={{lang}}
title={metaTitle}
>
<head prefix="og: http://ogp.me/ns#" />
<meta name="description" content={metaDescription} />
<meta property="og:site_name" content={data.site.siteMetadata.defaultTitle} />
<meta property="og:title" content={pageTitle} />
<meta property="og:description" content={metaDescription} />
<meta property="og:url" content={`${data.site.siteMetadata.siteUrl}${pathname}`} />
<meta property="og:image" content={`${data.site.siteMetadata.siteUrl}${ogpImage}`} />
<meta property="og:type" content={article? 'article':'website'} />
<meta name="twitter:card" content="summary_large_image" />
</Helmet>
)
}
export default Seo
Seo.propTypes = {
title: PropTypes.string,
description: PropTypes.string,
image: PropTypes.string,
article: PropTypes.bool,
}
Seo.defaultProps = {
title: null,
description: null,
image: null,
article: false
}
Google Analytics
gatsby-plugin-google-gtagを使うことによって、UA-…の従来のユニバーサルなんとかとG-…のgtagの両方登録できる。
Lolipop Cloud
Lolipopマネージドクラウドを試してみた
まだベータで無料で少し使えるようだったので試した。
簡単に作れた。恐らくコンテナで動いている。
PHPのコンテナを作成すると別の場所にあるMySQLにデータベース領域を与えられる。 PHPからは提供されたDBのホスト名で接続できる。
LolipopCloudのデータベースについて
charset として utf8mb4 は使える。 collate は utf8mb4_unicode_general_ciになる。なんでutf8mb4_binじゃないの？
オマケ
ついでにグリッドレイアウトも試した。
忘れていたこと
metaタグにviewport指定しておかないとメディアクエリーの指定が効かない。 CSSにメディアクエリー書く場合、デフォルトのスタイルは最も小さいサイズで書くとよいっぽい。 グリッドレイアウトは1frで指定しておくとグリッドそのもののflexbox指定はいらないかもね。
印刷用CSSでハマった
この間、印刷用CSSを回収していて「そんなん知らねーよ！」ってなった事。
問題のCSS: page-break-before
いやコレでね強制改ページできるんで特定のdivタグのところで改ページさせようと
していたんだけど、ChromeではなるのにIE(対応対象はVer 9)だと改ページしてくれない。
IEでも解釈されるはずなのになんで？ってなって諦めてたんだけど、調べてたら出てきた。
IEの場合はpage-break-beforeが適用される要素がページをまたぐような位置にいる場合は
無視されるそうです。で、ちゃんとは調べてないのですがpage-break-beforeの場合はその
要素がpage-break-afterの場合は次の要素が判定基準になるっぽぽぽぽいです。
対処方法としては改ページしたい場所にからのdivを入れてその要素に対して改ページ指定の
cssを適用させるって方法。Web素人には分からんよ。Web上でCSSリファレンスをさっと見ても
そのことについての記述なかったし。んもう！
css 印刷のために
なんとかPHP側でPDF作成とかじゃなくてhtml＆cssで楽したい。
そんな時のcss設定とか。
まず、対象レイアウトに印刷用css作っていきます。
cssの中で@media print とかやっておくと、印刷の時だけ適用されるので、css作ってる間は
その指定外しておいたほうが楽ね。
出来上がったら、htmlのheadでそのcssをmedia=”print”の指定付きで読み込む。
後はhtml内に印刷ボタン配置して印刷ボタン押したらbody要素のクラスに”print”を付与
javascriptで印刷→setTimeoutなんかで１秒後にbodyに付与したprintクラスを今度は
消してやれば、元通り！って寸法です。
ページ番号とかリンク？とか印刷日付とかはブラウザの仕様らしいので我慢。
それが嫌ならPDFで一から作ってください。難易度の落差が凄いな。
cssメモ ちょっとしたもの
cssでwindowサイズに応じてbodyのcss定義を変える。
まぁ、bootstrapで使っている上に固定のメニューリストみたいなのある時に
windowの横幅めっちゃ狭めるとアレですやん。その辺の細工。
共通の見た目にしたい用クラス作っとくと便利。というかそれが本来の使い方。
例えば初期状態は非表示にしたい要素用クラスとそのcss定義とかね。
cssメモ 配下の指定
cssで配下の指定勘違いしておかしな事やってたのでメモ
結論としては、きちんと継承させたい(関連を持たせたい)事が分かるように書かないと駄目。
最初
１，scrollさせたいdivの定義
２，position:absoluteを使ってtableのheaderを上に固定させつつbodyだけスクールするよう
定義
この時、１で基準となるdivとその配下のdiv(scrollの指定したdev)の定義をしていて
tableヘッダはscrollの定義をしたdivの子要素だからってそういう書き方してたら、
tableヘッダ要素が意図する位置に固定されたような感じになるんだけど目には見えない
状態になった。レイヤーの上下関係とかかな？とか思っていじくり回してたけど、違った。
tableヘッダ要素は基準になるdiv配下のtheadみたいな描き方しないと駄目でした。
div#base{
posision: relative;
}
div#scroll{
スクロールの設定(html上ではdiv#baseの子要素)
}
てやっている状態の時に
ｘ div#scroll table thead ・・・これだとscroll定義されたdivの影響下(間違って無くね？)
◯ div#base table thead ・・・これだと基準divの位置を基準にして正しく表示される。
div#scrollは#baseの子要素なんだから問題無いだろうと思ってて、開発者ツールとかで確認すると
意図する位置にいるのに表示されない状態。cssからすると、htmlどう書かれているか知ったこっちゃない
ってことなんだろうね。css上でキチンとどこの配下の何の要素か書いてあげないといけんというこってす。
そうそう、tableのheaderとbodyを分けるとheaderとbodyでtdの幅が合わなくなる事がある(内容次第)ので
javascriptで無理やりbody側のtdの幅にheaderのthの幅をあわせるって事も必要です。固定幅じゃない場合。
最終的な見本を下に(htmlはめんどうなので載せてません)