プログラム導入編（［初歩］Rython・HTML/CSS）
この記事では、下記の悩みを解決します。
・Webサイトの操作上で使ったプログラムを紹介します。（Python・HTML/CSSに特化）
・私も初めての時イメージすらできなかった為、基礎の基礎を解説しています。
・参考にしていただければ幸いです。
IT初心者の方でも、この記事イメージを持っていただければ幸いです。
※ 本記事のプログラムは一応動作確認していますが、正しく動作を保証するものではありません。
よって使われる際は、”自己責任”でお願いします。
コマンド事例（Python・HTML/CSS）
[初歩]Python
【参考】Pythonでのポイントやコーディング例を記載しました。少しでも参考になれば幸いです。
（コードはある程度試していますが記述間違いなどあるかもしれませんので自己責任でお願いします。）
Pythoは、インタープリタです。（JavaScriptやVBAなどもそうです。）
ちなみに反対にコンパイラ型があります。こればソースコードから実行プログラムを作成
することを言って例としてC言語などがそれにあたります。
Webサイトの自動操作
Selenium：Web操作の自動化をするライブラリ。seleniumをVSコードより、インストールする場合：ターミナル→新ターミナル→「pip install selenium」と入力する。ターミナルはPowerShellも同じまたはスタート→右クリックでも表示される。（Windows11の場合）
（seleniumはプログラムでインストール方法が違う。）
・seleniumがインストールされているかの確認方法
VSコードのターミナル→新ターミナル→「pip list」でseleniumがあればインストールされている。詳細表示：「pip show selenium」と入力。
WebDriver：Edgeブラウザを操作したいID/パスワードを自動入力する。
※WebDriverは、ブラウザ（Edge等）のバージョンに合わせる必要があります。バージョンが同じ個所よりダウンロードする必要があります。（Chroumの場合も同様です。）
Pythonをコマンドプロンプトで実行させる場合。（Windowsのみ）
Pythonファイル（***.py）のあるディレクトリに移動し「python pythonファイル名」＋「Enter」と押す。
コード記載例
name='護身IT'
age=21
print(f'私の名前は{name}です。{age}歳です。')for.py
#０～9までを出力する
#for i in range(10): #range関数は0～９までの数値を生成させる関数
#for i in range(2,8): #この場合のrange関数は2～8までの数値を生成させる関数
#for i in range(2,8,2): #この場合のrange関数は2～8まで2つおきに数値を生成させる関数
for i in range(8,2,-1): #この場合のrange関数は8～2まで降順に数値を生成させる関数
print(i)
#リストとfor文の組み合わせ
scores=[10,20,30,40,50]
for score in scores:
print(score)
#九九を作成（forの入れ子）
for i in range(1,10):
for j in range(1,10):
print(f'{i}*{j}={i*j}')
#break・・・・・繰り返し事態を終了する。
#continue・・・現在の回だけを中断する。
for i in range(1,10):
if i == 2:
print('break!') #2の段に行かなく実行をやめる
break
for j in range(1,10):
if j % 2 == 0:
print('continue!') #奇数のみ計算
continue
print(f'{i}*{j}={i*j}')
#while文の例
count = 0
while count < 5:
print(count)
count += 1
#while(break,continue)
count = 0
while count < 5:
if count == 1: #countが1ならばcontinueを実行
print('continue!')
count += 1
continue
if count ==3: #countが3ならばbreakを実行
print('break!')
break
print(count)
count += 1
#リストとの組み合わせの例
scores = [10,20,30,40,50]
count = 0
while count < len(scores):
print(scores[count])
count +=1
#invalid number再入力を求める例
while True:
num=int(input('Plese! Enter Number.(1,2,3,Exit:9)'))
if num==1:
print('Run menu 1.')
elif num==2:
print('Run menu 2.')
elif num==3:
print('Run menu 3.')
elif num==9:
print('Exit!')
break
else:
print('Invalid number!')
if.py
#iif条件分岐
score = int(input('Please Enter Your score.'))
if score >= 80:
#80以上の場合の処理
print('A')
print('Excellent job!')
#70以上80未満の処理
elif score >=70:
print('B')
#60以上70未満の処理
elif score>=60:
print('C')
#女王機以外の処理
else:
print('X')## Python 独自関数
age = 60
gender = "female"
if age < 12:
status = "child"
elif age < 65 and gender == "male":
status = "male-adult"
elif age < 65 and gender == "female":
status = "female-adult"
else:
status = "senior"
print(status)
# 結果表示 female-adult
####################################
age = 70
gender = "male"
if age < 12:
status = "child"
elif age < 65 and gender == "male":
status = "male-adult"
elif age < 65 and gender == "female":
status = "female-adult"
else:
status = "senior"
print(status)
# 結果表示 seniorin.py
#in演算子
#特定の値が配列に入っている場合にExcellect!を出力
score = [70,100,90,60,80]
if 100 in score:
print('Excellent!')
#BMI算出及び判定プログラム
#hight = int(input('身長は'))
#weit = int(input('体重は'))
hight = 1.7
weit = 60
bmi=weit/(hight*hight) #BMI算出
if bmi < 18.5: #痩せ
print('痩せA')
elif bmi< 25:
print('普通')
else:
print('肥満')list.py
#数学のテストのの点数をリストにして、変数scoresに入れる。
#Liamさん 90点
#Olivesさん 80点
#Emmaさん 100点
#f文字列を使って、文字列中に値を埋め込もう
name='護身IT'
age=99
print(f'私の名前は{name}です。{age}歳です。')
scores=[90,80,100]
print(scores)
#要素を取り出す
print(scores[0])
#要素数を求める場合はLEN関数を使う。
print(len(scores))
#要素の合計値はsum関数、平均値はaveregeでドで求められる
total=sum(scores)
average=total/len(scores)
print(f'合計は{total},平均は{average}です。')
#スライス
slice_samples=['a','b','c','d']
print(slice_samples[1:3]) #要素が1以上３未満を取得
print(slice_samples[2:]) #要素が２以上取得
print(slice_samples[:4]) #要素が4未満の取得
#リストのネスト
matrix=[
[1,2,3],
[4,5,6],
[7,8,9]
]
print(matrix) #2次元配列を作成
#複数のデータ型
any_data_type=[1,'a',2,3,[4,5,6]]
print(any_data_type)
#おみくじプログラム
import random #ランダムな関数を使うためランダムモジュールを使用
omikuji = ['大凶','凶','末吉'<'吉','小吉','中吉','大吉']
rum = random.randint(0,6) #0から6のランダムな整数を取得 0から6は要素番号
print(rum,omikuji[rum])
#サイコロプログラム
import random #ランダムな関数を使うためランダムモジュールを使用
omikuji = ['私の秘密','のロケ話','夏の思い出'<'ありえない話','ショックな話','若気の至り']
rum = random.randint(0,5) #0から6のランダムな整数を取得 0から6は要素番号
print(rum,omikuji[rum])[初歩]HTML／CSS
<head>：基本このタグ内に記載されたものはユーザからは見えません。
<body>：コンテンツの中身（画像・h1タグやテキストなど）はこのタグ内に記載されます。
CSS：Webサイトの装飾・見栄え、静的な言語。自動更新ができない。
外部参照：HTMLの<head>タグ内に<link>タグを記述し*.cssファイルを読み込む記述方法。または<div>タグにclass=[CSSの関数を記載する]。一般的。
例）
［HTML］
<span class="yubi">テキスト文字</span>
【CSS】
.yubi {
cursor:pointer;
}
内部参照：HTML内に<style>タグを記述する方法。例）<button style="border-radius:10px;" ></button>（非推奨）
インライン：HTMLタグ内にスタイルを記述する方法。（非推奨）例）RGB(255,0,0)
数字の左から：赤色、緑色、青色となりこれは色の３原色です。
数字は0～255で表現され
0は、赤色が含まれない、255は赤色を最大限に含むことを表す。
RGB(0,0,0)→黒色、RGB(255,255,255)→白色。
擬似クラス
セレクターに付加するキーワードであり、選
択された要素に対して特定の状態を指定する
:active
:checked
:first
:first-child
:hover
:not()
:nth-child()
:nth-of-type()
擬似要素
セレクターに付加するキーワードで、選択さ
れた要素の特定の部分にスタイル付けできる
ようにするもの
::after
::before
::first-letter
::first-line
::selection
属性セレクター
type属性がtextの<input>をすべて選択
input[type="text"] {
width: 300px;
color: yellow;
}
直下セレクター
<div>の直下にある<li>を選択
div > li {
color: white;
}
隣接セレクター
同じ親要素の子同士で<h1>の直後の<p>を選択
h1 + p {
color: red;
}
子孫セレクター
<li>配下にある<a>をすべて選択
li a {
color: teal;
}
IDセレクター
IDがlogoutの要素を選択
#logout {
color: orange;
height: 200px;
}
クラスセレクター
completeクラスがついたすべての要素
.complete {
color: green;
}
セレクターリスト
<h1>, <h2>をすべて選択
h1,h2 {
color: magenta;
}
要素型セレクター
すべての<img>を選択
img {
width: 100px;
height: 200px;
}
ユニバーサルセレクター
すべての要素を対象にする！
* {
color: black;
}
HTML単独での記載例
事例
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>グループ化の練習</title>
</head>
<body>
<hearder>
<nav>
<h1>グループ化の練習</h1>
<ul>
<li><a href="#">エンジニアへの道</a></li>
<li><a href="#">プログラミング入門</a></li>
<li><a href="#">ニュース</a></li>
</ul>
</nav>
</hearder>
<main>
<article>
<h2>グループ化を学ぶのにおすすめのサイト１０選</h2>
<p>グループ化を学べるサイトを１０個紹介します。</p>
</article>
<section>
<h2>関連記事</h2>
<ul>
<li><a href="#">関連記事１</a></li>
<li><a href="#">関連記事２</a></li>
<li><a href="#">関連記事３</a></li>
</ul>
</section>
</main>
<aside>
<h2>広告</h2>
<p>全ショップ対象エントリーでポイント５倍！</p>
</aside>
<footer>
<p><small>© 2025 Hidehiko Anzai</small></p>
</footer>
</body>
</html>
ブログのページ内でのジャンプの場合
ジャンプ元：<a href="#test">testへ飛ぶ</a>
ジャンプ先：<a id="test">test</a>
特定のブログページへのジャンプの場合
ジャンプ元：<a href="https://www.abcdddefg.abcdefg.html#test">testへ飛ぶ</a>
ジャンプ先：<a id="test">test</a>HTMLとCSSセットでの記載例
文字を「ふわっと」表示させたい場合
<p class="fadeIn">ふわっとさせたい文字</p>
<!--上記で「ふわっとさせたい文字」の表示がふわっと成る。.fadeIn {
animation: fade-in 1s ease-in-out;
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
まとめ
最後まで閲覧いただきありがとうございます。ご参考にしていただければ幸いです。
