Flexbox実践

flexプロパティ flexプロパティは以下の3つのプロパティのショートハンドです(flex-shrinkとflex-basisは省略可) flex-grow flex-shrink flex-basis 初期値(initial)は、flex: 0 1 auto flex-grow flex-growは数値を1にすれば全て均等に、また指定した数…

Flexboxを使ったレイアウト

Flexboxを使ったナビゲーション <html lang="ja"> <head> <meta charset="utf-8"> <title>Flexbox基礎</title> <style> html, body, p, ul, li { margin: 0; padding: 0; line-height: 1.0; font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', Meiryo, sa…</meta></head></html>

レスポンシブなレイアウト

レスポンシブなレイアウト 以下の例を、Flexで指定する <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>レスポンシブなFlexbox</title> <style> html, body, p { margin: 0; padding: 0; line-height: 1.0; } img { max-width: 100%; vertical-align: bottom; } .content {…</meta></meta></head></html>

交差軸方向の個別レイアウトと軸の方向によるレイアウト変化

交差軸方向の個別レイアウト align-self プロパティ(flexアイテム) developer.mozilla.orgalign-self CSS プロパティはカレントの flex ラインの flex アイテムを、align-items の値を上書きして配置します。 flex アイテムの cross-axis 側のマージンのい…

交差軸方向のレイアウト

align-items プロパティ developer.mozilla.orgCSS の align-items プロパティは、ブラウザーがどのようにコンテナーの垂直軸方向において、フレックスアイテム間の空白を配分するかを定義します。 これは垂直方向において、 justify-content のように動作す…

主軸方向のレイアウト

justify-content プロパティ(flexコンテナ) developer.mozilla.orgCSS の justify-content プロパティは、コンテナーの main axis に沿ってスペースをコンテンツアイテムの間や周囲へどのように分配するかを定義します。 /* Positional alignment */ justi…

主軸と交差軸

主軸と交差軸 Main Axis (主軸) justify-content でレイアウト flexbox における主軸は、flex-direction プロパティの設定方向(書字:文字が左側から書かれるか右側から書かれるか)によって定義されます。flex-direction が取り得る値は以下の四つです。 …

Flexboxの基礎

Flexboxとは CSS3 Flexible Box (可変ボックス) CSS Flexible Box Layout Module Level 1 ボックスのレイアウト方法を定めるCSSの機能 ボックスを任意の方向にレイアウトしたり、ボックスの大きさを伸縮可能(flex)にするもの flex:融通のきく、柔軟なとい…

データベースから値を取得して表示

PHP

データベースから値を取得して表示

データベースへデータを格納するフロー

PHP

index.php

Responsive Checker

Checker URLでチェック Responsive Checker html5-lab.jp Responsive Checker responsivechecker.net responsinator www.responsinator.com ami.responsivedesign ami.responsivedesign.is Responsive Web Design Testing Tool - Online www.websiteresponsi…

SVG画像

SVG

SVG Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス) XMLベースの、2次元ベクターイメージ用の画像形式の1つ アニメーションやユーザインタラクションもサポートしている SVGの仕様はW3Cによって開発され、オープン標準として勧告され…

入力された値を送信→受信

PHP

送信するために必要なこと form要素でmethod属性を記述します method属性には、送信方法を記述します inputされた値を別のページに送信します 入力された値の器に名前をつけて送信します 送信するタイミングをinput要素のtype属性「submit」で、ボタンの表示…

ユーザーとの対話

PHP

ユーザーとの対話 入力フォームに入力されたデータは、「$_GET[ 名称 ]」や「$_POST[ 名称 ]」取得できます 出力 ブラウザに表示 《例1》 変数を{ }で囲む 《例2》 文字列と変数を「. ドット」でつなぐ(ドットシンタックス) 《例3》 HTML要素の部分は…

関数

PHP

日付を扱う

PHP

連想配列とforeach文

PHP

配列

PHP

ループを抜ける breakとcontinue

PHP

繰り返し(while文)

PHP

while文(while statement)とは

繰り返し(for文)

PHP

もう1つの条件分岐(switch文)

PHP

関係演算子と条件分岐(if文)

PHP

条件(condition)の仕組みを知る 場合に応じた処理をおこなう 真(true)・偽(false)という概念のどちらかで評価されるものを、PHPでは「条件」と呼びます 関係演算子 条件をつくるために使う「関係演算子(relational operator)」 演算子 式がtrueとな…

★変数と演算(まとめ)

PHP

変数でデータを管理 変数には、格納したいデータに合わせて任意の名前を付ける必要があります PHPでは、変数名の先頭に「$」を付けることで、それが変数だとわかるようにしています 変数名は、数字から始めることはできない 変数にはさまざまなデータを「変…

式と演算子

PHP

式(expression) PHPの式の多くは、 演算子(operator):演算するもの オペランド(operand):演算の対象 を組み合わせてつくられています。 式の評価 式の計算が、式の評価にあたります 評価された結果を「式の値」と呼びます 演算子 簡単な計算をしたり…

変数と定数

PHP

変数(variable)とは 変数はプログラム中のメモリ領域に付けた名前です さまざまな値を一時的に記憶しておくために使われます 言葉(文字列)や数字(数値)を一時的に保存する「箱」 繰り返し使う言葉は「変数」として使う 1回だけ書いてコピーするという…

PHPのコードを記述

PHP

PHPコード記述 テキストエディターを使用して記述 新規ドキュメント作成 拡張子:.php 文字コード:Unicode(UTF-8) 改行コード:LF(Line Feed) 記述のルール 「」の間に記述する 文字列は「シングルクォート」で囲むことにします 命令文の末尾はセミコロン…

PHPとは何か?

PHP

プログラミング言語 コンピュータや機械を動かすための命令(コマンドといいます)群でコンピュータで何かを実行(処理)するための言語」です オブジェクト指向 オブジェクト指向とは、システムの設計に関する考え方、プログラミング手法を表現したものです…

グリッドレイアウトのCSS3ホバーキャプション

キャプションのある文書構造 各画像にキャプションが入る 画像が4つ入る場合を想定して、li要素を利用する キャプションの2行のマークアップ キャプションは、画像の大きさにより面の大きさが変わる ホバーを利用するため、a要素を設定 header部の設定 <header class="header"> <h1><a href="#"><img src="img/logo.png" alt=""></a></h1> <nav class="gnav"> <ul> <li><a href="#"><img src="img/nav01.png" alt=""></a></li></ul></nav></header>…

グリッドレイアウトのレスポンシブ化

PC用例アウトの考え方 1つのブロックの中に、画像が「1個」「3個」「4個」の場合がある ブロックを設定 画像のみの場合 div要素の中に、img要素がfloatしている場合 p要素の中に、img要素がfloatしている場合 li要素の中に、img要素がfloatしている場合 …

求職者支援訓練 フェリカテクニカルアカデミー