誰得... Google検索をGoogleブラウザ以外から使う奴

こんにちはAtsu1209です。
今回はGoogleブラウザ以外からGoogleを使います。
何いってんのって方のために簡単に説明すると
自作検索画面を作ってそこから検索できるようにするってことです。

# どうやんの?
Google検索は至って簡単な仕組みです。
例えば `自習 万歳` と調べるとすると
https://www.google.com/search?q=自習+万歳
と言うURLになります
このように`search?q=`の後にキーワードを入れるだけです。

# 早速作る
HTMLを書きます

```html:index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Yeeyel Search</title>
</head>
<body>
    <h1>yeeyel</h1>
    <div class="search-container">
        <form action="https://www.google.com/search" method="get">
            <input type="text" name="q" placeholder="Search...">
            <button type="submit">Search</button>
        </form>
    </div>
</body>
</html>

```

:::note
ブラウザ名は`Yeeyel`です(イーイル)
:::

## CSS
いい感じでできたのでCSSを追加してやりましょう
`style`タグでそのまま追加します。

```html:index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Search</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        h1 {
            margin-bottom: 20px;
        }
        .search-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .search-container input[type="text"] {
            width: 300px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
        }
        .search-container button {
            padding: 10px 20px;
            margin-left: 10px;
            border: none;
            border-radius: 4px;
            background-color: #4285f4;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
        }
        .search-container button:hover {
            background-color: #357ae8;
        }
    </style>
</head>
<body>
    <h1><span style="color: blue;">Y</span><span style="color: red;">e</span><span style="color: yellow;">e</span><span style="color: blue;">y</span><span style="color: green;">e</span><span style="color: red;">l</span></h1>
    <div class="search-container">
        <form action="https://www.google.com/search" method="get">
            <input type="text" name="q" placeholder="Search...">
            <button type="submit">Search</button>
        </form>
    </div>
</body>
</html>

```
:::note warn
タイトルの`h1`が`span`入れすぎて長いですが気にせずに (^_^;)
:::

# 完成

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="XWweLaX" data-pen-title="Yeeyel" data-user="Atsu1209" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/Atsu1209/pen/XWweLaX">
  Yeeyel</a> by Atsu1209 (<a href="https://codepen.io/Atsu1209">@Atsu1209</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

いい感じですね

# 最後に
まだまだ修正したり機能を追加できると思うのでよければコメントで教えてください
ではまた次の記事で(^^)/