無料コード配布ページ

無料コード配布ページ

このページでは、HTML・CSS・JavaScript・Pythonなど、初心者向けにコピペで使えるコードをまとめています。

ブログやサイトの装飾、学習用のミニゲーム、ちょっとした便利パーツなどを、できるだけ使いやすい形で紹介していきます。

むずかしい説明よりも、まずはコピーして動かしてみることを大事にしています。 気になるカテゴリから選んでください。

HTML

文章・リンク・カード・案内ボックスなど、ページの骨組みを作るコードです。

HTMLの記事を見る

CSS

色・余白・ボタン・カードなど、見た目を整えるコードです。

CSSの記事を見る

JavaScript

クリック・開閉・表示切り替えなど、ページに動きをつけるコードです。

JavaScriptの記事を見る

Python

初心者向けに、学習用の小さなプログラムやゲームコードを紹介していきます。

準備中です。記事を公開したら、ここから読めるようにします。

Pythonゲーム

数当てゲームなど、初心者でも試しやすいミニゲームのコードを紹介していきます。

準備中です。記事を公開したら、ここから読めるようにします。

JavaScriptミニゲーム

ブラウザで動かせる、シンプルなミニゲームのコードを紹介していきます。

準備中です。記事を公開したら、ここから読めるようにします。

ブログ・サイト装飾

記事下ボックス・関連記事リンク・案内カードなど、ブログやサイトで使いやすい部品です。

準備中です。記事を公開したら、ここから読めるようにします。

※使っているブログサービス・テーマ・サイト環境によって、見た目が少し変わる場合があります。 まずは下書きやテストページで確認してください。
※このブログにはアフィリエイト広告・PRを含むことがあります。

コメント

コメントを投稿

このブログの人気の投稿

1つの商品を紹介する記事の形を作りやすくする無料テンプレ

商品紹介の記事がまとまりにくい人向けの無料HTMLテンプレ 商品紹介の記事は、良いことを書けばそのまま伝わるわけではありません。 何を先に書くか。どこで良さを見せるか。どこで区切るか。 この順番がバラバラだと、書いている人も迷いやすく、読む人にも伝わりにくくなります。 今回の無料テンプレは、 1つの商品を紹介する記事を、見やすくまとめやすくするためのもの です。 「紹介したいけど、うまく記事の形にならない」 そんなときの土台として使いやすい内容にしています。 商品紹介の記事は、思ったよりまとまりにくい 1つの商品を紹介する記事は、思いついた順に書くとまとまりにくくなりやすいです。 良いところを書いたあとに説明が戻ったり、 同じような話が続いたりすると、 せっかく紹介したい商品でも伝わりにくくなります。 だから大事なのは、 何を書くかだけでなく、どんな順番で見せるか です。 このテンプレは、その順番を作りやすくして、 商品紹介の記事を形にしやすくする土台 として使えます。 このテンプレでやりやすくなること 最初に何の商品か伝えやすくなる 良さやポイントを順番に書きやすくなる 向いている人や使う場面を入れやすくなる 全体を見やすく区切りやすくなる つまり、 何を書こうかで止まりにくくなり、記事の流れを作りやすくなる のが、このテンプレの良いところです。 ブログやサイトで、 1つの商品をやさしく紹介したいときの はじめの形として使いやすい内容です。 こんな人に向いています 商品紹介の記事をこれから作ってみたい人 書いている途中で順番がわからなくなりやすい人 見やすい形に整えたい人 ブログやサイトで商品を紹介したい人 最初から細かいデザインを作...
続きを読む

比較記事テンプレ 見た目編｜目的に合わせて見やすく整える考え方

比較記事テンプレ 見た目編｜目的に合わせて見やすく整える考え方 記事やサイトの見た目というと、 「色の話かな」 「おしゃれにする話かな」 と思う人も多いです。 でも、本当に大事なのはそこだけではありません。 見やすいと、読みやすいです。 読みやすいと、伝わりやすいです。 つまり、見た目は飾りではなく、伝えるための土台です。 今回は、比較記事テンプレの 見た目編 として、 記事やサイトの目的に合わせて、どんな見せ方が合うのかを、初心者向けにざっくり整理します。 この記事でいちばん伝えたいこと 見た目は飾りではありません。 見やすいと読みやすい。 読みやすいと伝わりやすい。 だから、見た目も大事です。 まず、3つの役目はそれぞれちがいます この無料シリーズ3本は、全部同じ話ではありません。 それぞれ役目がちがいます。 基本編 は、記事やブログやサイトの基本をつかむためのものです。 「まずはこうやって作ればいいんだな」がわかる土台です。 選び方編 は、何をどう比べるのかを考えやすくするためのものです。 「どこを見て選べばいいのか」を整理する役目です。 見た目編 は、パッと見てわかりやすくするための土台です。 同じ内容でも、見せ方しだいで読みやすさはかなり変わります。 つまり、見た目編の役目は、 読む人が入りやすくなる形に整えること です。 見た目編は、おしゃれの話だけではありません ここで言う見た目は、ただ色をつけるとか、かっこよくするとか、そういう話だけではありません。 大事なのは、こんなことです。 どこから読めばいいか 何が大事なのか どんな目的の記事なのか 読んだ人が迷わないか これがすぐわかる形になっていると、記事はかなり読みやす...
続きを読む

サイトやブログのホーム画面の見せ方テンプレ【無料HTML】

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