新卒から文系エンジニア→人材業界に転職した人のブログ

新卒から文系エンジニア→人材業界に転職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界へ。異業種×異職種の転職経験有り。

このエントリーをはてなブックマークに追加

HTML

【CSS入門】ブロック要素とインライン要素の操作、絶対指定と想定指定、疑似クラス

【今回の紹介】 前回と同じく、友人と一緒と企んでいることに関連してCSSの技術が必要になったので もう一度入門から体系的に学ぼうとおもったのでそのメモ 参考(.インストール) 【内容】 ■ブロック要素とインライン要素 ブロック要素:前後に改行が入る イ…

【CSS入門】ブロック要素に関するCSS(border・padding・margin)

【今回の紹介】 前回と同じく、友人と一緒と企んでいることに関連してCSSの技術が必要になったので もう一度入門から体系的に学ぼうとおもったのでそのメモ 参考(.インストール) 【内容】 ブロック要素周辺のCSSについていくつか学習した ①ブロック要素に対…

【CSS入門】色の指定・テキストの指定・背景色の工夫

【今回の紹介】 前回と同じく、友人と一緒と企んでいることに関連してCSSの技術が必要になったので もう一度入門から体系的に学ぼうとおもったのでそのメモ 参考(.インストール) 【内容】 ■色の指定3パターン ①キーワード指定 登録されている代表的ない色を…

【CSS入門】セレクタの指定方法とその種類、優先度

【今回の紹介】 友人と一緒と企んでいることに関連してCSSの技術が必要になったので もう一度入門から体系的に学ぼうとおもったのでそのメモ 参考(.インストール) ■セレクタの指定の仕方は3種類 ①要素指定 例)hi{} ②クラス指定 例).hi{} ③ID指定 例)#hi{…

【php入門③】複数の値をformで送受信する

【今回の内容】 前回は、formで値を送受信する際、htmlの特殊文字や「'」「"」を無効化する方法を取り上げました。 【php入門②】formの値を安全にphpで取得する~XSS対策~ 以下の参考書を使用しながら、今回は、複数の値をformを使用しながら送受信するとい…

【php入門②】formの値を安全にphpで取得する~XSS対策~

【今回の紹介】 前回に引き続き以下の本を参考にphpの基礎的な部分の学習を行います。 前回の内容:http://forse.hatenablog.com/entry/2014/03/20/230824 よくわかるPHPの教科書 【メモ】 ①phpのセキュリティについて(クロスサイトスクリプティング(XS…

【php・Ajax・mysql】Webtodoリスト~カーソルをポインタに変更とwindow.onloadの変更~

【今回の紹介】 前回、完成したWebtodoリストに少し変更を加えたのでそれを紹介します。 ちなみに、このURLにとべば実際にどんなものを作成したのかわかると思います。リンク:http://mokumoku.sub.jp/WebToDo.htm 【内容】 変更したのは以下の二点 ①リ…

【php・Ajax・mysql】Webtodoリスト完成~はじめてjs・php・Ajax・mysqlを連携させ、わかったこと・わからなかったこと~

【今回の紹介】 簡易なWebアプリを作ってみたいということから、Webtodoリストを作成しました。 その振り返りとメモを兼ねて紹介します。 【内容】 ■当初の目的 ①Webアプリ作成の全体像をつかむ ①-①汎用的な機能(登録・変更・削除・検索)を作成してみる ①-…

【php・mysql・xmlhttprequest】DBへの登録・変更・検索・削除 ~レコードの登録~

【今回の紹介】 前回まででmysqlをインストールし、DBの接続を確認するこ とまで完了しました。 今後は、DBを使用した以下の基本的な操作を行っていきたいと思います。・登録 ・検索 ・変更 ・削除 ちなみに今回は、登録処理です。 【処理の流れ】 ■登録…

【Javascript・php・xmlhttprequest・ajax】外部ファイル(text)に書き込む&読み込む(おまけ)~キャッシュについて~

【今回の内容】 今回はキャッシュについて考えてみたい 【前回までの流れ】 前回までで以下のようなデータの流れをつかむことができた。 ●入力→追加→保存→呼び出し→表示 しかし、前回記事にあげた動的要素の追加・保存・表示を行うプログラムの 動作確認を行…

【Javascript・php・xmlhttprequest・ajax】外部ファイル(text)に書き込む&読み込む

【今回の紹介】 ずっとできなかったことができるようになりました。 掲題にある通り外部のファイルの読み込みと書き込みを行う事です。これができることにより具体的には、 javascriptで動的に追加したものが保存できます。 【処理の流れ(概要)】 ①追加ボ…

【PHP・Javacsript】(完成)簡易な商品購入サイトを作る ~ユーザが入力した情報を別画面のテーブルで受け取る~

【今回の内容】 とても簡易な商品購入サイトができましたー。 ページ遷移する際のデータの受け渡しの感覚がつかめてきたような気がします。 最近、プログラミングが結構楽しい。 ・思ったようにプログラムが動く感じ ・想像したものが少しずつ出来ていく感じ…

【PHP・Javascript】簡易な商品購入サイトを作る ~入力画面処理(PHPにJSを埋め込む)~

【今回の内容】 前回から簡単な商品購入サイトを作るみたいな流れでやっています。 今回は、情報を入力する画面の作成します。 【やること】 1、PHPにJavascriptを埋め込む 2、クライアント側でプルダウン選択時に商品の金額をで自動計算 3、クライアント…

【PHP】セッションとクッキー メモ①

【今回の内容】 ページ遷移をする中で、データを受け渡しができる セッション・クッキーというキーワードから 学習しました。 【補足】 「セッションとクッキーの関係」一度の通信で情報が消えてしますステートレスなHTTP通信では、 ページ遷移をしなが…

【Javascript・Ajax・PHP】ページ遷移を行わず、テキストファイルに入力データのログを出力するサンプル

【今回の紹介】 今回は、 以前作成したWebToDoリストのログをとる と言う事をしたいと思います。 【HTTPプロトコルとは】 HTTPプロトコルは、Webでデータを交換する際に、用いているルールのことだそうです。 【HTTPプロトコルの特徴…

【Javascript・DOM】少しでも実用的なモノを作る~WebTodoリスト~

【今回の紹介】 今回は、 WebTodoリストを作成します。 たいした理由はなくて、 会社の先輩がJavascript・DOMを勉強をする過程でWebTodoリストとかを作成し、自分で使いながら改造していた からです。笑 【WebToDo】 目的:DOMの勉強 ・各ノー…

【Javascript・DOM】プルダウンによりカテゴリーを絞りながら、リストを追加する

【今回の内容】 今回は、 ・プルダウンの動的生成 ・動的生成したプルダウンに属性・テキストを与える ・動的に生成したプルダウンで選択した情報をもとに リストを追加する というのをやります。 DOM、たくさん使います ざっくりいうと ・既存のプルダウ…

【新人SE向けオススメリンク集】有益だった情報をまとめたもの

今回の記事は、 新人にオススメのリンク です。 年末にPC・スマホでブックマークにしていたものをまとめ、自分の立場(新人SE)として役に立ったまたはおもしろかったなと思ったものをまとめました。 ※本当はCSSでもうすこしかっこよくかつJSで動的…

【Javascript】きれいなJavascriptについて

【今回の内容】 掲題にあるように今回は、 きれいなJavascriptについて です。 この「きれいな」には様々な解釈があると思います。 ・ロジックがしっかりとしている ・形式がしっかりしている(コメント・変数の宣言位置) ・HTMLからしっかり外出しされ…

【JavaScript・Ajax・XML】JavaScriptから、XMLHttpRequestを使用して外部のXMLファイルを読み込む

【本日の内容】 掲題ににあるように、今回は、 「JavaScriptから、XMLHttpRequestを使用して外部のXMLファイルを読み込む」 をやっていきたいと思います。 【テキストで読み込むこととの違い】 前回はテキストファイルを読み込むことを行いまし…

【Javascript・XML・DOM】XMLとはどんな特徴をもつのか~前回までの流れを受けて~

【xmlとは】 xmlとは、汎用性の高いデータを長期的に保存することができる言語。 ※自分でデータ形式(要素タグなど)を作成できるが、 大文字・小文字・タグの入れ子の関係は厳格ニ規定する必要あり。 【xmlの特徴】(CSV形式やバイナリ形式との比…

【Javascript】XMLHttpRequestに関する基礎的なメモ

【XMLHttpRequestによりできること】 「XMLHttpRequest」とはjavaScriptなどに書き込むことができ、 指定したURLと自由にHTTP通信を行えるもの。 Ajax関連の書籍を読むと必ずと言っていいほど出てくるもの。 →動的なページ生成をページ遷移せずに…

【Javascript・DOM】動的なリストの作成とDOMのツリー構造③

【今回やること】 今回も前回の続き。 前回の動的なリストに以下の点を追加します。 ・今回はユーザが選択するリストに<a href>を追加し、リンク設定を出来るようにする 【ノードの構造】 今回のノードの構造は以下のなっていると思います。 ※bodyのところでもっと枝</a>…

【Javascript・DOM】動的なリストの作成とDOMのツリー構造

今日は、DOMを使って、動的にリストを生成します。 テーブルと同様でリストを動的に生成していきたいと思います。 うまく活用出来たら、これで自分だけのリンク集とか作れるんじゃないかなと思います。(生成したHTMLをどう保存するかは学習の必要が…

【CSS】CSSに関しての基本的なこととプログラミング言語で共通すること

■CSSの存在意義 「目的」 以下の目的のため ・HTMLファイルの可読性をあげるため ・保守性のため。デザインの変更時、変更箇所をCSSファイルのみにする ■HTMLファイルの外部ファイルとしてCSSを利用する 「記述する個所」 <head>ここに以下のソー</head>…

【Javascript(イベントハンドラ)】同一ページ内で指定した部分へ遷移する部品

今回は、イベントハンドラについて簡単なものを作ったので紹介します。 【イベントハンドラとは】 ページを閲覧していて、 ・プルダウンを選択したら、ページ繊維した ・文字や写真にマウスカーソルをあてたら、色が変わる写真が変わった ・ボタンをクリック…

【Javascript・DOM】全てのテキストボックスを初期化する部品

今日はDOMについて。 【DOMとは】 DOMとは、「doccument object model」の略で、HTMLやXMLに含まれる要素にアクセスできる仕組みことだそうです。 【DOMでできること】 DOMを利用することによって、サーバサイドではなく、クライアント側で…

【初心者向け】HTML.Javascript.CSSを学ぶならこのツール!!

今回は、HTML.Javascript.CSSをこれから学びたいという人向けに便利ツールを紹介します! 紹介するのは、CODEPREPという便利ツールである 参考:http://codeprep.jp/ja このツールは以下の点で非常に魅力的である。 1、一方的な情…

.hatena-module:nth-of-type(10) { background: transparent; } .hatena-module:nth-of-type(10) .hatena-module-title{ display: none; } .hatena-module:nth-of-type(10) .hatena-module-body { padding: 0; }