赤間 公太郎の出題履歴
過去全ての出題を確認できます
2016-07-26【講師：赤間 公太郎】ウェブ制作担当
■テストサーバー、作っていますか?
「テストサーバーってWebアプリ開発がある場合だけ作ればいいんでしょ?」と思っていませんか?
本番サーバーにFTPアップロードしないとソーシャルボタンが動いているかどうか確認できない、など起こったことはありませんか?
さて今回はテストサーバーの設置について考えてみましょう。
1.テストサーバーがなくて困ったことやトラブルになったことはありますか?それはどんなことでしょうか?
2.テストサーバーから本番サーバーへの移行で、ウェブ担当者が気をつけておかないといけないことはどんなことがあると思いますか?
「テストサーバーってWebアプリ開発がある場合だけ作ればいいんでしょ?」と思っていませんか?
本番サーバーにFTPアップロードしないとソーシャルボタンが動いているかどうか確認できない、など起こったことはありませんか?
さて今回はテストサーバーの設置について考えてみましょう。
1.テストサーバーがなくて困ったことやトラブルになったことはありますか?それはどんなことでしょうか?
2.テストサーバーから本番サーバーへの移行で、ウェブ担当者が気をつけておかないといけないことはどんなことがあると思いますか?
たとえばWordPressなどCMSを使っているとき、いきなり本番環境でバージョンアップやプラグインを入れてしまうと問題が発生したときにサイトが閲覧できなくなることが起こることがあります。
2016-02-27【講師：赤間 公太郎】ウェブ制作担当
■いまさら聞けない文字コード
Web制作における代表的な日本語の文字コードは「UTF-8」「Shift_JIS」「EUC-JP」があります。
最近では文字化けを起こしているサイトは少なくなりましたが、多言語対応のサイトが増えてきていることもあり文字コードを間違えると異なる言語の国では文字化けをしている、ということが起こっています。
そこで今回は改めて文字コードについてお答えください。
1.「UTF-8」「Shift_JIS」「EUC-JP」、あなたが運用しているサイトではどの文字コードを使用していますか?
2.それを使用している理由を教えてください。ワードプレスなどのシステムを導入していたり、バックグラウンドのDBとの連携がある場合、システムがどの文字コードを使っているかは意識していますか?
3.Webデザイナーに発注するときに文字コードの指定を行っていますか?
Web制作における代表的な日本語の文字コードは「UTF-8」「Shift_JIS」「EUC-JP」があります。
最近では文字化けを起こしているサイトは少なくなりましたが、多言語対応のサイトが増えてきていることもあり文字コードを間違えると異なる言語の国では文字化けをしている、ということが起こっています。
そこで今回は改めて文字コードについてお答えください。
1.「UTF-8」「Shift_JIS」「EUC-JP」、あなたが運用しているサイトではどの文字コードを使用していますか?
2.それを使用している理由を教えてください。ワードプレスなどのシステムを導入していたり、バックグラウンドのDBとの連携がある場合、システムがどの文字コードを使っているかは意識していますか?
3.Webデザイナーに発注するときに文字コードの指定を行っていますか?
2015-10-28【講師：赤間 公太郎】ウェブ制作担当
■Web制作で利用する素材の管理はどうする?
Web制作のときには、写真などの画像、ダウンロード用PDF、取材をしたファイルなどさまざま素材が必要になります。同じような内容のファイルが複数存在するときや複数人でそれらの素材を利用するとき、またクライアントから素材をもらったり預かったりすることもあります。
そこで問題です。
1.素材はどこに置いていますか?
たとえば、Dropbox内にプロジェクト別フォルダーを作ってメンバーで共有している、など
2.クライアントから提供された素材は何かルールを設けて管理をしておく必要があると思いますか?
必要がある、と思われる方は、それはどのような素材を想定されていますか?また、なぜルールが必要だと思われますか?
必要がない、と思われる方は、なぜルールが必要がないと思われますか?
3.素材管理をするときに、特に気をつけていることはどのようなことですか?
またその気をつけることを共有するメンバーにルールを定着させるために行っていることは何かありますか?
Web制作のときには、写真などの画像、ダウンロード用PDF、取材をしたファイルなどさまざま素材が必要になります。同じような内容のファイルが複数存在するときや複数人でそれらの素材を利用するとき、またクライアントから素材をもらったり預かったりすることもあります。
そこで問題です。
1.素材はどこに置いていますか?
たとえば、Dropbox内にプロジェクト別フォルダーを作ってメンバーで共有している、など
2.クライアントから提供された素材は何かルールを設けて管理をしておく必要があると思いますか?
必要がある、と思われる方は、それはどのような素材を想定されていますか?また、なぜルールが必要だと思われますか?
必要がない、と思われる方は、なぜルールが必要がないと思われますか?
3.素材管理をするときに、特に気をつけていることはどのようなことですか?
またその気をつけることを共有するメンバーにルールを定着させるために行っていることは何かありますか?
2015-05-27【講師：赤間 公太郎】ウェブ制作担当
■運用しやすいCSSコーディング規約
コーディングを複数人で行っていたり、外部の制作会社にコーディングを依頼していたりする場合、id/classのネーミングがばらばらになってしまったりなど美しくない運用しづらいスタイルシートになってしまうことがあります。
CSSコーディング規約を作っておけば、そのようなこともなくなるのですが、最初に作ったままで実際に運用に使われない規約も多々あって、結局見てもらえないCSSコーディング規約もあります。
そこで今回は理想的な運用しやすいCSSコーディング規約について考えてみたいと思います。
1. CSSコーディング規約のようなものを作っていますか?
2. 作っている場合、メンテナンスはどのように行っていますか?
3. 作っている場合、困ったことや失敗談などあれば教えてください。
4. 作っていない場合、困ったことや作っておけばよかったと思ったことはありますか?それはどんなときですか?
コーディングを複数人で行っていたり、外部の制作会社にコーディングを依頼していたりする場合、id/classのネーミングがばらばらになってしまったりなど美しくない運用しづらいスタイルシートになってしまうことがあります。
CSSコーディング規約を作っておけば、そのようなこともなくなるのですが、最初に作ったままで実際に運用に使われない規約も多々あって、結局見てもらえないCSSコーディング規約もあります。
そこで今回は理想的な運用しやすいCSSコーディング規約について考えてみたいと思います。
1. CSSコーディング規約のようなものを作っていますか?
2. 作っている場合、メンテナンスはどのように行っていますか?
3. 作っている場合、困ったことや失敗談などあれば教えてください。
4. 作っていない場合、困ったことや作っておけばよかったと思ったことはありますか?それはどんなときですか?
2015-01-29【講師：赤間 公太郎】ウェブ制作担当
■html5の文章構造化
section,article,navなどhtml5ではマークアップを厳密化し、より分かりやすい文章にすることを考えています。
xhtmlで記述された下の文章をhtml5に移行するときにあなたはどのようなマークアップを行いますか?
文章をそのままコピーして、追加・修正するマークアップを入れてもらってもいいですし、該当箇所だけを修正してもらっても構いません。
==▼ここから▼==
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTMLサンプル</title>
<meta name="author" content="MR税理士事務所" />
<meta name="description" content="仙台を中心に法人の会計・財務をサポートします。" />
<meta name="keywords" content="税理士,帳簿作成,会計" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>
<link href="css/common.css" type="text/css" rel="stylesheet" media="all" />
<link href="css/style.css" type="text/css" rel="stylesheet" media="all" />
<!--[if lt IE 9]><script src="//ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script><![endif]-->
</head>
<body>
<div id="container">
<div id="header">
<h1 id="logo"><a href="/"><img src="img/site-logo.png" alt="MR税理士事務所" /></a></h1>
<p>お電話からのお問い合わせ <span>022-000-0000</span>(受付時間 9:00?18:00 土日祝除く)</p>
<!--/#header--></div>
<div id="global-navi">
<ul>
<li><a href="/">トップページ</a></li>
<li><a href="/info/">事務所案内</a></li>
<li><a href="/business/">業務案内</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
<li><a href="/blog/">社員ブログ</a></li>
</ul>
<!--/#global-navi--></div>
<div id="contents">
<div id="main">
<h1>税理のプロフェッショナルとして様々なサービスをご提供します</h1>
<p>事業を存続・発展させていくには、様々な経営判断を下さなければなりません。<br />
判断を下すには、会計と税務 の視点が不可欠です。最良の判断を会計・税務の専門家としてご提供します。</p>
<h2>充実のサービスラインナップ</h2>
<p>法人様、経営者様、個人事業主様、お客様のご要望にお応えする2つのサービスをご用意しています。</p>
<div class="service">
<h3>会計・税務サービス</h3>
<p><img src="img/photo1.jpg" alt="" /></p>
<p>税務全般にわたり適切なアドバイスをします。</p>
<ul>
<li>証憑書類の整理・保存の指導</li>
<li>各種帳簿作成の指導</li>
<li>帳簿作成の代行</li>
<li>帳簿のチェック</li>
<li>決算事前対策</li>
<li>決算書・申告書作成</li>
<li>税務調査立会い</li>
</ul>
<p class="more"><a href="/business/">詳細はこちらから</a></p>
<!--/.service--></div>
<div class="service">
<h3>経営支援サービス</h3>
<p><img src="img/photo2.jpg" alt="" /></p>
<p>経営計画者の作成をメインに貴社の経営改善に対して積極的に関与させていただきます。</p>
<ul>
<li>経営計画書を作成</li>
<li>経営会議支援</li>
<li>経営相談</li>
</ul>
<p class="more"><a href="/business/">詳細はこちらから</a></p>
<!--/.service--></div>
<div id="news">
<h1>新着情報</h1>
<dl>
<dt>15/1/14</dt>
<dd><a href="/blog/">お客様事例その2</a></dd>
<dt>15/1/7</dt>
<dd><a href="/blog/">お客様事例その1</a></dd>
<dt>15/1/5</dt>
<dd><a href="/blog/">あけましておめでとうございます!</a></dd>
</dl>
<!--/#news--></div>
<!--/#main--></div>
<div id="sidebar">
<ul>
<li><a href="/info/"><img src="img/banner1.png" alt="バナー1" /></a></li>
<li><a href="/contact/"><img src="img/banner2.png" alt="バナー2" /></a></li>
<li><a href="/blog/"><img src="img/banner3.png" alt="バナー3" /></a></li>
</ul>
<!--/#sidebar--></div>
<!--/#contents--></div>
<div id="footer">
<p>〒980-0014 仙台市青葉区本町1-2-3-4-5 TEL/022-123-4567 FAX/022-234-5678</p>
<p class="copyright">© 2015 MR税理士事務所</p>
<!--/#footer--></div>
<!--/#container--></div>
</body>
</html>
==▲ここまで▲==
section,article,navなどhtml5ではマークアップを厳密化し、より分かりやすい文章にすることを考えています。
xhtmlで記述された下の文章をhtml5に移行するときにあなたはどのようなマークアップを行いますか?
文章をそのままコピーして、追加・修正するマークアップを入れてもらってもいいですし、該当箇所だけを修正してもらっても構いません。
==▼ここから▼==
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTMLサンプル</title>
<meta name="author" content="MR税理士事務所" />
<meta name="description" content="仙台を中心に法人の会計・財務をサポートします。" />
<meta name="keywords" content="税理士,帳簿作成,会計" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>
<link href="css/common.css" type="text/css" rel="stylesheet" media="all" />
<link href="css/style.css" type="text/css" rel="stylesheet" media="all" />
<!--[if lt IE 9]><script src="//ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script><![endif]-->
</head>
<body>
<div id="container">
<div id="header">
<h1 id="logo"><a href="/"><img src="img/site-logo.png" alt="MR税理士事務所" /></a></h1>
<p>お電話からのお問い合わせ <span>022-000-0000</span>(受付時間 9:00?18:00 土日祝除く)</p>
<!--/#header--></div>
<div id="global-navi">
<ul>
<li><a href="/">トップページ</a></li>
<li><a href="/info/">事務所案内</a></li>
<li><a href="/business/">業務案内</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
<li><a href="/blog/">社員ブログ</a></li>
</ul>
<!--/#global-navi--></div>
<div id="contents">
<div id="main">
<h1>税理のプロフェッショナルとして様々なサービスをご提供します</h1>
<p>事業を存続・発展させていくには、様々な経営判断を下さなければなりません。<br />
判断を下すには、会計と税務 の視点が不可欠です。最良の判断を会計・税務の専門家としてご提供します。</p>
<h2>充実のサービスラインナップ</h2>
<p>法人様、経営者様、個人事業主様、お客様のご要望にお応えする2つのサービスをご用意しています。</p>
<div class="service">
<h3>会計・税務サービス</h3>
<p><img src="img/photo1.jpg" alt="" /></p>
<p>税務全般にわたり適切なアドバイスをします。</p>
<ul>
<li>証憑書類の整理・保存の指導</li>
<li>各種帳簿作成の指導</li>
<li>帳簿作成の代行</li>
<li>帳簿のチェック</li>
<li>決算事前対策</li>
<li>決算書・申告書作成</li>
<li>税務調査立会い</li>
</ul>
<p class="more"><a href="/business/">詳細はこちらから</a></p>
<!--/.service--></div>
<div class="service">
<h3>経営支援サービス</h3>
<p><img src="img/photo2.jpg" alt="" /></p>
<p>経営計画者の作成をメインに貴社の経営改善に対して積極的に関与させていただきます。</p>
<ul>
<li>経営計画書を作成</li>
<li>経営会議支援</li>
<li>経営相談</li>
</ul>
<p class="more"><a href="/business/">詳細はこちらから</a></p>
<!--/.service--></div>
<div id="news">
<h1>新着情報</h1>
<dl>
<dt>15/1/14</dt>
<dd><a href="/blog/">お客様事例その2</a></dd>
<dt>15/1/7</dt>
<dd><a href="/blog/">お客様事例その1</a></dd>
<dt>15/1/5</dt>
<dd><a href="/blog/">あけましておめでとうございます!</a></dd>
</dl>
<!--/#news--></div>
<!--/#main--></div>
<div id="sidebar">
<ul>
<li><a href="/info/"><img src="img/banner1.png" alt="バナー1" /></a></li>
<li><a href="/contact/"><img src="img/banner2.png" alt="バナー2" /></a></li>
<li><a href="/blog/"><img src="img/banner3.png" alt="バナー3" /></a></li>
</ul>
<!--/#sidebar--></div>
<!--/#contents--></div>
<div id="footer">
<p>〒980-0014 仙台市青葉区本町1-2-3-4-5 TEL/022-123-4567 FAX/022-234-5678</p>
<p class="copyright">© 2015 MR税理士事務所</p>
<!--/#footer--></div>
<!--/#container--></div>
</body>
</html>
==▲ここまで▲==
h1が複数ある箇所については、xhtmlではh1の数についての言及がなく任意判断で使用できることがあります。html5では明確に複数h1の使用がOKとなりました。今回はあくまで仕様にそったコーディングについての課題ですが、もしSEOを意識したマークアップを考えられる場合は、その旨書いて頂いても構いません。
2014-09-30【講師：赤間 公太郎】ウェブ制作担当
■いまさら聞けない正しいタグの使い方
h1,p,ulなど、レイアウトのためだけではなく意味や目的、効果を考えてタグを使っていますか?
下の設問にYes/Noでお答えください。
Q1. titleタグとh1タグは、各ページ同じにしたほうがサイト全体のキーワードが増えるので同一にしたほうがよい。
Q2. 見出しには、たとえば製品の特徴を表すとき「特徴1」「特徴2」と書くよりも、「体に脂肪がつきにくい黒烏龍茶の効果」のようにキーワードを意識した見出しをつけたほうがよい。
Q3. <h2>費用</h2>と記述したとき、見栄えが気になるのでスペースを空けて<h2>費△用</h2>とした(※△は半角スペース)。ひとつの言葉として検索エンジンは認識するので問題ない。
Q4. グローバルナビは ul liタグを使って作るとSEO上よい。
Q5. 左メニューは h2を入れて作るとSEO上よい。
Q6. 問い合わせフォームはtable、dl、ul等がよく使われるが、スマホ利用を考えるとdl dd が成形しやすい。
Q7. <strong><b><span style="font-weight: bold;">、同じように太字にすることができるのでどれで記述してもよい。
Q8. divタグとpタグ、どちらも段落を定義するタグなので、レイアウトがしやすいほうで記述すればよい。
Q9. HTML5で登場したsectionタグはdivタグ同様に段落を定義するタグなので特に使う必要はない。
Q10. tableタグはボーダーを消せばレイアウトをするのに便利なので表以外で積極的に使うべき。
h1,p,ulなど、レイアウトのためだけではなく意味や目的、効果を考えてタグを使っていますか?
下の設問にYes/Noでお答えください。
Q1. titleタグとh1タグは、各ページ同じにしたほうがサイト全体のキーワードが増えるので同一にしたほうがよい。
Q2. 見出しには、たとえば製品の特徴を表すとき「特徴1」「特徴2」と書くよりも、「体に脂肪がつきにくい黒烏龍茶の効果」のようにキーワードを意識した見出しをつけたほうがよい。
Q3. <h2>費用</h2>と記述したとき、見栄えが気になるのでスペースを空けて<h2>費△用</h2>とした(※△は半角スペース)。ひとつの言葉として検索エンジンは認識するので問題ない。
Q4. グローバルナビは ul liタグを使って作るとSEO上よい。
Q5. 左メニューは h2を入れて作るとSEO上よい。
Q6. 問い合わせフォームはtable、dl、ul等がよく使われるが、スマホ利用を考えるとdl dd が成形しやすい。
Q7. <strong><b><span style="font-weight: bold;">、同じように太字にすることができるのでどれで記述してもよい。
Q8. divタグとpタグ、どちらも段落を定義するタグなので、レイアウトがしやすいほうで記述すればよい。
Q9. HTML5で登場したsectionタグはdivタグ同様に段落を定義するタグなので特に使う必要はない。
Q10. tableタグはボーダーを消せばレイアウトをするのに便利なので表以外で積極的に使うべき。
2014-06-24【講師：赤間 公太郎】ウェブ制作担当
■使えるCSS3プロパティ・セレクタ
CSS3では、角丸やグラデーションなどこれまでは画像を用いたりJavaScriptを駆使して行っていたデザインをCSSのみで表現できるようになりました。
そこでCSS3で使ってみた(もしくは使ってみたいと思っている)プロパティ・セレクタで「これは便利!これは使える!」と思ったものを教えてください。
1. 便利・使えるプロパティ・セレクタ
2. 何を行う目的で使用しましたか?もしくは使ってみたいと思っていますか?
3. 以前はその目的を実現するためにはどのようにやっていましたか?(JavaScript・画像など?)
CSS3では、角丸やグラデーションなどこれまでは画像を用いたりJavaScriptを駆使して行っていたデザインをCSSのみで表現できるようになりました。
そこでCSS3で使ってみた(もしくは使ってみたいと思っている)プロパティ・セレクタで「これは便利!これは使える!」と思ったものを教えてください。
1. 便利・使えるプロパティ・セレクタ
2. 何を行う目的で使用しましたか?もしくは使ってみたいと思っていますか?
3. 以前はその目的を実現するためにはどのようにやっていましたか?(JavaScript・画像など?)
CSS3まだ使ったことないよ！という人は、ぜひ下記などをご覧ください。対応ブラウザなどの注意はありますが、便利な機能は多いです。
▼CSS3 レイアウトに使える便利なbox系プロパティ
http://zxcvbnmnbvcxz.com/css3-layout/
▼CSS3の新機能をご紹介！CSS3プロパティまとめ（サンプル付）
http://www.hp-stylelink.com/news/2013/08/20130822.php
▼CSS3 レイアウトに使える便利なbox系プロパティ
http://zxcvbnmnbvcxz.com/css3-layout/
▼CSS3の新機能をご紹介！CSS3プロパティまとめ（サンプル付）
http://www.hp-stylelink.com/news/2013/08/20130822.php
2014-02-28【講師：赤間 公太郎】ウェブ制作担当
■CSSを変えたのにデザインが変わらない!
ウェブ制作を行っていると「CSSを変えたのにデザインが反映されない」ことがよくあります。
あなたはその時どういう手順で対処していきますか?
下の質問に回答しながら対処手順を教えてください。
1. CSS検証にどのブラウザを使っていますか?
2. そのブラウザのどの機能を使っていますか?
3. その機能を使って、どうやってチェックして検証を行っていますか?
4. がんばって対処しても全然反映されなかった場合あなたはどうしていますか?
ウェブ制作を行っていると「CSSを変えたのにデザインが反映されない」ことがよくあります。
あなたはその時どういう手順で対処していきますか?
下の質問に回答しながら対処手順を教えてください。
1. CSS検証にどのブラウザを使っていますか?
2. そのブラウザのどの機能を使っていますか?
3. その機能を使って、どうやってチェックして検証を行っていますか?
4. がんばって対処しても全然反映されなかった場合あなたはどうしていますか?
2013-11-30【講師：赤間 公太郎】ウェブ制作担当
■既存サイトをHTML5で組み直すべきか?そもそもHTML5のメリットって何?
HTML5の仕様がだいぶ整備されてきました。
ところで、まだHTML5について詳しく知っている方は少ないのではないでしょうか?
そこで、以下質問にお答えください。
Q1.今後、XHTMLではなく、HTML5を活用するメリットは何だと思いますか?
Q2.逆に、XHTMLではなく、HTML5を導入する時の注意点は何だと思いますか?
Q3.既存サイトをHTML5で組み直すべきだと思いますか?もしくは新規追加ページはHTML5で組んだ方がよいと思いますか?
HTML5の仕様がだいぶ整備されてきました。
ところで、まだHTML5について詳しく知っている方は少ないのではないでしょうか?
そこで、以下質問にお答えください。
Q1.今後、XHTMLではなく、HTML5を活用するメリットは何だと思いますか?
Q2.逆に、XHTMLではなく、HTML5を導入する時の注意点は何だと思いますか?
Q3.既存サイトをHTML5で組み直すべきだと思いますか?もしくは新規追加ページはHTML5で組んだ方がよいと思いますか?
HTML5とは？（田所淳氏のスライドシェアがわかりやすいので掲載します）
http://www.slideshare.net/tado/ii-html5-html5
http://www.slideshare.net/tado/ii-html5-html5