このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

PHPで簡易アンケート パーセンテージバー追加編

PHP

2011.02.26

この記事は最終更新日から1年以上が経過しています。

前回のPHPで簡易アンケート にパーセンテージ表示するバーの設置方法です。

ではバーの作成を

HTML

 <p class="r4">【男性】%<span class="bar"></span></p>
<p class="r5">【女性】%<span class="bar"></span></p>

CSS

#yesNoArea .bar{
display:block;
width:100%;
height:15px;
background:#03C;
}
#yesNoArea .r5 .bar{
background:#F03;
}

前回のファイルにこれらのHTML,CSSを追加。

このような表示になります。

では男性と女性の%の数値を求めましょう。

PHP

$manPar = ($yes/$count*100);
$manPar = number_format($manPar, 1, '.', '');
$womanPar = (($count-$yes)/$count*100);
$womanPar = number_format($womanPar, 1, '.', '');

男性の%は 男性数値÷トータル数値×100 で求められます。

気をつける点は、このままだと、ダァーと小数点以下の数値が求められてしまうので、

number_format関数

number_format($manPar, 1, '.', '');

小数点1桁にしております。

また女性の%数値の計算式は

トータル数値-男性数値÷トータル数値*100 で求められます。

男性の%数値同様number_format関数で小数点1桁にします。

また、round関数でも同様に求められます。

round($manPar,1)

それらをHTML反映

HTML

<p class="r4">【男性】<?php echo $manPar;?>%<span class="bar" style="width:<?php echo $manPar;?>%;"></span></p>
<p class="r5">【女性】<?php echo $womanPar;?>%<span class="bar" style="width:<?php echo $womanPar;?>%;"></span></p>

それぞれの数値表示にecho関数で表示させ、表示バー部分はインラインスタイルシートで

widthの指定を%で行い、そのままecho関数で値を読み込めば完成!

デモページはこちらから

Comment

Related Article

php 7.4にアップデート

2023.12.24

Laravel 4 を PHP 7 環境へ移行したお話。

2018.06.10

PHP 簡易アクセスログ 出力

2016.04.29

Laravelを 別環境に移動したら画面が真っ白に。MacにComposer、php mcrypt 等をインストールしたお話。

2015.10.10

遅れましたが..あけましておめでとうございます!2015年は Laravelで画像処理。からということで。

2015.01.08

IDE phpstorm, IntelliJ IDEAの Database接続が便利すぎる件(Vagrant + IntelliJ IDEA でMySQL操作)

2014.11.29

Laravel4でもSmartyを使用したい!

2014.11.20

人気急上昇!PHPフレームワーク「Laravel」を使ってみました。簡易会員サイト作成編

2014.09.24

Laravel4 パーミッションエラー Vagrant パーミッションが変更しない件

2014.08.24

【CentOS6】 PHP5.3からPHP5.5にバージョンアップしました

2014.08.11

CATEGORY LIST

LATEST NEWS

たびのきろく

イベント

2026.02.23

【Railway】MySQLサービスをコスト抑えて運用する

運用

2026.01.19

あけましておめでとうございますmm DjangoアプリをRailwayに移行する。

運用

2026.01.06

効率の良い AI駆動開発について考える

AI・Bot・algorithm

2025.11.09

MacとClaude Codeで構築する cc65(NES)開発環境

Game

2025.10.24

Three.js - ShaderMaterialで、ブレンドシェイプ(MorphTarget)アニメーション対応

JavaScript

2025.10.15

ゲーム開発に必要な基本数学入門

Rust

2025.08.15

Godot 4 & WebAssemblyで様々なデータフォーマットを処理

Godot

2025.07.06

Godot 4 & WebAssemblyで、Hello WebAssembly! - godot-wasm

Godot

2025.06.21

Godot 4 & Rust 始め方

Rust

2025.06.19

ご、ごめん。。今はFlutterの気分じゃないんだ。。

Flutter

2025.05.30

AIのために働け。AI リーダブルコーディングな未来。

AI・Bot・algorithm

2025.05.21

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US