無料コード配布ブログ

無料HTMLテンプレ配布 比較記事を作りやすくするHTMLテンプレです 今回は、ブログやサイトの記事作成で使える「比較記事テンプレ 基本編」を無料配布します。 商品やサービスを2つ比べたいときに使いやすい、シンプルなHTMLテンプレです。 このテンプレでできること このテンプレを使うと、○○と△△を比べる記事を作りやすくなります。 むずかしい表や細かい設定は入れていないので、初心者でも使いやすい形にしています。 こんな人におすすめ 比較記事をはじめて作る人 商品やサービスの違いをわかりやすく紹介したい人 ブログ記事の見た目を整えたい人 HTMLを貼れるブログやサイトで使いたい人 デザインを一から作るのが面倒な人 使い方 下にあるHTMLコードをコピーする HTMLを貼れる編集画面を開く 記事本文に貼り付ける 【 】で書いてある場所を自分の文章に書き換える 商品名やサービス名を、自分の記事に合わせて変更する ※Bloggerで使う場合は、記事作成画面をHTMLモードに切り替えてから貼り付けてください。 書き換える場所 下のような【 】の部分を、自分の記事内容に合わせて変えてください。 【タイトル】 【導入文】 【ひとこと結論】 ○○ と △△ の商品名・サービス名 それぞれの説明 良い点 まとめ文 【広告 / PR】 動画で学びながらスキルを身につけたい人へ ...

こんにちは！今回は、前回作った数字当てゲームを、少しゲームらしく改良していきます。 前回は、数字を入力して当てるだけのシンプルなゲームでした。 今回はそこに、 「最初から」「続きから」「スコア確認」 のメニューを追加して、ゲームっぽい見た目にしていきます。 HTMLで画面を作って、CSSで見た目を整えて、JavaScriptで動きをつけます。 この記事でやること メニュー画面を作ってみよう 前回の数字当てゲームに追加する内容 コードを貼る前に知っておくこと コードの中にあるメモについて コードを貼る場所 コピペ用の完成コード 今回はなぜ index.html にまとめたの？ 今回のゲームで使っているもの 今回のまとめ メニュー画面を作ってみよう 今回のポイントは、ゲームの最初にメニュー画面を作ることです。 いきなりゲームが始まるのではなく、最初にボタンを表示します。 最初から ：新しくゲームを始める 続きから ：前の状態から再開する スコア確認 ：これまでの結果を見る 初心者向けに言うと、 ゲームの入口を作る感じです。 メニューがあるだけで、かなりゲームっぽく見えます。 前回の数字当てゲームに追加する内容 今回追加するのは、主にこの3つです。 メニュー画面 ゲーム画面 スコア画面 画面を分けることで、「今どこを見ているのか」がわかりやすくなります。 さらに、ボタンを押すと画面が切り替わるので、ただの練習コードよりもゲームらしくなります。 コードを貼る前に知っておくこと この記事では、コードを見やすく表示するために <pre><code> を使っています。 <pre><code> の中に入れたコードは、記事の中で「コードとして見せるため」のものです。 実際にゲー...

こんにちは！Web整備士です！ 前回の記事では、Pythonを使って「数当てゲーム」を作りました。 ただ、正直に言うと……ターミナル画面だけだと、ちょっと地味でした。 ゲームとしてはちゃんと動くんですが、黒い画面に文字を入力するだけなので、「ゲームで遊んでる！」という感じは少なめです。 そこで今回は、 HTML・CSS・JavaScript を使って、数当てゲームをブラウザで遊べるゲーム画面っぽくしてみました！ コードがまだ読めなくても大丈夫です。 この記事では、 コードが読める素人の方 にも、 コードがまだ読めない初心者の方 にも伝わるように、できるだけやさしく説明していきます。 難しいコードの話だけではなく、 画面で何が変わったのか 、 どのファイルが何を担当しているのか を中心に見ていきます。 目次 今回作るもの 前回のターミナル版との違い 今回使った3つのファイル 作業環境と準備 HTMLはゲーム画面の部品を置く役目 CSSはゲーム画面の見た目を作る役目 JavaScriptはゲームを動かす役目 コピペして遊ぶ準備 コピペ用コード 実際にブラウザで遊んでみた 今回できたこと 次回予告 まとめ 今回作るもの 今回作ったのは、ブラウザで遊べる「数当てゲーム」です。 ゲームの内容は、前回のPython版とほぼ同じです。 1〜10の数字の中から、正解の数字を当てる 数字を入力して「答える」ボタンを押す 正解より小さければ「もっと大きいです」と表示される 正解より大きければ「もっと小さいです」と表示される 正解したら、正解メッセージが出る 挑戦回数が表示される 「最初から始める」ボタンでリセットできる 前回と違うのは、 見た目 です。 ターミナルで文字だけだったゲームを、今回は入力欄やボタンがあるゲーム画面にしました。 前回のターミナル版との違い 前回のPython版は、ターミナルで遊ぶゲームでした。 ターミナルは、文字でパソコンに命令を出す場所です。 プログラミングの練習には大事ですが、ゲーム...

こんにちは！Web整備士です！ 今回から、初心者向けにゲーム作りをやっていきます。 まず作るのは、Pythonで遊べる「数当てゲーム」です。 パソコンが1〜10の中から数字を1つ決めて、プレイヤーがその数字を当てるシンプルなゲームです。 今回はVS Codeでコードを書き、ターミナルで実行します。 HTMLやCSS、JavaScriptは次回以降で使います。まずはPythonで「ゲームのルールを作る」ことに慣れていきます。 今回作るもの 今回作るのは、ターミナルで遊べる数当てゲームです。 1〜10の数字を当てる パソコンがランダムに正解を決める 入力した数字が小さいと「もっと大きいです」と表示する 入力した数字が大きいと「もっと小さいです」と表示する 正解すると「正解です！」と表示する 何回で当たったか表示する q を入力すると途中で終了できる 数字以外を入力しても止まらない かなりシンプルですが、ゲームの基本である「入力」「判定」「結果表示」が入っています。 完成イメージ ゲームを実行すると、ターミナルにこのような表示が出ます。 数当てゲームを始めます！ 1〜10の数字を入力してください。 途中でやめたいときは q を入力してください。 数字を入力してください： 数字を入力すると、パソコンがヒントを出してくれます。 数字を入力してください：5 もっと大きいです。 数字を入力してください：8 もっと小さいです。 数字を入力してください：7 正解です！ 3回で当たりました！ こんな感じで、正解の数字を探していきます。 作業環境 今回使ったものはこちらです。 Mac VS Code ターミナル Python VS Codeは、コードを書くためのアプリです。 ターミナルは、文字でパソコンに命令を出す場所です。 今回は、VS Codeでコードを書いて、ターミナルでゲームを動かします。 Pythonが入っているか確認する まず、MacにPythonが入っているか確認しました。 ターミナルで、次のコマンドを入力します。 python3 --version 自分の環境では、次のよう...

こんにちは。Web整備士です。 今回は、ブログやサイトで使える シンプルな案内ボックス を作ります。 「ここを見てください」「このページもおすすめです」 という案内を、少し見やすくするためのHTMLコードです。 このコードでできること このコードを使うと、文章だけで案内するよりも、 大事な場所をわかりやすく見せることができます。 読んでほしいページを案内できる リンクを目立たせられる ブログ記事の中を整理しやすくなる 初心者でもコピペで使いやすい 使える場所 この案内ボックスは、いろいろなブログやサイトで使えます。 ブログ記事の途中 記事の最後 おすすめ記事の案内 お問い合わせページへの案内 Bloggerでも使えますが、Blogger専用ではありません。 HTMLが使える場所なら、応用しやすいコードです。 コピペ用コード 下のコードをコピーして、ブログやサイトのHTMLを入れられる場所に貼ってください。 <div style="border:1px solid #ddd; border-radius:10px; padding:16px; margin:20px 0; background:#f9fafb;"> <h3 style="margin:0 0 10px; font-size:20px;">はじめての方へ</h3> <p style="line-height:1.8; margin:0 0 12px;"> このページでは、初心者向けにわかりやすく内容をまとめています。 まずはこちらから読んでみてください。 </p> <a href="ここにリンクを入れる" style="display:inline-block; padding:10px 14px; background:#333; color:#fff; text-decoration:none; border-radius:6px;"> 詳しく見る </a> ...

サイトやブログのホーム画面の見せ方 サイトやブログの最初の部分で、 何をしている場所なのか をわかりやすく伝えるためのテンプレです。 はじめて来た人が迷いにくい、見やすいホーム画面を作りたいときに使いやすい形です。 使い方： 下の見出しや文章を、自分のサイトやブログに合わせて入れ替えるだけです。 ホーム画面の見せ方ポイント3選 POINT 1 何のサイトかをすぐ伝える 最初に「このサイトは何をしているのか」が伝わると、はじめて来た人も安心しやすくなります。 長い説明より、短くわかりやすく見せるのが大事です。 POINT 2 どこを見ればいいかをわかりやすくする ホーム画面で大事なのは、読者が次にどこを見ればいいか迷わないことです。 おすすめ記事や案内ページを見つけやすくすると、使いやすいホーム画面になりやすいです。 POINT 3 ごちゃつかず、見やすく整える 最初の画面に情報を入れすぎると、読みにくくなります。 見せたいことをしぼって並べると、やさしく整った印象になりやすいです。 こんなホーム画面に向いています サイトの最初に何をしているか見せたいとき ブログの入口をわかりやすくしたいとき 読者に「このサイトでできること」を伝えたいとき 最初の見た目をすっきり整えたいとき ひとことまとめ このテンプレは、 サイトやブログのホーム画面を見やすく整えるための形 です。 最初に見せたいことを、やさしく伝えやすくなります。