KATインターン no.10 掲示板の仕組み2

こんにちは!

今回のブログは、KATインターンで行っている掲示板解読の続きを書いていこうと思います!!

 

前回わかった掲示板の仕組みは、ざっくり言うとPHPでメッセージの受け取りや保存、読み込みが行われているということでした。

そして、今回はHTML部分に書かれているPHPがメッセージの出力を設定していることがわかりました。

 

どういうことかというと、
KAT掲示板のコードは上から<PHP>→<!DCTYPE html>→<PHP>→<入力フォーム>(HTML)→<PHP>と記述されているのですが、<!DCTYPE html>以降のPHPの1つは下記のように記述されています。

<?php if(!empty($success_message)):?> //成功メッセージが空ではなかったら
    <p class = "success"> <?php echo $success_message;?> </p>
<?php endif;?>

<!DCTYPE html>以前のPHPで、メッセージにエラーがなかった場合の処理をしており、表示したいメッセージも設定しているので、上記のコードはエラーがなかったときに設定した表示したいメッセージを出力する。ということを指示しています。

 

つまり、上部のPHPで内容を用意しておく、事前準備?みたいな処理を行って、HTML部分のPHPで条件にあったときに内容を出力するという設定なのだと思います。

たぶん……(自信ない(´;ω;`))

 

 

また、今回もコードの意味を調べていきました!

=調べた&わかったコード=

1.htmlspecialchars

htmlspecialcharsは、「<」や「>」などHTMLの中で特殊な意味を持つ記号(特殊文字)をそのまま出力させる関数です。
htmlspecialchars(変換対象,変換パターン,文字コードという形で記述します。

また、KAT掲示板では変換パターンに「ENT_QUOTES」を使っています。これは、シングルクォーテーションとダブルクォーテーションどちらも変換するという意味を持っています。

他にも、ENT_COMPAT(ダブルクォーテーションは変換)やENT_NOQUOTES(シングルクォーテーションとダブルクォーテーションは変換しない)など、様々な種類があるようです。

 

2.preg_replace

正規表現で文字列を置き換える関数だそうです。
preg_replace(正規表現パターン,置換をする文字列,置換対象)という形で記述します。

正規表現パターンが何かということは良くわからなかったのですが、変更したい部分を指定しているのだろうなと考えています(>_<)

 

3.fgets

開いたファイルから一行のみ読み込む関数です。

 

4.preg_split

文字列を分割することができる関数です!
分割することで配列になるので、要素数([0]や[1]など)を指定して要素を取り出すこともできるみたいです( ´∀` )

preg_split("/分割する部分/"分割対象)

 

5.array_unshift

配列の先頭に要素を追加するための関数です。
コードはarray_unshift(追加先の配列名,追加したい要素)という形で記述します。

このコードは他に比べて簡単で分かりやすいですね(≧▽≦)

 

今回、理解することができた掲示板の仕組みは以上です!!

 

=感想=

前回よりも掲示板の作りを理解することができました。まったくわからない??の状態から何歩か前進できたのではないかなと思います。でも、作りが複雑すぎて、これを参考にしながら作ってと言われたら作れる自信はないですね。

 

おわり (=_=)💤

KATインターン no.9 掲示板の仕組み

こんにちは😃

大学の履修登録も始まって、あぁ~もうすぐ進級だなと感じています。何の仕事に就きたいとかまだ何も考えていないので、ちょっと不安ですね~。

 

さて、今回のKATインターン掲示板の作り方について学びました。今回は、いつも行っていたコードを書くという勉強方法とは異なっていました。実際の掲示板とコードを見ながらどのように作られているかを調べていくという方法で学習を行ったので、前回より難しくて大変でした。(´;ω;`)

 

掲示板の作り方= ※KAT掲示板の場合

掲示板の枠組みは、HTMLで入力フォームが作られていました。

そして、送信されたメッセージがPHPで受け取られ、さらにPHPでメッセージの保存、読み込みが行われ、掲示板に書き出されている。という作りであることが調べてわかりました。

 

また、今回調べた&わかった?コードは以下の通りでした。

1.define('FILENAME','/.message.txt);

→メッセージを保存するための設定。

defineは定数を定義する関数です。定数名が大文字で書かれているのは、変数との区別をわかりやすくするためだそうです。

 

2.if(!empty($_POST['btn_submit']))

→データの存在を確認する。

empty関数は変数がない、または空であればtrueとなります。そのため、「!」をつけると「変数があるor空ではない場合、true」となります。

 

3.if($file_handle = fopen(FILENAME,"a")) { ..........  fclose($file_handle);  }

→ファイルにアクセスする。

「r」は読み込みのみ、「a」は追記する形で書き込む、「w」は内容を一度リセットして書き込む。というようにそれぞれのモードに違いがあるそうです。

また、fclose関数はファイルを安全に閉じるための関数で、fopen関数とセットで使うみたいですね。

 

4.<form method = "post"> (HTML)

フォームにはPOST形式とGET形式の2つの通信方式があります。

POST→URLにデータが書かれない。データ量に制限がない。

GET→URLにデータが書かれる。データ量が制限されている。テキストデータのみ送信できる。(画像データなどは不可)

2つにはこのような違いがありました。内容を他者に見られないようにするにはPOSTが最適なようです!

 

=感想=

実際のコードを見ても、何がどうなっているのかわからないことばかりでした( ;  ; )

どのような条件分岐が行われているのか、ということなどを詳しく理解することができなかったので、まだまだ勉強が必要だなと思います。

 

おわり

KATインターン no.8 繰り返し

先日、新2年生に向けたゼミ説明会に参加させていただきました。その中で、同じゼミの学生がインターンシップや留学に行っていたと知り、改めて同じゼミ生の人たちは行動力がある人が多いなと感じました。私も色々やってみているつもりだけど、まだまだだなと感じた日でした。

誰かが何かに取り組んでいるとわかると、頑張らないと!ってやる気がでます(≧▽≦)

 

とこんな感じで、全然関係のない話から始まりましたが、前回のブログに引き続きPHPの第3回について書いていきます!

今回は、制御構文というループ(繰り返し)のPHPについて学びました。

 

=for文=

for文はカウンタに初期値を設定し、条件に合っていれば繰り返しの処理を行います。

for($i = 0$i <= 5$i++){
   ↑     ↑
 カウンタ  繰り返しのための条件

そのとき、繰り返し処理の値に$i++により$iの値を1ずつ増やしていきます。そして、値が条件に一致しなくなった時にループの実行からはずれます。

 

=while文=

while文は、for文と異なってカウンタがありません。

$i = -5;
while($i <= 5){
    echo("あなたへの愛は").$i.("です。<br>");
    $i++;
}

値の出力後、$i++によって1が加算されます。

そのため、$i++(変数加算)を忘れると、$iは5以下という条件が常に満たされてしまい、無限ループに陥るので注意が必要です。

 

このように、for文とwhile文は同じ繰り返し構文でも書き方が異なっています。しかし、この2つは同じ内容を記述することができます。

使い分けとしては、for文は繰り返し回数を指定したい場合、while文は条件ごとに繰り返しをしたい場合に用います。

 

=foreach文=

foreach文では、配列の要素の数だけ処理が行われます。

for文やwhile文のように、条件に当てはまる間は〜というのがないので、上記の2つよりやりやすいのではないかなと感じました!

 

※実際の書き方※

配列の指定
$OshiMember = array("推し1位" => "にじか"
           "推し2位" => "りな"
           "推し3位" => "りか"
           "推し4位" => "みなみ");
 
繰り返し
foreach($OshiMember as $name){
    echo("私の推しは").$name."<br>";
}

 

=繰り返し中断の制御文=

break:実行中のループ処理を中断する

continue:その回の処理を中断し、次の処理からまた実行する

breakはループそのものが中断される。continueはそこだけ中断され、また次からループを始める(ループ自体は中断されていない)という考えかなと思います。

 

=感想=

今回学んだphpは、同じ役割を持った構文でも処理の手順や意味がそれぞれ異なっていました。どういう時に使うのか、何が違うのかという理解が少し難しかったなと思います。

 

おわり

KATインターン no.7 PHP 配列と条件分岐

こんにちは!

ブログを書くたびにここの前文に何を書こうかなと考えていて、結局、最近あったこととか思ったことしか書いてないなと思っています。

みんな、どうやって何を書いているんでしょうね。何も書かないという手もありかな。(-_-)

まあ、こんな感じで今回の前文は置いといて、KATインターンで行った初期トレPHP編を書いていきます。

 

=配列=

前回の初期トレで学んだ変数は箱のイメージでしたが、配列は箱が連なっているイメージです。箱の数だけ複数のデータ(要素)を入れられます。

また、配列では連なった箱1つ1つを「要素」と呼びます。各要素にはkeyという数値がついており、keyは基本的に[0]からスタートします。

 

*実践*

配列は配列名とkeyで取り出せる!

<?php
   $number = array(10,20,30); 配列の作成
        
   print_r ($number); 配列の中身の表示
   echo('<br>');
   echo $number[0]; 配列の1番目(10)を出力
?>

array関数は「配列を作る」という命令、print_r関数は表示をするという命令です。この2つの関数により、結果に配列の中身が表示されます。

 

keyは指定しない場合、0からkeyは始まりますが、keyの数字を指定することもできます。

例:$number = array(5 => 100, 6 => 200):

 

連想配列

連想配列とは、keyに文字列を用いた配列のことです。

 <?php
    $name = array("one" => "青木""two" => "井上""three" => "内田");
 
    print_r ($name);
    echo('<br>');
    echo("1番目の人は".$name[one]. ("さんです。").('<br>');
    // .(ピリオド)は連結
?>

数値の[0],[1],[2]ではなく文字列のkeyを指定しています。

よって、oneという箱に「青木」、twoという箱に「井上」、threeという箱に「内田」というデータが入っていることになります。

 

また、keyは数値と文字列が混じっていてもOKです。

さらに、配列は $変数名[key]=値: または array_push関数を用いて後から要素を追加することもできます。

 

配列のはじめにも述べたように、配列は箱が連なっているイメージで箱の数だけデータ(値)を増やすことができます。しかし、要素(箱)に入るデータは1つだけです。そのため、上書きをする際には、keyを指定してデータを上書きします。

反対に、削除はunset関数を用いて行います。

 

=代入演算子・複合演算子

演算子は、計算や文字の連結、比較などに使います。

代入演算子は(=)、そして代入演算子(=)と代数演算子(+ , - , * , / ,%)を組み合わせたものを複合演算子と呼びます。

 

*種類*

①= 例:$a = $b

 <?php
    $a = 200;
    $b = 100;
    $a = $b;  $aに$bの値が代入される
    echo $a;  →100が出力
?>

 

②-= 例:$a -= $b

 <?php
    $a = 200;
$a = 150;
    $a -= $b; ($a = $a - $bと同じ)
    echo $a;  →50と出力
?>

 

その他にも下記のような種類があります。

③+= 例:$a += $b ($a = $a + $b)

④*= 例:$a *= $b ($a = $a * $b)

⑤/= 例:$a /= $b ($a = $a / $b)

⑥%= 例:$a %= $b ($a = $a % $b)

⑦.= 例:$a .= $b 文字列の連結($a = $a . $bと等しい)

 

=加算子・減算子=

++$a(前置)と$a++(後置)があり、2つは演算のタイミングが異なります。

<?php
        $before = $a = 1;
        // $aに1を足した後に、$beforeに値を代入する
        $before = ++$a;
        echo "前置は".$before."<br>";
        
        $after = $a = 1;
        // $afterに代入した後に、$aに1を足す。
        $after = $a++;
        echo "後置は".$after."<br>";
?>

今回、私はこの演算のタイミングがわかりませんでした。もう少し調べて、次の初期トレまでには理解出来たらいいなと思います。

 

=条件分岐=

「もし○○だったら、○○する」というように、条件によって処理を分けたいときに条件分岐を行います。

条件分岐ができるのは、if文とswitch文です。

 

1. if文

if文は、ifのみ、if~else文、if~elseif~else文の3種類があります。

*if~elseif~elseの実践*

<?php
        $a = 10;
        if($a === 5){
            echo("aの値は5です。");
        } elseif($a > 5){
            echo("aは5より大きいです。");
        } else {
            echo("aは5未満です。");
        }
?>

$aが5だったら、$aが5より大きかったら、$aがそれ以外(5未満)だったらという条件で、該当する結果を出力します。

elseifは複数記述でき、条件を増やすことが可能です。

 

=複数条件=

&&(かつ) や ||(または)のように、複数条件を付けることができます。 

 
if($kao > 6 && $konomi > 6){
     echo("");
elseif ($kao < 6 || $konomi < 6){
     echo("");
else {
     echo("");
}

 

また、if(!($a > 6)) →$aが6以上ではない というように !(条件)で条件の否定になります。 

 

2.switch文

switch文は条件が多く、if文で書くと長くなる場合に使います。

各caseのまとまりをブロックといい、breakは各ブロックを仕切る壁のような役割です。よって、条件が当てはまるとswitch文から抜けます。

どの条件にも当てはまらなかった場合、defaultの処理が行われます。このdefaultは省略が可能です。

<?php
        $konomi = 8;
        switch($konomi){
            case 3;
                echo "なし";
                break;
            case 8;
                echo "OK";
                break;
            default;
                echo "問題外";
                break;
        }
?>

 

=感想=

今回の初期トレは前回よりも圧倒的に内容が濃かった気がしました。さらに、難しくなって??となる部分も多かったです。実際にやってみてやっと理解できる部分ばかりでした。読むばかりではなく、実際に手を動かしてやってみる方が理解がはやい、理解しやすい気がしますね。

 

おわり

 時間の使い方、もっとうまくなりたいな~

KATインターン no.6 PHPの基本

お久しぶりです!もう3月ですね。今回もKATインターンについて書いていこうと思います。

今回からはPHPの学習に入りました。PHPはまったく触ったことのない言語だったので、どのようなものかさっぱりわからない状態で始まりました。

 

PHPって何?=

PHPとはWeb開発で使われるスクリプト言語です。ゲームやWebアプリに向いており、WikipediaFacebookなどが例にあります。また、HTMLと組み合わせて書くことができる点も特徴です。

※ちなみに、スクリプト言語とは、習得を簡単にするために工夫され、比較的書きやすい言語の総称。だそうです。

 

PHPでは以下のような、ユーザーから情報をもらうといった動的ページの作成ができます。

①お問い合わせフォームの作成 ②予約システムの作成 ③検索機能の作成 ④ログイン機能 ⑤ブログを簡単に作る ⑥ECサイト ⑦SNS ⑧グループウェアの作成 ⑨社内管理システム全般 ⑩ファイル操作 ⑪API連携ができる ⑫バッチ処理の作成 

など

 

PHPの基本=

PHPの拡張子は「○○.php」です。

<?php    ?>の間がPHPのプログラムであり、プログラムは上から下に、ブラウザでアクセスすると実行されます。そして、ファイルの最後に到達すると終了します。

 

 *実際にやってみた*

<p>
        <?php
            echo('Hello,world!<br>');
            echo('phpを学びます。');
        ?>
</p>

上記の echo('文字列') は出力する関数です。

「関数(引数);」 →関数は命令文、引数は実行する値を入力します。

最後の、;(セミコロン)を付け忘れると、エラーが表示されるので注意が必要です。

 

コメントアウト

PHPコメントアウトの書き方は3通りあります。

<?php
    // 1行のコメント
    # 上と同じ
    /* 複数行のコメント (この間にコメント・改行可) */
 
?>

 

*計算*

<p><?php echo 1+1;?></p> 足し算
<p><?php echo 5-2;?></p> 引き算
<p><?php echo 3*4;?></p> 掛け算
<p><?php echo 36/6;?></p> 割り算
<p><?php echo 24%5;?></p> 余り

 

*日付*

<p>
    今日は、<?php echo date("Y/m/d");?>
</p>

その日の年、月、日を出力することができます。

 

=変数=

 変数とはデータをいれておく箱のようなものであり、PHPでは「$」を使います。

例:「$x」としたら、変数名(名前)が「$x」の箱があるというイメージです。

 

=変数のルール=

・変数名は$から始まる ・大文字と小文字は区別される

・変数名に使えるのは→英文字、数字(先頭には使えない)、_(アンダーバー)

また、$thisや$get、$postなど既に決められている変数名もあります。

 

*実践!*

<?php
    $x = 5;
    echo($x + 7);
    echo('<br>');
 
?>

この「=」は代入を意味しており、(※等しいではないです)

「$x」という名前の箱に、「5」というデータを入れます 。という意味になります。

また、ここに代入しているデータ(値)は数字や文字列です。文字列には、"文字列"という形で前後にダブルクォーテーションが必要です。

 

<?php
    $a ="変数わかんない";
    $a ="変数わかった!";
    echo $a;
?>

さらに、上記のように「$a」という名前の箱にデータを入れた後、もう一度「$a」に別のデータを入れると、変数が上書きされ、「変数わかった!」が出力されます。

 

このように、変数は一時的にデータを入れておく箱です。そのため、プログラムが終了すると役目も終了します。

 

=定数=

一方で、定数は上書きをすることができません。一度、定義するとずっと使います。

また、定数は変数と異なり「$」が要りません。define関数を使って定義します。

定数を使うメリットとしては、変更する場合1か所を変更するだけで済む、プログラムの途中で間違えて書き換えられたりしないなどがあげられます。

*実践*

<p>税込み金額は
    <?php
        //消費税をTAXと定義します
          define("TAX",1.10);
          echo (1000 * TAX);
    ?>
    です。
</p>

 define関数を使って、「TAX」という名前の定数に「1.10」を定義しています。

実行すると1000×1.10なので、1100と表示されます。

 

PHPのデータ型=

・論理型(boolean)→真偽の値を表す。値はTRUEまたはFALSE

・整数(integer)→数値など ・浮動小数点数(float)→小数

 

・文字列(string)

→文字列は「"」ダブルクォーテーション、または「'」シングルクォーテーションが必要です。

2つの違いは、「"」は変数が展開され、「'」は変数が展開されないという点にあります。

 

=感想=

今回は、新しい知識が盛りだくさんでした。変数あたりから数学っぽくなってるなという印象で、高校教科の中で数学が一番苦手だったので少し不安です。(でも、ちょっと楽しかった!(^^)!)

 

おわり

デザインって何? グッドパッチさんのお話し

春休みが始まってから、もう1か月近く?立ちました。去年の春休みよりかは有意義な時間が過ごせているのではないかなと思います。そう思いたい!!

今回は、グッドパッチの田口さんより”デザイン”についてのお話を伺いました。デザインに興味がある、デザインに関連した仕事に就きたいと考えていてもいなくても、とても興味深いお話しでした。

 

=社会に”デザイン”が求められている=

現代の社会はグローバル化やIT化が進んだことにより、予測が不可能になったVUCAといわれる社会だそうです。そのような社会では、課題を発見する考え方や見方が必要になってくると!

また、現代において、ユーザーが求める価値はかっこいいやきれいといった表層デザイン価値ではなく体験価値へと変化しています。UX(ユーザーの体験価値)が重要となった現在では、新しい体験価値を生み出すデザインが求められているとのことでした。

 

これらの話を踏まえた上で、デザインとは何だろうと考えると、パッケージをデザインするや服をデザインするなどといった意味とは異なっていると思いました。私が想像するデザインとは、目に見える形のモノ、田口さんの話で言うなら表層デザインです。

しかし、現在のデザインとは「計画・設計」の意味も含んでいます。これからの社会では、デザインの力を持って、まだ見ぬ課題やユーザーの体験価値など、はっきりと目に見えてわからないようなコトにも取り組んでいかなければいけないのだと思いました。

 

=自分が何をすべきか=

①自分のやってきたことの可視化→ポートフォリオの制作

ポートフォリオとは、自分が今まで作ってきた作品やプロジェクトなどをまとめたものです。

ポートフォリオは、相手に自分がどんなことができる人間であるのかを伝えることができ、それと同時に、自分には何ができるのかを確かめることができる手段でもあります。

→私は、ポートフォリオは一種の自己分析にも使えるようなものなのかなと感じました。自分が今まで活動してきた作品と一つ一つ向き合うことで、自分は何がしたかったのか、どんなことにワクワクしたのかという傾向も見渡せるようになるのではないかなと思いました。

 

また、ポートフォリオにできる作品がないという場合、

②既存のサービスの分解・解析 をしてみるのもいいとのこと!

ポートフォリオを制作したある学生は、就活のために既存のアプリを自分で分析し、改善提案を行っていました。

→デザインの仕事に就くと考えると、絵がうまくないといけないという印象を受けるけれど、また、ある程度の絵のうまさは必要ではあるのかもしれないけれど、ある学生がしたように、商学部生だからこそ見える視点があり、できることがあるのだろうなと思いました。

 

=感想=

今回のお話しで、自分の中でもデザインに対する重要性が高まったように思います。社会の中で、これほどまでにデザインが必要とされているとは知らなかったので、また、デザインの考え方は様々なコトに活用できると感じたので、デザインの考え方は身に着けていたいなと思いました。

また、ポートフォリオ制作のお話しを聞いた際に、自分には誰かに見せるような作品を持っていないなという焦りや悲しさのような感情も持ちました。田口さんもおっしゃられていたように、就職活動はエントリーシートや面接などの言葉を使って内定をいただきます。一方でポートフォリオを提出する場合は実績で内定をいただくので、ポートフォリオを制作した人、または制作できるような作品を持っている人は、自分の能力や努力してきたことが認められているような気がして、羨ましいというか、何というか、いいなと思いました。エントリーシートも面接も、実績を言葉で表現しているというだけなんですけどね。笑

 

今の私には、誰かに見せたり伝えたりできるような作品はないけれど、今からでも何か制作したりできるかなと思います。また、作品なんかないと思っているだけで、案外探ってみたら見つかるかなとも感じました。

 

最近、デザインについて、自分がやりたいことは何かについて考える機会があったので、今回お話しを伺えて本当に良かったです。

おわり

 

 

KAT no.5 グリッドシステム+スマホ対応

最近、僕のヒーローアカデミアにはまりました。3月末から第5期のアニメもあるので楽しみにしているところです。それと、今、人気のブルーピリオド。これも読みましたが、面白い!! 漫画から学ぶこともありますよね。

 

こんな感じで春休みを楽しんでいるところですが、先日、KATインターンの第5回目がありました。今回は、CSSの勉強に加えて、Wordpressにも触れた盛りだくさんの内容でした!!

 

CSS

*グリッド

グリッドとは格子状の線のことです。グリッドを活用することで、余白やレイアウトを統一的に、きれいに配置することができます。

~グリッドレイアウトの実装~

HTML
<div class="wrapper">
        <div>
          <h1>one</h1>
        </div>
  two,three,four,...同じように記入
</div>
 
.wrapper {
    displaygrid;
    grid-template-columns1fr 1fr 1fr; →グリッドセルを3列にする
}

上記のコードにより、3列のセルを実装できます。

また、下記のコードを追加することで、それぞれの行の高さを変更することができます。

grid-template-rows150px 100px;

※ row:行 column:列

 

~デザインを個別に指定~

HTML classを指定する
        <div class="one">
            <h1>one</h1>
        </div>
two,three,four,...同じように記入
 
.three {
    grid-row1/3;
    grid-column3/4;
    backgroundblack;
}
 
.six {
    grid-row3;
    grid-column3;
    backgroundpink;
}

.threeでは、3列目の上から2行のエリアを黒に

.sixでは、3列目の3行目のエリアをピンクに というようにclassの指定により、セルごとにスタイルを変更することができます。

さらに、column-gap: 〇px;の追加により列の間隔、row-gap: 〇em;の追加により行の間隔を指定することができます。

 

実際に、グリッドシステムを実装してみましたが、簡単にきれいな配置でセルを置くことができました。ひとつひとつ設定して置いていくよりも、グリッドシステムは簡単に均等に配置できるので楽ですね。

 

*レスポンシブ・デザイン

ブラウザの環境(iPhoneiPad、PCなど)に応じて表示を適応させることをレスポンシブ・デザインと言います。これを実装することにより、どのブラウザ環境で見ても見やすい表示になります。

その中でも、スマホで見たときに見やすいスマホ・フレンドリーは、スマホで検索することの多い今では絶対に必須となっています。(Google検索の結果にも影響する!!)

 

*ライブラリ

ライブラリとは、完成コードの集まりです。なぜ完成コードが公開されているのかというと、発展させてさらにいいものを作ろうという「オープンソース」の考え方があるからです。例:GitHub

また、完成コードをコピーやダウンロードするのではなく、ネット上から直接プログラムを読み込むDLL(ダイナミック・リンク・ライブラリ)もあります。

ライブラリの活用は、時間の削減や参考になるコードをアレンジすることもできるというメリットがあるので、せっかくだから活用していきたいです。

 

フレームワーク

BulmaやBootstrapなど、Webページの実装に必要な機能やプログラムが詰まったプログラムパックのことをフレームワークといいます。

Bootstrapは以前、別の活動で勉強したことがあるのですが、コードが複雑になっていくにつれて、私には難しかったです。😢

 

*viewportの設定

表示の幅=デバイスの幅に合わせる ためのコードです。

<meta name="viewport" content="width=device-width,initial-scale=1">

これを入れることにより、スマホタブレットなどで最適に表示できるようにします。

 

*メディアクエリ

 スマホタブレットなどパソコンとは異なった表示に設定したい場合には、@media~を使います。

⇩ブラウザの幅が670px以下の場合に適用される

@media all and (max-width670px) {
 CSSを記述
}

 

実際に、グリッドをスマホ対応(ブラウザの幅が670px以下)にしたCSSを記述すると

PCの場合のCSS
.wrapper {
    displaygrid;
    grid-template-columns1fr 1fr 1fr;
    grid-template-rows150px 100px;
    column-gap5px;
    row-gap1em;
}
 
.one {
    backgroundrgba(2040605);
}
two,four,fiveも同様
 
 
.three {
    grid-row1/3;
    grid-column3/4;
    backgroundblack;
}

 
.six {
    grid-row3;
    grid-column3;
    backgroundpink;
}
 
スマホの場合
@media all and (max-width670px) {
    .wrapper {
        displaygrid;
        grid-template-columns1fr;
        grid-template-rows100px;
        column-gap0px;
    }
    
    .three {
        grid-row3;
        grid-column1;
        backgroundblack;
    }
    
    .six {
        grid-row6;
        grid-column1;
        backgroundpink;
    }
}

~PC~

f:id:Amksakurabb:20210213141403p:plain

スマホ

f:id:Amksakurabb:20210213141457p:plain

グリッドが3列の表示から1列の縦表示に変化しています。

このように、ブラウザの幅に応じて表示を変化させることにより、見やすい画面を作ることができます。

 

Wordpress

CMS(Contents Management System)

CMSとは、簡単にWebサイトの構築や更新ができるシステムのことです。主にPHP言語とデータベースの組み合わせで構成されており、私たちがこれから使っていくWordpressCMSとのことでした。

また、CMSはデータベース上にテキストや画像が個別に保管されており、Webページを読み込む際にそれぞれのデータが集まって、ひとつのページが作られるという仕組みになっています。一方、CMSが使われていないWebサイトでは、1つのページで作られています。そのため、CMSを使ったWebサイトは、更新をしたい部分だけの変更を簡単に行うことができるので、効率的で迅速な構築をすることができます。

その他にもCMSは、プログラミングの知識がなくてもできる、プラグインによる機能拡張などのメリットがあるので、とても便利なシステムです。

 

Wordpressのテーマ設定

今回は、私たち2年生も関わらせていただいている案件を元に、テーマの選択をしてみました。

ネットでオススメのテーマ名を検索してみたりもしてみたのですが、検索した名前でも量が多く、かなり時間がかかりました。まだWordpressを触り始めたばかりなので、少しずつ使い方に慣れていきたいと思います!

 

*感想

今回の初期トレは、覚えておくべきことが多くあったように思います。グリッドシステムのスマホ対応も少し時間がかかってしまったので、もっとスムーズにできるようになればいいなと思いました。また、フレームワークWordpressなど、活用できるものは活用してもっとうまくなっていければいいなと思います!

 

おわり