HTMLとCSSでいい感じのサイトが作りたい！！
今月はwebサイトを作成するにあたり勉強になったところをまとめていきます。
諸事情で「webサイトいい感じに作って」というリクエストがありまして……
いくつかソースを見ていると、画像をペタペタ貼っているサイトが多かったため、当初canvaで画像を作成してべた張りするという暴挙に出たのですが、スマホ対応諸々を考えて断念しました。
1. サイトを作る
reactでサイトを作る際には下記を参考にすると非常に分かりやすいのでぜひご覧ください。
他のやり方が好みという方はご随意に。
2. 素材を作る
つづいてcanvaでベースの画像を作成。
「webページ」で検索するといい感じのテンプレートが出てくるので、それをベースに作ると多少センスがなくとも大事故は避けられる気がします。
特にこだわりがないのであれば、そこからwebページをビルドしたリンクを取得して公開もできるようなのですが、画像だけ取得してこっちでいいようにした方がメンテナンスや自由度的に良い気がします。
3. そのほかいい感じにする
雑多に参考になったものを、また必要になったら再度検索するであろう自分のために載せておきます。
手書き風のマーカーを引く
- html
<p>私の夢は<mark>非課税の</mark>大金を得ることだ</p>
- css
- tansparent部分で線の太さ、色の後ろの%で色の濃さを調整できます
- reactの場合、
index.cssに書いて、該当のtsxファイルでimpotしてやると使えます
mark {
background: linear-gradient(transparent 30%, #00ffff 60%);
}
反映するとこんな感じになります
フォントを変える
- html
- google fontの場合は
<head>タグに下記のような参照を加える
<head> <link href="https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New&display=swap" rel="stylesheet"> </head>- reactの場合は
index.htmlに<head>があるのでそちらに書き足しましょう
- google fontの場合は
- css
body {
font-family: "Zen Kaku Gothic New", sans-serif;
}
あまりfontを変更してこなかった人生なので、headはどこだ……としばし彷徨いました
スマホ対応する
PCに合わせて描画を調整するとスマホで「なんだこの奇怪なサイトは？？」と思われかねないためです。
やりようはいくつかあるようですが、今回はtailwindを用いました。
- npmで追加して（バージョンによってはエラーが出たので環境に合わせてください。私の環境の
package.jsonを参考に晒すと該当箇所は下記のとおりです） - prefixを指定するだけでいい感じにスマホ対応できます
- 詳細は参考に貼ってあるサイトを見てください
"devDependencies": {
"autoprefixer": "^10.4.20",
"postcss": "^8.5.3",
"tailwindcss": "^3.3.5",
}
- スマホでの確認方法
- localhostで立ち上げていると、スマホでは見られないと思うので、ngrokをお勧めします
- reactの場合は
vite.config.tsにallowedHostsを追加しないとエラーになるので注意
export default defineConfig({
plugins: [react()],
server: {
allowedHosts: ["9d46-49-250-139-233.ngrok-free.app"],
},
});