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

3の倍数 または 3の付く数字でアホになるフローチャートとJavaScript

今回は1つ数字を決めて、その数字が3の倍数 または 3の付く数字だったらアホになる ナベアツがやっていたあれをやりたいと思います。 (adsbygoogle = window.adsbygoogle || []).push({}); 明日は1から決めた数字までのパターンでやる予定です。 フローチャ…

SUM関数のフローチャートとJavaScript

今回は配列の合計値を求めるフローチャートとJavaScriptを書きます。 (adsbygoogle = window.adsbygoogle || []).push({}); フローチャート JavaScript var a = [ , , , ...]; var b = 0; var l = a.length; for(var i = 0; i < l; i++){ b = b + a[i]; } co…

最大公約数のフローチャート

昨日に続きフローチャートの練習をしていきます。フローチャートを書くときにはプログラム的な書き方ではなく、 日本語で誰が見てもわかるように書くのがポイントと教えてもらったので、なるべく数式を入れずに書いてみました。 (adsbygoogle = window.adsby…

配列の降順 フローチャートとJavaScript

プログラムを書く際にフロー処理を行うのと行わないのでは大きな差が出ます。 例えば ・考えてることを書くことによって頭の整理ができる。 ・プログラムを書くときのバグを減らせる。 ・完成の形を一度書いているので間違いを見つけやすい などなど (adsbyg…

MySQLのデータを一覧表示

テーブルタグで表示する方法を二通り (adsbygoogle = window.adsbygoogle || []).push({}); 必要なところだけphpで囲む(おすすめ) <table> <tr> <th> ~~ </th> </tr> <tr> <td> </td> </tr> </table> 全てphpで囲む "; echo "<tr>"; echo "<th>"; ec…</th></tr>

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

PHP

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

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

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

MySQLでテーブルを作る

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

SQL構文

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

<form>タグと<input>タグ

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の幅に応じてページを拡大・縮小する

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

return false

$(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の違い

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の予約語

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

input type

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

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の演算子

算術演算子 演算子働き例結果 +足す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文

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

position レイアウト

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

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

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

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

作成の際に使用した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

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

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

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

JavaScript

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

Illustrator ボタンを作る

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

ナビゲーション

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

background: url

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

hover時のレイアウト崩れ

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

塗りつぶしなど

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

縦リンク+2カラム

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

ルール

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

横並びのリスト

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

文字を隠す

3種類の文字の隠し方 HTMLには文字を入れておきたいがレイアウト的には邪魔なので消しておきたい時に、背景と文字色を同色にして見えないようにするのは検索エンジンはマイナス評価をします。 ではどうすれば良いのでしょうか。 ・visibility: hidden; レイ…

<dt>と<dd>を横並びにする

<dt>と<dd>を横並びにする 文字サイズを16px、幅を300pxとして何もいじらないと こうなります。 dt要素にfloat: left; と clear: left; の両方を指定すると ddがdtと横並びになります。 dtの下に文字が来てほしくないって場合は、margin-leftでddの文字分だ</dd></dt>…

span

webデザインの勉強 のように部分的に色や大きさなどを変えたいときには HTML <p>web<span>デザイン</span>の勉強</p> CSS p span { color: #F00; } となります。 いじりたい部分を<span></span>で囲む!

2カラム

今日は軽く触れただけなので予習みたいな感じで float:~とdisplay:inline; どちらも横並びにする際に使うことが出来ます。 何が違うの? →inlineを使うと各カラムがインライン要素となるため、marginやpaddingが使えなくなる。(整える方法はある) 優先順位…

CSS

<div id>と<div class> 復習をしているときにhtmlで<div id>の部分を<div class>に変えてやっていたらCSSに入力したことが何も反映されなくなってしまった。 どうしてかと思って調べているうちに、どうやら<div id="~~">とした場合はCSSでは#~~とするらしく、 <div class="~~">とした場合は .~~としなければならない。 CSSのreset</div></div></div></div></div></div>…

復習

土日は基本的に復習したことを書くので同じことを書くこともあります。 HTML 枠組み 成績 名前2000年2001年2002年 retail50点100点30点 見ないでも上手く作れた! HTML リンク webデザインを勉強するのです|きつね target="_blank"とするとサイトに移動する…

1カラムレイアウトの練習で学んだこと

text-indent 2枚目の画像の1行目が1文字左側にずれました。 text-indent : -1em; を使うことにより1行目を1文字分左にずらしています。 text-indent: 1em; だと右側に1文字分ずれます。 画像の横並び <p class="center"><img src="~~" alt="~~"><img src="--" alt="--"></p> とやると真ん中に画像が2つ横並びになります。

CSSの疑似クラス

疑似クラスの種類は6種類あるのだが本日学んだのは4種類 link(未訪問) visited(訪問済み) hover(カーソルがリンクに重なったとき) active(リンクに対してアクティブな瞬間) これらには記述する順番があります。link→visited→hover→activeの順番です。 この4…