こんにちはAtsu1209です。
今回はGoogleブラウザ以外からGoogleを使います。
何いってんのって方のために簡単に説明すると
自作検索画面を作ってそこから検索できるようにするってことです。
どうやんの?
Google検索は至って簡単な仕組みです。
例えば 自習 万歳 と調べるとすると
https://www.google.com/search?q=自習+万歳
と言うURLになります
このようにsearch?q=の後にキーワードを入れるだけです。
早速作る
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>
ブラウザ名はYeeyelです(イーイル)
CSS
いい感じでできたのでCSSを追加してやりましょう
styleタグでそのまま追加します。
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>
タイトルのh1がspan入れすぎて長いですが気にせずに (^_^;)
完成
See the Pen Yeeyel by Atsu1209 (@Atsu1209) on CodePen.
いい感じですね
最後に
まだまだ修正したり機能を追加できると思うのでよければコメントで教えてください
ではまた次の記事で(^^)/