サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
scene-live.com
こんにちは、WEBマーケティング部の杉尾です。 今回は、PHP 自作関数（ユーザー定義関数）の簡単な作り方を紹介します ページ下部で具体例を示していますので、参考にしてください。 PHPのプログラムを書いていると、何度も同じ処理をするということに出くわすときがあります。 同じ処理を書くのはソースの無駄、時間の無駄ですから、プログラマーとしては避けたいですよね。 そういうときに、よく出てくる処理をまとめておいて、いつでも呼び出せるようにしておくために作るのが自作関数 ＝ ユーザー定義関数です。 ユーザー定義関数の使い方 使い方はとても簡単です。 関数を定義して、それをページ内で呼び出すだけです。 ユーザー定義関数の定義の仕方 <?PHP function 関数名 ( 引数1, 引数2, ... ){ 処理1; 処理2; } ?> 当然ですが、PHPソース内で定義してください。 引数は複数指定
本日より株式会社SceneLiveのブログを始めます。 今日の執筆者はWEBマーケティング部の杉尾成行です。 よろしくお願いします。 DOCTYPE宣言って？ DOCTYPE宣言とは「Document Type Definition」（DTD）のことで、日本語に訳すと「文書型宣言」となります。 つまり、どのバージョンのHTMLやXHTMLで作成されているかを宣言する役目を担っています。 ですので、ページの先頭に書く必要があります。 近年のホームページでよく使われていたHTML 4.01(Transitional)では <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> という書き方でした。 ですが、昨年(2014年)の10月29日（米国時
【決定版】HTML5のmetaタグなど 総まとめ description、keywordsからtitleまで ウェブサイト（ホームページ）をつくるときに、<head> ～ </head>内に必ず書くのがmetaタグです。 <title>や、<style>、<script>は言わずもがなですが、metaタグに関しては ◆『おまじない』のように書いている ◆よくわからないから、コピペしている なんてことありませんか？ もし、そういう人がいたら、この記事を見てマスターしてください。 普段あまり使わないマニアック（？）なものまで紹介しています。 metaタグとは？ 紹介へ移る前に、まず基本的なことを押さえましょう。 『metaタグとは何か』ということです。 metaタグとはhtmlページの<head>～</head>内に記述される、ページの各種付加情報を定義するタグのことを言います。 公開されてい
HTMLのDOCTYPE宣言って何なの？使い方は？書き方は？ HTMLとは何？ HTMLでどんなことができるの？ HTMLを書いてHTMLファイルを作り、ブラウザで確認する方法 2015年 コーディングはHTML5で。IE8以下の対策も忘れずに 代表的なHTMLタグをご紹介します。使用例つきで。 HTML5要素のカテゴリーを押さえましょう HTML5のコンテンツモデルって何？という方にオススメの記事です。 HTML5 カテゴリー、コンテンツモデル一覧表 ＨＴＭＬ5で書く~まずは骨組みから HTML5実践編 article,section,nav,aside,header,footer,mainなどの解説 HTML5 実践編 HTML5におけるDIVタグの使い方を紹介します【HTML5 実践編】 a要素、img要素、figure要素、figcaption要素を紹介します【HTML5実践編】
どうも、こんにちは。 伊藤です。 前回は【CSVをいい感じにインポートする方法】をご紹介させて頂きました。 【前回】⇒:CSVをいい感じにインポートする方法 ということで今回は、【データをCSVでいい感じにエクスポートする方法】について書いてみます。 まずはおさらい PHPには標準クラスというものが存在し、こやつが優秀だとお伝えしました。 そこでもう一度。 PHP5.1以上を利用しているなら、 迷わず『SplFileObject』を利用するのが良いでしょう。 エクスポートも『SplFileObject』を使用して処理出来ます。 実践コード 早速、実践コードをどうぞ。 //を先頭に書いている行は説明です。コメントアウトなのでプログラムには反映されません。 参考にしてください。 【コード】 // ファイル名 $file_path = "export.csv"; // CSVに出力するタイトル行
こんにちは、伊藤です。 初めての記事です。 よろしくお願いします。 本日は、【CSVを読み込んでいい感じにインポートする方法】を紹介します。 そもそもCSVとは？？ CSVとは簡単に言えば、カンマ区切りのテキストデータのことです。 "名前","性別","¥n","ito","男性","¥n","sugio","不明" みたいな状態のことですね。 アプリケーションを問わず、データのやり取りをするために互換性を高めた形式です。 CSV形式のファイルは、Excelで開かれることが多いですね。 このときExcelが『これはCSV形式である』と判断し、カンマで区切られたテキスト（文字列）を、いつも見ている『あの』表のような形式で見せてくれます。 もちろんテキストデータですから、メモ帳やテキストエディタなど様々なアプリケーションで開くことも可能です。 つまり、大量のデータを扱うのにもってこいなファイル
こんにちは、WEBマーケティング部の杉尾です。 今回は、CSSを学ぶ上で、そして使いこなすのに必要なmarginとpaddingを紹介したいと思います。 WEBデザインをしていて目にしない日はないというくらい使う頻度の高いプロパティです。 どっちがどっち？ margin・・・・・要素の外側の余白 padding・・・・・要素の内側の余白 慣れれば、そんなこともなくなるんですが、初めの頃ってmarginとpaddingのどっちがどっちかわからなくなりますよね。 僕は初心者の頃、padding（パディング）を服に入れる『パッド』と同じ語源だと理解して覚えました。 中に入れるものだから、『要素の中の余白』だということですね。 その逆だから、marginは『要素の外側の余白』。 これでスッキリ覚えられると思います。（多分） 参考画像内を少し解説します。 Contentと書いている部分は、たとえばd
こんにちは、ウェブマーケティング部の杉尾です。 前々回、CSS3のメディアクエリについてお話しさせていただきました。 また、前回は『スマホ、タブレットの横幅』(端末解像度と実質解像度)を紹介しました。 今回はその続きとして、ブレイクポイント（CSSの切り替え地点）を考えてみます。 レスポンシブデザインでサイトを作る際に必ず必要となってくるので、参考にしてみてください。 レスポンシブデザインとメディアクエリ 現場において、メディアクエリは主にレスポンシブデザインのサイトを制作する際に使われます。 レスポンシブデザインは、一つのHTMLソースで、スマホからPCまで画面構成を崩すことなく表示できます。 閲覧端末ごとの制作が必要なくなり、また管理もしやすいので、ここ数年でかなり普及しました。 【詳しくはコチラ】 ⇒http://scene-live.com/page.php?page=95 ブレイ
こんにちは、ウェブマーケティング部の杉尾です。 かなり時間が空いてしまいましたが、前回、CSS3のメディアクエリについてお話しさせていただきました。 それに関係する話で、スマホとタブレットの横幅(端末解像度、実質解像度)を紹介したいと思います。 制作の参考にしてください。 【前回はコチラ】 ⇒http://scene-live.com/page.php?page=95 スマートフォンの端末解像度と実質解像度 iPhoneとAndroidに分けてお伝えします。 iPhone デバイス 端末解像度(横×縦) 実質解像度(横×縦) 画素(ppi) Device Pixel Ratio
こんにちは、WEBマーケティング部の杉尾です。 今回は、レスポンシブデザインのサイトを作るのに欠かせないCSS3 メディアクエリ（Media Queries）のお話です。 Bootstrapなどのフレームワークを使った場合は、当たり前のようにレスポンシブデザインになりますが、そういうものを使わずにレスポンシブなサイトを作る場合は必ず必要となってくる知識です。 また、それらを使う場合でも、ちょっとした改修やデザイン変更時に触ることがあるかもしれません。 是非とも覚えて、積極的に活用しましょう。 メディアクエリとは？ CSS3から導入された仕様の一つです。 よく使う指定として、「ウェブページの表示サイズがこれ以上の幅ならこういうスタイルを適用する」という指定ができます。 それ以外にも、 『表示サイズ、高さ』(height) 『画面の幅、高さ』(device-width、device-heigh
あけましておめでとうございます。 弊社は1月5日より稼働しております。 本年もよろしくお願いいたします。 2016年一発目の記事は、解像度の話です。 ピクセルと解像度の話 まずは基本的なところをお話しします。 ピクセルとは？ ピクセル（pixel）とは『PICture』と『ELEment』を組み合わせた造語です。（『picture cell』の略とも） ピクセルは画素と訳されます。 単位として表すときは『px』と表記します。 ピクセル、解像度、dpi 注意したい点として、ピクセルはそれだけで物理的な大きさを表す単位にはならないということが挙げられます。 では、ピクセルの大きさは何で決まるかというと、解像度です。 解像度は『 dpi 』(dots per inch)で表されます。 これは1インチ（＝2.54cm）の中にどれだけのドットがあるかを示しています。 ドットとは『点』のことです。これ
【CSS3】CSSのtransformの値を４つ紹介【scale、translate、rotate、skew】 こんにちは、WEBマーケティング部の杉尾です。 今回は要素を変形させるCSS3のプロパティ、transformの概要です。 transformは、２Ｄ（平面）と３Ｄ（立体）の指定ができるのですが、今回はまず２Ｄを紹介します。 CSS3のtransformプロパティとは？ transformとは読んで字のごとく、『変形』に関するプロパティです。 要素を「移動・拡大・回転・傾斜・遠近」させることができます。 animationプロパティや@keyframesと組み合わせることで、複雑な動きをさせることが可能になります。 transformの対応ブラウザ 便利な『transform』プロパティですが、各主要ブラウザの対応状況はどうでしょうか？ いつものように、Caniuse.comへ行
こんにちは、WEBマーケティング部の杉尾です。 前回に引き続き、transitionプロパティを紹介します。 今回はより詳しい解説です。 前回はコチラ ⇒【CSS3】CSSで動きが出せるtransitionプロパティの概要を紹介します まずは前提条件 前回も紹介しましたが、transitionプロパティはIE9以下では動きません。 他の主要ブラウザは、ほぼ対応しています。 ですので、IE9以下に対応する必要がある場合はプログレッシブエンハンスメントの考え方を採用し、IE9以下で見ても情報を取得するのに問題がないようにしましょう。 前回のおさらいと解説 前回、紹介したサンプルコードはコチラです。 【HTML】 <div class="test_transition">サンプル</div> 【CSS】 .test_transition { width:100px; height:100px;
こんにちは、WEBマーケティング部の杉尾です。 今回はWEBページに動きを出してくれる、CSS3のtransitionプロパティの概要を紹介します。 transitionとは transitionプロパティのtransitionは『移り変わり、変遷、変化』という意味を持つ言葉です。 その意味通り、transitionプロパティは『時間的変化』を指定するときに使うものです。 CSS3には、transition以外にも、変形やアニメーションを表現するプロパティが他に２つあります。 それが、animationとtransformです。 ３つの違いは、 transition ⇒ 滑らかに変化させる（移動時間を調整）、ループなし animation ⇒ ページ表示後に即可動、ループあり transform ⇒ 変形（移動・拡大・回転・傾斜・遠近）が可能、ループなし です。 わかりづらいので、とても簡
こんにちは、エンジニアの真田です。 今回はPHPで情報を受け渡すときに使われるGETとPOSTを紹介します。 そもそもGETとPOSTって？ 一言で言うと Webサーバーにデータを受け渡すときに用いるメソッド（方法）です。 詳しく言うと HTTP通信というプロトコルでWebサーバーとクライアント（Webブラウザなど）がデータを送受信するときに使います。 ※プロトコル……複数の主体が滞りなく信号やデータ、情報を相互に伝送できるよう、あらかじめ決められた約束事や手順の集合のこと。 どう違うの？ 見た目 一番わかりやすいのが、見た目です。 GETメソッドはURLの末尾に「?」をつけ、「パラメーター名="値"」という形式でデータを送ります。 そのせいで、誰からでも見ることができます。 POSTメソッドで送るデータはWebブラウザ上には現れません。 ※通信を傍受してパケットを解析されると情報漏洩の可
こんにちは、WEBマーケティングの杉尾です。 前回、画像ファイルを表示させるときに、「相対パス」という言葉を出しました。 これはファイルを参照するときに使う書き方の一つです。 『相対パス』の他に『絶対パス』という書き方があります。 今日はその2つについてお話しさせていただきます。 相対パス、絶対パスの考え方 あなたが駅前で道を聞かれたとします。 その場所を知っていれば、あなたは恐らく駅からの道順を説明すると思います。 少し遠い場合でも、「何番系統のバスに乗って…」という風に答えると思います。 これが相対パスの考え方で、その場所からの位置関係を示したものです。 『パスを書こうとしているそのファイルから見た位置』ですね。 あなたが通販で商品を買ったとします。 その荷物を届けてもらうために、都道府県からの住所を言う、もしくは記入しますよね。 相手はあなたがどこにいるかわからないからです。 それが
こんにちは、WEBマーケティング部の杉尾です。 今回は枠内で文章（単語）の折り返しを指定するプロパティword-wrap と word-breakの使い分けを紹介します。 文章の折り返しを指定する 文字、文章の折り返しの指定をするプロパティはword-wrap と word-breakで、それらに値もいくつかありますが、現実に使用頻度が高いのは2つだけだと思います。 それが、『word-wrap:break-word;』と『word-break:break-all;』です。 word-wrap と word-breakとは どちらもCSS3のTextモジュールに属するプロパティです。 紛らわしい２つのプロパティですが、違いはというと、 ・word-wrap …… 単語の途中で改行するかどうかを指定する ・word-break …… 行の改行方法を指定する ということです。 word-wra
こんにちは、WEBマーケティング部の杉尾です。 今回はCSS3のbackgroud-sizeで画像を背景全面に表示させる方法を紹介します。 最近、背景が全面画像になっているページがよく見られます。 以前は読み込みに時間がかかるのが難点でしたが、今は処理速度も回線速度も上がっていますので、問題なくデザインできるようになっています。 スマホサイト作成のときによく使われますので、是非覚えて使ってみてください。 主要ブラウザ対応状況 まず、いつものようにCaniuse.comを見に行き、各主要ブラウザのbackground-size対応状況を確かめます。 モダンブラウザではほぼ全てが対応済みです。（OperaMiniはブラウザシェアが低いので無視） 気になるのはIE8とAndroidブラウザの古いバージョンくらいですね。 その二つにも対応できるコードを紹介します。 対応ブラウザごとのソースコード紹
こんにちは、WEBマーケティング部の杉尾です。 今回は『YouTube動画をホームページに埋め込む方法』を紹介します。 まずは基本設定を紹介 まず埋め込みたい動画のページへ行きます。 画面下の共有ボタンを押してください。 下図のような部分が表示されます。 上画像内、赤枠で囲った埋め込みコードをクリックしてください。 出てきたテキストエリアにコードが表示されます。 例えば、こういうコードです。 <iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID" frameborder="0" allowfullscreen></iframe> これをお好きな場所にコピペするだけで動画を埋め込むことができます。 コードの説明 下記コードを使って簡単に説明をします。 <iframe width="560" heigh
こんにちは、WEBマーケティング部の杉尾です。 今回は、前回までの要素の横並びに引き続き、『Flexbox（フレキシブルボックスレイアウト）で要素を横並びにする方法』を紹介します。 floatでの横並びはコチラ ⇒【CSS】floatとclearfixで要素を横並びにする方法を紹介します（前半はfloatの説明） 『display: inline-block;』での横並びはコチラ ⇒【CSS】display:inline-block;で要素を横並びにする方法（前半はHTML5におけるボックスの話） 『display:table-cell;』での横並びはコチラ ⇒【CSS】display:table-cell;で要素を横並びにする方法 Flexboxって何？ 俗に言うFlexboxとは、フレキシブルボックスレイアウトモジュール（Flexible Box Layout Module）のことです
article,section,nav,aside,header,footer,mainなどの解説 HTML5 実践編 こんにちは。 Webマーケティング部の杉尾成行です。 前回の続きで、HTML5でのコーディングについてお話しさせていただきます。 よろしくお願いします。 ※今回、新たに作成するものはございません。 前回はコチラ ⇒ ＨＴＭＬ5で書く~まずは骨組みから HTML5実践編 前回のおさらい 前回出来上がったものは下記のような形でした。 <!DOCTYPE HTML> <html lang="ja"> <head> <title>旅行したい国</title> </head> <body> <header> <h1>旅行したい国</h1> <nav> <ul> <li>ヨーロッパ編</li> <li>アジア編</li> <li>アフリカ編</li> <li>北米、南米編</li>
今日はHTMLタグについてお話しさせていただきたいと思います。 よろしくお願いします。 まずは記述ルールから 紙幅の関係上、HTMLタグについて全てを述べることはできませんので、 代表的なものというか、「これはよく使うよ。絶対覚えてね」というもののみ紹介します。 その前に基本の記述ルールをいくつか挙げます。 ルール1.開始タグと終了タグを必ず書く。 【例】 <h1>これはテストです</h1> <ul> <li> 段落1 </li> <li> 段落2 </li> </ul> ※HTML5では終了タグを省略できるものも多く存在しますが、初めの頃は省略しないのが無難です。 構造を把握しやすいからです。省略するのは慣れてきてからにしましょう。 ルール2. 開始タグと終了タグの要素を一致させる。 1に関係することですが、これも基本です。 【正解】 <h1>これはテストです</h1> <p>これはテス
【CSS】Flexboxのプロパティ（flex-direction、flex-wrap、flex-flow、order）を紹介します こんにちは、WEBマーケティング部の杉尾です。 今回と次回で、Flexboxのプロパティを紹介します。 Flexboxのプロパティ解説 ※FlexboxはIE9以下に対応していません。 ※IE10への対応はこの記事では割愛します。 ※PC版safari(バージョン6.1以降)対応用にベンダープレフィックスを使用しています。 display:flex; display:inline-flex; まずは基本のこちらからです。 display:flex; ⇒ ブロックレベルのflexコンテナボックスを生成する。 display:inline-flex; ⇒ インラインレベルのflexコンテナボックスを生成する。 いずれもflexコンテナに指定してください。 単純に
【参考ソース】 .foo { display:-webkit-box;/*--- Androidブラウザ用 ---*/ display:-ms-flexbox;/*--- IE10 ---*/ display: -webkit-flex;/*--- safari（PC）用 ---*/ display:flex; -webkit-box-pack:justify;/*--- Androidブラウザ用 ---*/ -ms-flex-pack:justify;/*--- IE10 ---*/ -webkit-justify-content:space-between;/*--- safari（PC）用 ---*/ justify-content:space-between; } 【解説】 ２～５行目 Flexboxを作るための指定です。 ６～９行目 左からflexアイテムを並べて余白があれば、そ
【CSS3】transformプロパティの値、matrix()とmatrix3dを紹介 こんにちは、WEBマーケティング部の杉尾です。 前回は、 ⇒【CSS3】CSSのtransformの値を４つ紹介【scale、translate、rotate、skew】 を紹介しました。 今回からはそれに引き続いて、transformプロパティの3Dを順番に紹介していきたいと思います。 まずは、transformプロパティの値、matrix()とmatrix3d()について、です。 そもそもmatrix()、matrix3d()とは？ 要素を変形させるCSS3のプロパティであるtransformの値です。 前回紹介したscale、translate、rotate、skewという値は、まず要素をどのように変形させるかを指定し、どのくらい変形させるかを数値で示したものでした。 matrix()、matri
現在、（HTMLにおいては)ブロック要素、インライン要素という分け方がなくなりました。 では、どうなったかというと、その考え方はCSSに引き継がれています。 ブロック要素、インライン要素というHTMLの話ではなくて、 『その要素の、CSSにおける初期設定がブロック扱いなのかインライン扱いなのか』という分け方になっているわけです。 つまり、ブロック要素、インライン要素という分け方は廃止されたものの、ブロック扱い、インライン扱いという見た目の指定に関する考え方は残っているということです。 HTML4.1やXHTML1.0までは、HTMLの『ブロック要素、インライン要素という考え方』とCSSの『displayプロパティ』が混在していたので、HTML5では、それを整理したんですね。 見た目の話に限ると、『ブロック要素、インライン要素』が『コンテンツのカテゴリーやコンテンツモデル』に引き継がれたとい
【CSS】Flexboxのプロパティ（justify-content、align-items、align-self、align-content）を紹介します こんにちは、WEBマーケティング部の杉尾です。 前回、前々回に引き続き、Flexboxのプロパティを紹介します。 前々回はコチラ ⇒【CSS】Flexboxのプロパティ（flex-direction、flex-wrap、flex-flow、order）を紹介します 前回はコチラ ⇒【CSS】Flexboxのプロパティ（flex-grow、flex-shrink、flex-basis、flex）を紹介します はじめに ※FlexboxはIE9以下に対応していません。 ※IE10への対応はこの記事では割愛します。 ※PC版safari(バージョン6.1以降)対応用にベンダープレフィックスを使用しています。 flexコンテナ、flexアイテ
次のページ
このページを最初にブックマークしてみませんか？
『【公式】株式会社Scene Live(シーンライブ)』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
