Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[CSS][モバイル]Retina対応

CSS モバイル

Retinaディスプレイ対応

デバイスピクセルとCSSピクセル
  • デバイスピクセルとは…デバイス（端末）ごとのピクセル数
  • CSSピクセルとは…3.5インチの画面上で表現されるサイズ
  • ＣＳＳを記述する際は、基本的にＣＳＳピクセルの数を基準に設計する
  • 「デバイスピクセル」を「CSSピクセル」で割った数値、倍率を「devicePixelRatio」という
続きを読む

[HTML][CSS]スマホ対応

HTML CSS

head部の記述

meta name = viewportの記述

<meta name = "viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

  • content="width=device-width"→デバイスの横幅で描画するように指定
  • initial-scale→横向き (Landscape mode) にしたとき、iphoneの自動拡大機能を停止
  • user-scalable…ピンチで拡大するかの有無
meta name = format-detectionの記述

<meta name="format-detection" content="telephone=no, email=no"> * 数字列、文字列が電話番号、メールアドレスとして自動認識されないようにする

スマホ用faviconの設定

<link rel="apple-touch-icon" href="apple-touch-icon.png"> * 114*114pxのapple-touch-iconを用意、リンク設定する

javascriptの記述
// 検索バーを隠す
window.addEventListener('load',
    function(){
        setTimeout(function(){
            scrollTo(0,1);
        },100);
    },
false);
  • 上記jsをリンクすると、スマホのアドレスバーを擬似的に隠し視認性を向上できる。

bodyの記述

  • html5に準拠する
  • ヘッダー部→セクション①→セクション②→フッター
  • html5ではh1を複数使用しても良い

stylesheetのリセット記述

body {
 -webkit-text-size-adjust: none;
}

CSSでグラデーション

代表的な記述方法
  background: webkit-linear-gradient(top, #b6e2fd, #87c2fb);/* 古いapple webkit系ブラウザ対応 */
  background: linear-gradient(to bottom, #b6e2fd, #87c2fb);/* W3C推奨のモダンブラウザー記述 */
  • 方向、透明度（rgba）等指定可能
  • グラデーション等をＣＳＳ化できるPhotoshopエクステンション css3ps.com

[PHP][SQL]データベースに登録したニュースをPHPで表示①

PHP SQL

ニュースのデータベースを作成

  • テーブルを作成。テーブル名＝news
  • データベースを作成。今回は４カラム
  • news_id＝連番,int,AUTO_INCREMENT
  • news_headline＝タイトル,varchar
  • news_date＝日付,datatime
  • news_article＝内容,text

phpを作成

index.php
  • データベースに接続、変数に取得し、phpで表示する
  • さらにnews_headline部分をクリックするとgetメソッドを利用し個別記事ページに移動する
<?php
require_once dirname(__FILE__).'/func.php';
/* データベースに接続 */
/* PhpDataObject('データベース設定','アカウント','パスワード') */
/* 'データベース場所;データベースの名前;文字コード' */
$dbh = new PDO('mysql:host=localhost;dbname=データベースの名前;charset=utf8','アカウント','パスワード');
/* SQL文を変数に用意する */
$sql = 'SELECT news_headline, news_date, news_id FROM news;';
/* dbhの中のクエリーをアロー演算子で実行:上で用意したSQL文を実行する */
$rec = $dbh->query($sql);
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<title>最新ニュース</title>
</head>
<body>
<h1>最新ニュース</h1>
<?php
/* foreach文でデータを取り出す */
echo "<dl>\n";
foreach($rec as $v){
    echo "<dt>";
    echo '<a href="news.php?news_id=';
    echo $v['news_id'];//データベースのidをそれぞれのアンカーリンクに設定
    echo '">';
    echo h($v['news_headline']);
    echo "</a>";
    echo "</dt>";
    echo "<dd>";
    echo h($v['news_date']);
    echo "</dd>";
}
echo "</dl>";
?>
</body>
</html>
news.php
  • ニュースの個別ページ(news_articleの内容を表示)
<?php
require_once dirname(__FILE__).'/func.php';
/* 直接アクセスされたときindex.phpに戻る */
/* is_numeric…数値であるかを判定→アドレスに文字列を入力されたときの対策 */
if(!isset($_GET['news_id']) || !is_numeric($_GET['news_id']) || $_GET['news_id'] <= 0){
  header('Location: index.php');
  exit;
}
/* データベースに接続、取得 */
$dbh = new PDO('mysql:host=localhost;dbname=news0316;charset=utf8','root','root');
/* WHERE文でgetで渡されたidを指定する */
$sql = 'SELECT news_headline, news_date, news_id, news_article FROM news WHERE news_id='.$_GET['news_id'].';';
$rec = $dbh->query($sql);
?>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>ニュース詳細</title>
</head>

<body>
<h1>ニュース詳細</h1>

<?php
echo "<dl>\n";
foreach($rec as $v){
    echo "<dt>";
    echo '<a href="news.php?news_id=';
    echo $v['news_id'];
    echo '">';
    echo h($v['news_headline']);
    echo "</a>";
    echo "</dt>";
    echo "<dd>";
    echo h($v['news_date']);
    echo "</dd>\n";
}
echo "</dl>";
echo "<p>".nl2br(h($v['news_article']))."</p>";
?>

</body>
</html>

今回の要点

データベースに接続
  • $dbh = new PDO('データベースに関する情報');
  • $rec = $dbh->query('実行するSQL文');
アンカータグ(a)でGET型で値を渡す
  • ＜A　HREF="飛びたいURL？項目名＝値"＞　とアンカーに記述
  • リンク先(news.php)、$_GET['項目名']に値が格納される
phpで配列/連想配列の利用、foreach文の利用
<?php
/* 配列を利用する */
$finger = array('親指','人差し指','中指','薬指','小指');
/* foreachで表示する */
foreach($finger as $v){
  echo $v.'<br>';
}

/* 連想配列を利用する */
$goranger = array('red'=>'赤レンジャー','blue'=>'青レンジャー','yellow'=>'黄レンジャー','pink'=>'ももレンジャー','green'=>'みどレンジャー');

foreach($goranger as $k=>$v){
  echo $k.'<br>';
  echo $v.'<br>';
}

/* 配列の別の記述方法 */
$beatles = ['John','Paul','George','Ringo'];
echo $beatles[0];
  • 多次元配列の利用

php-beginner.com