読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

繰り返し - foreach文

PHP

「foreach文」で繰り返し foreach文は、配列の全要素に対してループ処理を行いたい場合に使います 構文には「基本形」と「拡張形」があり、書式は以下になります // 基本形構文 foreach( 配列 as 要素の値を格納する変数 ){ 繰り返したい処理 } // 拡張形構…

繰り返し - for文

PHP

「for文」で繰り返し 1つの処理をX回繰り返す「ループ」という発想(繰り返す回数が決まっている) 例:5日分の日付を表示→1日分の日付表示を5回繰り返す 例:10人分の名簿の印刷→1人分の名簿印刷を10回繰り返す 「for文」で、一定回数の繰り返し処理が…

繰り返し - while文

PHP

while文(while statement)とは 条件がtrueである限り、指定した文を繰り返し処理する while(条件){ 処理; … } 《繰り返し表示する》 ' . "\n"; $i++; } echo '商品は以上です。'; 「商品が存在する」という条件がfalseになるまで、商品を表示することを…

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

PHP

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

式と演算子

PHP

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

変数と定数

PHP

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

PHPのコードを記述

PHP

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

PHPとは何か?

PHP

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

PHPを学習

PHP

Progra! progate prog-8.com CODEPREP codeprep.jp paiza paiza.jp ドットインストール

XAMPPのWebサーバー構築(Windows)

XAMPPのダウンロード XAMPP最新バージョン 5.6.28 PC環境によっては、下位バージョンを使用します インストール インストーラーに従ってインストールする 最低限必要なものだけを選択する Cドライブ直下を選択する 不要なオプションはチェックを外す インス…

レスポンシブWebデザイン - 演習(2)実践

レスポンシブWebデザイン - 演習(2)実践 <html lang="ja"> <head> <meta charset="utf-8"> <title>フルスクリーン画像の設定</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="stylesheet" href="style4.css"> </head> <body> <h1><img src="img/logo.svg" alt=""></h1> </body></html>

レスポンシブWebデザイン - 演習(2)

レスポンシブWebデザイン - 演習(2) ブラウザの高さを取得する単位「vh(viewport height)」 <html lang="ja"> <head> <meta charset="utf-8"> <title>フルスクリーンレイアウト</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <style> html, body { margin:0; padding:0; } .box { box-sizing: border-box; } .box…</meta></meta></head></html>

Googleカスタム検索エンジン

API

Googleカスタム検索エンジン 検索するサイトを登録する カスタマイズ

Web Fonts - Font Awesomeでアイコンを表示

Font Awesome fontawesome.io BootstrapCDN <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> アイコンを表示する <div class="snsmenu"> <ul> <li><a href="#"><i class="fa fa-twitter"></i><span>Twitter</span></a></li> <li><a href="#"></a></li></ul></div></link>

レスポンシブWebデザイン - 演習(1)解答例

レスポンシブWebデザイン - 演習(1)解答例 <html lang="ja"> <head> <meta charset="UTF-8"> <title>レスポンシブWebデザイン 演習(1)</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">…</link></meta></meta></head></html>

レスポンシブWebデザイン - 演習(1)

レスポンシブWebデザイン - 演習(1) 設計図の作成 物作りは設計図の用意から始まります。機能や構造、配置などを明確にしていくことで、必要な部品、材料、工数、工程、時間など、さまざまな情報が出てきます。 画像「768 x 512」 また、設計図を用意する…

レスポンシブWebデザインの実装

モバイルサイト設計上での考え方 モバイルサイト設計上での考え方 - A List Apart 日本語サイト レスポンシブWebデザインの画面設計 コンテンツファースト 画面に必要なコンテンツ部品(コンポーネント)の洗い出しをする 情報の重要度を考慮してコンポーネ…

CSS3で作るホバーアニメーション(2)

キャプションを表示 <html lang="ja"> <head> <meta charset="UTF-8"> <title>transitonによるアニメーション</title> <style> /* reset ------------------------------------*/ html, body, h1, h3, p, ul, li { margin: 0; padding: 0; line-height: 1.0; } ul { list-style: none; } a { text-decoration: none; } img { b…</meta></head></html>

CSS3で作るホバーアニメーション(1)

CSS3で作るマウスオーバーアニメーション 背景色が変化するアニメーション <html lang="ja"> <head> <meta charset="UTF-8"> <title>背景色が変化するアニメーション</title> <style> html,body, h1, ul, li { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul {</meta></head></html>…

グリッドレイアウト

グリッドレイアウト <html lang="ja"> <head> <meta charset="UTF-8"> <title>グリッドレイアウト</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <div class="block"> <header> <h1></h1></header></div></div></body></html>

レスポンシブWebデザイン - 実践(枝豆)

モバイルファースト スマートフォンの設定から記述します 枝豆ロゴ 枝豆ロゴ 豆はカラダにイイ ホーム 枝豆一覧 枝豆隊 アクセス 枝豆の栄養素はスゴい 枝豆は大豆が未成熟で収穫したものですが、たくさんの栄養がつまっています。枝豆のタンパク質に含まれ…

CSS3メディアクエリ

メディアクエリ メディアクエリは、ウィンドウのサイズやモニターの物理サイズ、画面密度やデバイス向きなど、閲覧環境の特性(メディア特性)に応じてCSSを分岐させることができる機能で、CSS2.1の時代から使われている media属性の拡張として定義されてい…

アニメーション - transition(トランジションアニメーション)

transition(トランジションアニメーション) transition は、「:hover」などの動作をきっかけとして、アニメーションでプロパティの値を変化させることができるプロパティです

変形 - transform-origin(変形の原点)

transform-origin(変形の原点) ローカル座標の原点は、transform-origin の値を変更することでいつでも変更できます 変形の原点を変更する

変形 - transform(変形)

transform(変形) transformプロパティは、二次元座標での変形を行うプロパティです 値に translate( ) / scale( ) / rotate( ) / skew( ) の4種類のトランスフォーム関数を取り、それぞれ移動・拡大縮小・回転・傾斜させることができます 移動の書式 tran…

背景画像とグラデーション

CSS3セレクタ

CSS3のプロパティ

CSS3のプロパティ テキストP.276 まず、CSS3で表現してみる CSS3で角丸を設定する <section> <h3>border-radius</h3> <ul class="sample bdr"> <li class="bdr01">全て同じ</li> <li class="bdr02">左上 | 右上 | 右下 | 左下</li> <li class="bdr03">左上 | 右上と左下 | 右下</li> <li class="bdr04">左上と右下 | 右上と左下</li> <li class="bdr05">正円</li> </ul> </section> /* bor…

CSS3の基本

CSS3を使うメリット(テキスト P.258) classやidに頼らないセレクタ作りが可能になる CSS3だけで表現できるデザインの幅が広がる 簡単に柔軟な他段組を実現できるようになる CSSだけで「動き」をつけられるようになる CSS3は下位互換 CSS3は、CSS2.1を含み…

メガドロップダウンメニュー

垂直型メガドロップダウンメニュー 大きな二次元のパネルでナビゲーションの選択肢をグループ化できる ナビゲーションの選択対象をレイアウトやアイコンによって構造化できる すべてが一目で見渡せる(スクロールが不要) 表示のタイミング 0.5秒間は待つ。 …

タブパネル - 実践

基本のタブパネルの作り方 タブ(見出し)とパネル(表示する内容)をそれぞれ別のリストで記述します タブのul要素には「tab」、パネルのul要素には「panel」というclass名をつけます パネル部とタブ部が連動するよう「id名」をつけ、href属性に#(ハッシュ…

タブパネル

タブパネルとは タブの切替は複数のコンテンツの表示・非表示を操作してコンテンツが変わっているように見せる 要素を非表示にするには hideメソッドを使い、表示には showメソッドを使う パネルの順番とコンテンツの順番が比例している場合は、indexメソッ…

モーダルウィンドウ - fancyBoxとColorBox

画像の準備 Photoshopのレイヤーを適切な名前に変更しておく fancyBox ダウンロード 《index.html》 <html lang="ja"> <head> <meta charset="utf-8"> <title>fancyBox</title> <link rel="stylesheet" href="css/jquery.fancybox.css"> <link rel="stylesheet" href="css/style.css"> </link></link></meta></head></html>

モーダルウィンドウ - Lightbox

モーダル (modal) ウィンドウ モーダルウィンドウとは、操作が完了するまで親ウィンドウへの操作を受け付けなくさせるタイプのウィンドウのことを指します Lightbox JavaScriptライブラリ Ajax(JavaScript)を利用して動作する機能をまとめてあるもの Ajax…

レスポンシブWebデザインの基本構造

レスポンシブWebデザインの基本構造を作る 768px以上をPC用とする モバイル向けメディアクエリのwidthの決め方 タブレット(iPad) 768px スマートフォン横 480px・568pxなど スマートフォン縦 320px・360pxなど /* メディアクエリの設定 */ @media (orienta…

IllustratorでWebデザイン

第1回:デザイン前に行う環境設定と覚えておきたい基礎知識 blogs.adobe.com 新規ドキュメントを作成し、表示設定を行う [ファイル]メニュー→[新規…]を選択して[新規ドキュメント]ダイアログボックスを開きます [新規ドキュメント]ダイアログボック…

デザインカンプ(Photoshop)

デザインカンプ(Photoshop) 素材

レスポンシブWebデザイン実践(1カラム)石垣島観光ガイド

レスポンシブWebデザイン実践(1カラム)石垣島観光ガイド 石垣島観光ガイド 石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置します。気候は亜熱帯気候で、1年を通じて平均気…

アニメーション効果

animate()メソッド 独自のアニメーションを設定できる 任意のCSSプロパティの値を徐々に変化させて独自のアニメーション効果を作成できる命令 animate()に設定できるCSSプロパティは、height、top、opacityのように数値であらわせるもに限ります 動きには「l…

bxSlider

bxSlider スライドショーを手軽にWebページ内に設置できるスライドライブラリ ulでもdivでもスライダーが使える スライド動作も3種類選べる カルーセルタイプにすることも可能 bxSliderをダウンロード 読み込んで利用 <link rel="stylesheet" href="css/jquery.bxslider.css"> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="js/jquery.bxslider.min.js"></script> スライド画像の設定 …</link>

メディアクエリ実践

メディアクエリ実践 <html lang="ja"> <head> <meta charset="utf-8"> <title>レスポンシブWebデザイン</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <h1>メディアクエリ</h1> <p>メディアクエリを使うと、ブラウザのウィンドウ幅に応じて各要素…</p></div></body></html>

Media Queries(メディアクエリ)

Media Queries(メディアクエリ) CSS3 htmlドキュメントのコンテンツをマルチデバイス最適化した表示を実現する手法 ユーザーエージェント判別によるCSS切り換え ブレイクポイント ブレイクポイントを480px、768px、980pxとした場合 PCのスタイルから記述し…

レスポンシブWebデザインの実装

HTML5 マークアップはHTML5でおこなう IE8以前のバージョンは、対象外とします viewport それぞれのデバイス幅にあわせた表示を可能にする記述 <meta name="viewport" content="width=device-width, initial-scale=1.0"> width=device-width デバイスの表示領域の幅を指定します これを指定することで、デフォルトの状態で自動的に縮</meta>…

Responsive Web Design(レスポンシブWebデザイン)

Web閲覧環境の多様化 Android端末の多様化 スマートフォンで表示されるWebページはより柔軟性のある実装を求められる状況にあります モバイルファースト モバイルファーストの実践とは、モバイルインターネットの爆発的な成長にただ備えるだけではない。ユー…

フィルタリング

フィルタリング 特定の要素のみまたは組み合わせで、該当するもののみを表示します MixItUp プラグインをダウンロード フィルタリング機能を実装 追い込みのアニメーション <html lang="ja"> <head> <meta charset="UTF-8"> <title>MixItUp</title> <link rel="stylesheet" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></link></meta></head></html>

Masonry

Masonry jQuery プラグイン 可変グリッドレイアウト もっともシンプルな記述 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Masonry</title> <style> html, body, p { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } body { background: #C4D0DD; } .bo</meta></head></html>…

リキッドレイアウト

リキッドレイアウト どんぐりスウィーツ Concept Brownie Tart Cookie Access 上質な木の実をつかって、ひとつひとつ丁寧に焼き上げました。 Concept どんぐりスウィーツは、森の恵みがたっぷり入った焼き菓子専門店。森の奥深くでひっそりと営業しています…

jQuery基礎演習(1)

基礎演習 以下の指示に従って、プログラムを作成しなさい。 Q01 「追加」ボタンを押したら「List1」「List2」の次に「List3」を追加表示し、「削除」ボタンを押したら「List3」が削除されるよう記述しなさい。 Q02 ボタンをクリックしたら、表示してある「幅…

jQuery基礎 - まとめ(内容や属性を変更する)

text / html 要素の内容をまるごと書き換えるメソッドです <html lang="ja"> <head> <meta charset="utf-8"> <title>jQuery sample</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> </head> <body> <div id="div1">入っていたテキスト</div> <div id="div2">入っていたテキスト</div> </body></html>

jQuery基礎 - まとめ(アニメーション)

fadeIn / fadeOut <html lang="ja"> <head> <meta charset="utf-8"> <title>jQuery sample</title> <link rel="stylesheet" href="styles.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> </head> <body> <div id="box1" class="box">fadeIn</div> </body></html>