0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

reactでwebサイトを作る

Posted at

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%);
}

反映するとこんな感じになります
image.png

フォントを変える

  • 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>があるのでそちらに書き足しましょう
  • 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"],
  },
});

参考

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?