ディレクトリ内にある画像を一覧表示

PHP

ディレクトリ内にある画像を読み取って全て表示してみよう。 (adsbygoogle = window.adsbygoogle || []).push({}); PHP read()){ $path = $dir_name -> path . "/" . $file_name; if (@getimagesize($pa…

MySQLに画像を登録して表示する

MySQL PHP

今回はXAMPPを使用してます。まずMySQLでテーブルを作成します。 CREATE TABLE IMAGES ( ID INT NOT NULL AUTO_INCREMENT, // ID IMG MEDIUMBLOB NOT NULL, // 画像データ PRIMARY KEY ( ID ) ) (adsbygoogle = window.adsbygoogle || []).push({}); 画像の…

MySQLでテーブルを作る

MySQL PHP

新規テーブルの作成 CREATE TABLE 新しいテーブルを作成するためには、 CREATE TABLE テーブル名 ( 列名１ データ型, 列名２ データ型, 列名３ データ型 ); となります。 例： CREATE TABLE book ( id INT, title VARCAR, price INT, genre VARCAR ); イメー…

SQL構文

MySQL

今日は初めてSQLをやりました。 とても難しかったけど楽しくできました。 そんな中で使用した基本的なものをまとめてみます。 SQL構文 ・対象テーブルから指定列を検索 SELECT 取得する配列 FROM 対象となるテーブル;・対象テーブルから全ての列を検索 SELEC…

<form>タグと<input>タグ

HTML PHP

formタグ formタグは入力や送信フォームを作る際に使用されます。 input,select,textareaなどのタグを中に使用して、テキストボックスやチェックボックスなどのフォーム部分を配置します。formで入力されたデータはwebサーバーへ送信されます。 そのときの送…

ボタン100個作るプログラム

PHP

若干JavaScriptと似たような感じですね。 for文を使って作ってみよう。 "; for ( $i = 1; $i <= 100; $i++){ echo "<input type='button' name='btn' value='{$i}' style='width: 48px'>"; } echo "</form>"; ?>プログラムを使わなかったらinputを100個書かなくてはならないのに、for文を使えばたったこれだけで作れます。 ポイント fo…

PHPで単位変換ツール

PHP

インチからセンチメートルへの単位変換ツールを作ってみよう <html> <head> <meta charset="utf-8"> </head> <body> <h1>インチからセンチメートルへ変換</h1> </body></html>

PHPで出てきた用語を少しだけまとめる

PHP

本日からインターンに行かせていただくことになりました。 緊張と不安でいっぱいでしたが、帰る頃にはもっと勉強しないと！と思えるぐらい気合入りました。 XAMPP Apache PHPを学ぶときにわざわざサーバーを借りて、書いたプログラムを転送して正しく動くか…

windowの幅に応じてページを拡大・縮小する

JQuery

画面の大きさはパソコンによってそれぞれなので、それに見合った表示が出来れば良いなと思い挑戦してみました。 $(function(){ var wi = $(window).width(); if ( 960 <= wi <= 1280 ){ $('body').css('zoom','67%'); } else if ( 1281 <= wi <= 1600 ){ $('…

return false

JavaScript JQuery

$(function(){ $('a').click(function(){ $('img').attr('src','book.jpg').attr('alt','本'); }); });<a href="book.jpg">画像を変更する</a> <p><img src="pen.jpg" alt="ペン"></p>a要素をクリックするとclickイベントが発生して画像が変更されるはずですが、 その後にブラウザはhrefに設定したリンク先へ飛んでしまい…

nth-childとnth-of-typeの違い

JQuery

nth-childのscript部分 $(function(){ $('p:nth-child(even)').css('color','#00F'); });p要素の偶数の文字を青色に変える html部分 <h1>勉強の科目</h1> <h2>文系</h2> <p>古典</p> <p>日本史</p> <p>英語</p> <h2>理系</h2> <p>物理</p> <p>数学</p> <p>科学</p> 結果 となります nth-of-typeの場合 $(function(){ $('p:nth-of-ty…

JavaScriptの予約語

JavaScript

変数名の付け方のルール 変数名に使用できる文字は、基本的に半角アルファベット、半角数字、アンダースコア(_)です。 さらに、 ・最初の1文字目には数字を使ってはいけない ・変数名に予約語を使用しない があります。 予約語 予約語で登録されている文字列…

input type

HTML

input type= で様々なフォームの構成部分を作成することが出来ます。 属性効果見た目 input type="text"テキスト入力 input type="password"パスワード入力 input type="file"ファイル名入力 input type="checkbox"チェックボックス input type="radio"ラジ…

JavaScriptによる画像置換

JavaScript

<html lang="ja"> <head> <meta charset="utf-8"> <title>JavaScriptによる画像置換</title> <style> html,body,div,img { margin: 0; padding: 0; line-height: 1.0; } .imgBox { width: 600px; margin: 50px auto; } .thumnail { width: 610px; text-align: center; } .thumnail img { margin-right: 10px; } .m…</meta></head></html>

JavaScriptの演算子

JavaScript

算術演算子 演算子働き例結果 +足すa = 5 + 5;10 -引くa = 5 - 5;0 *掛けるa = 5 * 5;25 /割るa = 5 / 5;1 %余りa = 5 % 5;0 複合代入演算子 演算子働き例結果 +=足して代入a = 5; a += 5;10 -=引いて代入a = 5; a -= 5;0 *=掛けて代入a = 5; a *= 5;25 /=割…

while文　for文

JavaScript

while文とfor文の違い 同じ繰り返しの意味で使われるwhileとforですが一体何が違うのでしょうか。 while文は、ループする回数が決まってない場合に使用されます。 当然、for文は指定した回数だけループします。 while文 変数の初期値； while（ループ条件；…

position レイアウト

CSS HTML

position: abusolute; position: abusolute;が設定された要素は通常の配置として扱われるのではなく、「基準ボックス」というものを基点として自由に配置することが出来ます。 ①絶対配置したい要素にposition: absolute;を設定する #content { width: 100px;…

ボタンをクリックしてJavaScriptを実行する

JavaScript

Button onclick <script> function OnButtonClick() { //実行するJavaScript alert('Hello'); } </script> <body> <p><button onclick ="OnButtonClick()">計算する</button></p>すると function OnButtonClick() { //実行するJavaScript alert('Hello'); } 計算するこのボタンのようになります。</body>

リキッドレイアウトの作成

CSS HTML

作成の際に使用したCSS @charset "utf-8"; /* reset */ html,body,div,h1,h2,p,ul,li { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul { list-style: none; } /* body */ body { backgroun…

box-shadow text-shadow

CSS HTML

box-shadow 枠や画像に影を付けることが出来ます。 box-shadow: A B C D 影の色; A = 水平方向の距離 B = 垂直方向の距離 C = ぼかし距離 D = 広がり距離 text-shadow 文字にも影を付けることが出来ます。 text-shadow: E F G 影の色; E = 水平方向の距離 F …

Photoshopでナビゲーションのボタン

Photoshop

基本的な流れは一緒なのですが、知っておきたいことを少しだけ書いておこう。 ・レイヤー効果の境界線の位置は「内側」に設定する。 こうすることで１ｐｘのずれが無くなります。 ・Shift + 十字キーで１０ｐｘ分動かすことが出来ます。 細かい移動は十字キ…

JavaScript

JavaScript

JavaScriptの基本 ①初期値 ②演算（計算） ③出力（可視化） この順番に書いていく。 出力について alert・document.write・console.logの3種類あります。 alertはブラウザの上に出る警告みたいなやつに表示されます。 document.writeはブラウザ上に表示されま…

Illustrator　ボタンを作る

Illustrator

ボタンの真ん中に文字を持ってくる 「インフォメーション」を水色の枠の中に持っていく。 まずは入れたいところに長方形ツールで枠をとる 水平方向左に整列させた後に、水平方向中央に分布させると このように真ん中に来ます。 後は黒い枠を消して十字キーで…

ナビゲーション

CSS HTML

ナビゲーションの復習 ・li要素の横並びはfloatを使う。 ・floatを使ったらoverflow:hiddenを指定する。 ナビゲーションの文字を隠す ・右にずらす white-space: nowrap; text-indent: 100%; overflow: hidden; ・左にずらす text-indent: -999em; ・そのほ…

background: url

CSS HTML

background: url(~~) no-repeat left top; left = x軸 top = y軸 画像がどれくらい動いたかを入れる。 左上が画像の起点となるので、基本的には画像は左側に動くので「ー」になることが多い。

hover時のレイアウト崩れ

CSS HTML

hoverの時にborder-bottomをすると liの下に線が付いてしまいレイアウトが崩れてしまいます。 liの中に線を入れるとレイアウトが崩れません その時に必要なのが、line-heightとheightです。 #nav li { height: 50px;} #nav li a { line-height: 47px;} #nav …

塗りつぶしなど

Photoshop

Photoshopで学んだ便利なこと 塗りつぶし 描画色（黒）で塗りつぶしたい時には、 Alt+Backspace 背景色（白）で塗りつぶしたい時には、 Ctrl+Backspace 自動補正 PCは青色が作りやすく、補色の黄色や白が作りにくい。 そのため、寒色系は自動補正で上手くい…

縦リンク＋２カラム

CSS HTML

縦リンクと２カラムの復習でした。 出来なかったとこ ・display: block; をどこに入れれば良いかわからなかった。

ルール

CSS HTML

HTMLでのルール ・<strong>と<h1>は一緒に使ってはいけない。 すでに<h1>は強調タグなので<strong>はいらない。 ・<img src="">で直リンクは禁止。 http://~~はネットの住所扱いなので、勝手に人の住所を使ってはいけない。 １６進数 普段の生活で使っているのは１０進数であり、９の次に０へ戻り</strong></h1></h1></strong>…

横並びのリスト

CSS HTML

ポイント ・liではなくてli a にborder指定をする。 ・line-height や text-alignは liに指定する。 ・ul にはレイアウト幅を入れる。 ・floatには必ずwidthを指定する。 ・display: block; で幅全体をクリック出来るようにする。