TOP > スタッフコラム

スタッフコラム

講師 森コラム
2017年06月20日

Web業界で、気になるアレコレ /Vol.66  「 いまさら聞けない、ウェブコーデイング(4) “CSS3で追加された表現”」

こんにちは。 iMedioセミナー講師の森 和恵です。
梅雨入り宣言したものの、雨待ちの日が続きましたが、そろそろ雨模様となってきた頃でしょうか。
こんな時期は、部屋でじっくりと何かに取り組むのもよい気がします。

さて。今回は、CSS3についてお話します。

長らく続いていたCSS2.1の仕様を拡張する形で、CSS3がリリースされてからずいぶん時間が経ち、各社デバイスやブラウザーの対応も進みました。

CSS3で追加された表現といえば「グラデーション」や「ボックスの角丸」などがあげられます。これらの表現を使うことで、飾りのためのビットマップ画像が不要となり、結果としてウェブページのデータが軽くなり、閲覧スピードをあげる結果を生みました。

スマートフォンやタブレットなど、外出中に利用するデバイスは、低速な携帯電話のLTE回線を用いることが多く、データが軽くなるのは大歓迎。CSS3の普及は一気に進みました。

では、グラデーションを指定する「CSS Gradients」を確認してみましょう。

Brend < http://colinkeany.com/blend/ >のサイトでは、左・右の2色を選び、グラデーションのソースコードを生成してくれます。

.blend-gradient {
  background: -webkit-linear-gradient(90deg, rgb(22, 135, 237), rgb(20, 55, 90));
  background: linear-gradient(90deg, rgb(22, 135, 237), rgb(20, 55, 90));
}

《 linear-gradient(グラデーションの角度, 開始色, 終了色) 》

という具合にbackgroundプロパティの値をグラデーションに指定しています。
90度(90deg)を指定すると、左から右への直線でグラデーションが作成されます。

コードだけで作られたグラデーションなので、色やグラデーションの変更も文字修正だけで行うことができ、制作者の更新の手間も省くことができてうれしい進化ですよね。

…ということで、今回はここまで。おすすめしたい関連講座は↓です。
CSS3の新しい表現を用いたウェブページの制作方法を知りたい方は、ぜひ。

【レスポンシブで始める、モバイルフレンドリーなマルチデバイス対応サイト制作】
< https://www.sansokan.jp/events/eve_detail.san?H_A_NO=23684 >

【HTML5+CSS3コーデング基礎《ウェブページの品質と表現力をブラッシュアップ!》】
< https://www.sansokan.jp/events/eve_detail.san?H_A_NO=23378 >

ではまた、次回お会いしましょう。
r360studio 森 和恵 (^^)

【Twitterにて情報配信中】< https://twitter.com/r360studio >
【 担当講座一覧 】< http://r360studio.com/seminar/ >
【 iMedioコラムバックナンバー 】< http://www.imedio.or.jp/column_tax/column_mori >

講師 森コラム
2017年06月06日

Web業界で、気になるアレコレ /Vol.65「 いまさら聞けない、jQueryのアレコレ」

こんにちは。 iMedioセミナー講師の森 和恵です。
そろそろ梅雨入りですね。暑い季節に向けて、体調管理をしっかりしたい所です。

さて。今回は、jQueryについてのお話です。

ブラウザーで動くプログラミング言語としてポピュラーなJavaScript。
より手軽にプログラムが書けるように生まれたのが、jQueryです。
jQueryは、JavaScriptライブラリとも呼ばれています。

定義的なことはさておき、ここでは「何ができるのか?」から話を進めようと思います。

とりあえず、どんな役割なのかを知りたい時は、短いプログラムを動かしてみるとよくわかります。
 

【超簡単!jQueryでアニメーション付き開閉式ボックスを作成してみた – すずろぐ】
http://www.suzushin7.jp/entry/2017/05/09/retractable-box-by-jquery

のページでは、クリックするとコンテンツが表示される動きをするプログラムが解説されています。
JavaScriptよりも、ぐっと短いプログラムのコードで動くことがわかります。

また、ウェブページで利用頻度の多い動きをするプログラムがいろいろと発表されています。
(しかもフリープログラムなのが驚きです。)
 

【jQueryでオススメのドロワーメニュープラグイン一覧 – Snaplog】
https://blog.mismithportfolio.com/web/jq-drawer-plugin

【画像を遅延読み込みできるjQuery Lazy Loadの仕組み・動作 – 後悔日誌】
http://www.viaggiolog.com/entry/lazyload-behavior

【jqueryを使った360度パノラマビューの実装】
http://www.systemexpress.co.jp/htmlcss/panorama.html

など、あげていけばきりがありません。
「あのサイトでみた動きを自分も使ってみたい」と思えば、大抵探しあてられます。

JavaScriptだけでは実現しない、プログラム導入の手軽さをサポートしてくれるのがjQueryと言えますね。

…ということで、今回はここまで。おすすめしたい関連講座は↓です。
jQueryを用いたプログラムの導入方法を知りたい方は、ぜひ。

【プログラマーでない人のための jQuery入門《ウェブUIへ手軽にアクションを!》 】
https://www.sansokan.jp/events/eve_detail.san?H_A_NO=23357

ではまた、次回お会いしましょう。
r360studio 森 和恵 (^^)

【Twitterにて情報配信中】 https://twitter.com/r360studio
【 担当講座一覧 】  http://r360studio.com/seminar/
【 iMedioコラムバックナンバー 】 http://www.imedio.or.jp/column_tax/column_mori

講師 森コラム
2017年05月14日

Web業界で、気になるアレコレ /Vol.64「 いまさら聞けない、ウェブコーデイング(3)  “CSSボックスモデルの仕組み”」

こんにちは。 iMedioセミナー講師の森 和恵です。
5月も後半。GW休みもすっかり遠のき、普段の生活が戻ってましたね。

前回のコラムでお伝えした、GWおまけ動画はいかがでしたか?
GW中に5日連続で動画を撮影し、ウェブ制作を学ぶ記事を公開しています。
たいへん好評で、閲覧期間を延長しました。まだ見れますので、ぜひ。
http://r360studio.com/blog/adobe/dreamweaver/473

さて。今回は《いまさら聞けない、ウェブコーデイング》の第3回。
テーマは“CSSボックスモデルの仕組み”です。

ボックス(Box)とは、HTMLタグ(要素)に囲まれた領域を指します。
モデル(Model)は、ボックスに指定ができる属性を指します。
https://developer.mozilla.org/ja/docs/Web/CSS/box_model

属性には、“width”(幅) “height”(高さ)に加え、“margin”(外側の余白) “padding”(内側の余白) “border”(線)プロパティがあります。ボックスにこれらの属性を指定することで、ウェブページのレイアウトを作っていきます。

“margin”(外側の余白) “padding”(内側の余白)の違いですが、ボックスの背景に色(background-color)をつけ、背景色が塗られた部分に空いた余白が “padding”で、外側にできた余白が“margin”です。

背景色を指定せず、透明のままであれば、余白をどちらでとってもかまいませんが、“margin”には、マージンの相殺やマイナスマージンなどの特例ルールがいくつか存在し、思ったように設定できない場合もあるので注意が必要です。

ボックスモデルにおいて誤解を受けやすいのが、ボックス全体の幅計算です。

“margin”・ “padding”・ “border”を指定は、加算式で考える必要があります。例えば、“width”に100px、“padding-left”に50pxを指定した場合のボックス全体幅は、150pxです。

ついつい、加算するのを忘れて幅の計算が合わなくて、レイアウトがうまく進まないというケースをよくみかけます。CSS3のバージョンになってから、「box-sizing:border-box」を指定しすると、“padding”・ “border”を“width”に含めるという指定ができるようにもなっています。

…ということで、今回はここまで。おすすめしたい関連講座は↓です。
ウェブページのレイアウトの基礎をしっかり学びたい方は、ぜひ。

【 CSSを使いこなす、Webページレイアウト実践 】
https://www.sansokan.jp/events/eve_detail.san?H_A_NO=23227

ではまた、次回お会いしましょう。
r360studio 森 和恵 (^^)

【Twitterにて情報配信中】https://twitter.com/r360studio
【 担当講座一覧 】http://r360studio.com/seminar/
【 iMedioコラムバックナンバー 】 http://www.imedio.or.jp/column_tax/column_mori

講師 森コラム
2017年05月02日

Web業界で、気になるアレコレ /Vol.63
 「 いまさら聞けない、ウェブコーデイング(2)
 “ページレイアウトの仕組み”」

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Web業界で、気になるアレコレ /Vol.63
「 いまさら聞けない、ウェブコーデイング(2)
  “ページレイアウトの仕組み”」
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
こんにちは。 iMedioセミナー講師の森 和恵です。
今日は、GW真っ只中ですね。いかがお過ごしですか?
わたしといえは、仕事と部屋の掃除をする過ごし方になりそうです。

お休みの真っ最中に、読んでくれたあなたにプレゼント。
< https://twitter.com/r360studio >
にて、GW中だけ閲覧できる特別動画の配信を本日お知らせします。
内容は、5・6月の講座から“ちょっとだけ新しいことが学べる”動画を予定してます。
5月10日には、見れなくなってしまうので、閲覧はお早めに。

さてさて。今回は《いまさら聞けない、ウェブコーデイング》の第2回をお届けします。
テーマは“ページレイアウトの仕組み”です。

ウェブページは、HTMLとCSSの組み合わせでできています。

ページレイアウトには枠組みが必要ですが、HTMLを使います。枠にはいろんな要素が使えますが、よく目にするのはdiv要素です。要素に後からデザインを定義するCSSの名前、クラス名を指定します。

<div class="boxstyle">・・・</div>
と書けば、div要素に“boxstyle”というクラス名を指定したことになります。

次は、デザインの定義です。デザイン定義には、CSSを使います。CSSにもいろんな種類がありますが、レイアウトでよく使われるのは、クラスという種類です。クラスセレクターと呼びます。

先のHTMLのdiv要素に指定した“boxstyle”というクラス名を使って、「幅300px、内余白1文字分、画面の中央に配置、背景色を黄色」するレイアウト枠を指定しましょう。

.boxstyle{ width:300px; padding:1em; margin:auto; background-color: yellow; }
と書きます。

この2つのコードをウェブページの適切な場所に記載することで、ページのレイアウト枠が作成されます。
実際に組み込んだサンプルページを下記にアップしています。
< http://r360studio.com/imedio/colum2.html >

このサンプルページを元に、HTMLやCSSを使って、いろいろと試してみてください。
ウェブページレイアウトの基本的な作り方が見えてくると思います。

…ということで、今回はここまで。おすすめしたい関連講座は↓です。

【 出直し再勉強! HTML&CSS読解入門 】
< https://www.sansokan.jp/events/eve_detail.san?H_A_NO=23203 >
※まずはこちらで、ソースコードの基本が学べます。

【 CSSを使いこなす、Webページレイアウト実践 】
< https://www.sansokan.jp/events/eve_detail.san?H_A_NO=23227 >
※ページを自力で作れれば、「今日中に告知ページを作らないと」にも対応できるかも?


ではまた、次回お会いしましょう。
r360studio 森 和恵 (^^)

【Twitterにて情報配信中】< https://twitter.com/r360studio >
【 担当講座一覧 】< http://r360studio.com/seminar/ >
【 iMedioコラムバックナンバー 】< http://www.imedio.or.jp/column_tax/column_mori >

 

講師 森コラム
2017年04月19日

いまさら聞けない、ウェブコーデイング(1)
“先頭入るあのお決まりのコードの役割は?”

こんにちは。 iMedioセミナー講師の森 和恵です。

担当講座が4月14日から始まりまして、6月までの日程が公開されています。
http://r360studio.com/seminar/

はじまりは、入門・初級の講座から。
『今年こそ、スキルを磨いて新しいことをスタートするぞ!』
と狙っている方は、新年度のタイミングでぜひ。
 

さてさて。今年から、コラムに連載方式を取り入れます。
いつも欠かさず読んでくださっている方のためになるネタをお届けしますね。
継続は力なりといいますし。5分で読めますので、ぜひ。
 

今回は《いまさら聞けない、ウェブコーデイング》の第1回をお届けします。
テーマは“先頭入るあのお決まりのコードの役割は?”です。
 

ウェブページの先頭をみると大抵こう書いてあります。
<!doctype html>

これは、DOCTYPE宣言と呼ばれるコードで、ウェブページ(HTMLファイル)の先頭に忘れずに書く必要のある大事なものです。

そのページが「どのバージョンのどんな種類のHTML言語を使っているか?」を示すものです。
…ものでした、と過去形で言った方がいいかもしれません。

昔、HTMLのバージョンが4の時には、こう書いたりしてました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

これは、HTMLバージョン4で過渡的(Transitional)に書いているという意味です。過渡的とは、「古いバージョンから新しいバージョンへ移行している途中だから、新旧混ぜて書いても許してね」ということです。

昔はこのように、DOCTYPE宣言を使って、使用されているコードについて詳細を示していたのですが、いまのHTML5にバージョンアップしてから、「コードが冗長になるので、詳細書くのを止めときましょう」と方針が変わりました。

結果、DOCTYPE宣言のコードだけが短くなって残り続けているのです。
しかし、『それだったら、いらないよね☆』とDOCTYPE宣言を消してはいけません。

DOCTYPE宣言を書かないと、ブラウザの表示機能が「互換モード」となってしまい、正しくコードを認識できずにレイアウトが崩れる場合もあります。

また、よく「タグは大文字、小文字どちらで書けばいいですか?」と質問がありますが、どちらで記述してもOKです。

…ということで、今回はここまで。おすすめしたい関連講座は↓です。

【 出直し再勉強! HTML&CSS読解入門 】
https://www.sansokan.jp/events/eve_detail.san?H_A_NO=23203
※『そういえば、タグってちゃんと勉強したことなかった…』という方にも。
実践ですぐ使えるタグとスタイルシートの基本文法をおさえます。

【 CSSを使いこなす、Webページレイアウト実践 】
https://www.sansokan.jp/events/eve_detail.san?H_A_NO=23227
※『ウェブページ、自分で一から作ってみたいな』という方に。


ではまた、次回お会いしましょう。
r360studio 森 和恵 (^^)

<追伸>
CSS Nite LP51「Reboot Dreamweaver」大阪版に登壇します。
あと少しだけ、お席があるそうです。
http://cssnite.jp/osaka/vol43/


【Twitterにて情報配信中】< https://twitter.com/r360studio >
【 担当講座一覧 】< http://r360studio.com/seminar/ >
【 iMedioコラムバックナンバー 】< http://www.imedio.or.jp/column_tax/column_mori >

講師 森コラム
2017年04月05日

Dreamweaver のススメ~コードが苦手な方に~

こんにちは。 iMedioセミナー講師の森 和恵です。

先日、東京で開催されたDreamweaver20周年のイベントに参加してきました。
300名近くの方が集まって「Dreamweaver大好き!」という時間が過ごせてとても幸せでした。
↓のtogetterツイートまとめで当日の空気感を味わえます。
https://togetter.com/li/1089306

私は「忘れがち、実は使えていない Dreamweaverの便利機能」というセッションを担当しました。

いろいろな機能を紹介したのですが、感想をたくさん頂いたのが
「CSSデザイナーパネル+DOMパネル」の組み合わせでコーディングをする方法でした。

ウェブページを作るために、HTMLやCSSの基礎は身につける必要がありますが、
ぱっと見て英文のようなソースコードを見ながら、デザインを進めるのは気持ちがしんどくなりますよね。

ブラウザで見ている、完成のようすを見ながら作業を進めたいと思うのが自然です。
(もちろん、コーディングのプロの方々は、厭わないことだと思います。)

Dreamweaverは、そこのところを解決してくれるツールです。

セッションをご覧になって、
「こんな便利な使い方あったんですね」「どうしてもコードが苦手なのですが、少しやる気がでました」
…などなど、共感してくれた方が多かったので、お話してよかったなと思います。

当日の内容と同じではないですが、最近いくつかYouTubeチャンネルに動画をあげました。
ご参考までにシェアしておきますね。


◎Dreamweaver CC2017 機能紹介 ~コンテンツの追加とCSSデザイナーパネル~

◎Dreamweaver CC2017 機能紹介 ~CSSデザイナーパネルを使って、flexboxレイアウト~

◎Dreamweaver CC2017 機能紹介 ~Wordやイラレデータを使って効率よくページを作る~


…ということで、今回おすすめしたい講座は↓です。

【Dreamweaver入門 〜はじめよう!Web制作〜《最新版 CC 2017》】
https://www.sansokan.jp/events/eve_detail.san?H_A_NO=23202

特にHTMLやCSSのコードを見るのが苦手、という方に便利なツールとして紹介しています。

ではまた、次回お会いしましょう。
r360studio 森 和恵 (^^)

<追伸>
CSS Nite LP51「Reboot Dreamweaver」大阪版も、好評受付中です。
冒頭で紹介したイベントに、実際に参加してみませんか?
http://cssnite.jp/osaka/vol43/


【Twitterにて情報配信中】( https://twitter.com/r360studio
【 担当講座一覧 】( http://r360studio.com/seminar/
【 iMedioコラムバックナンバー 】( http://www.imedio.or.jp/column_tax/column_mori

講師 森コラム
2017年03月29日

新年度です。今年こそ習得したいことはありますか?

こんにちは! iMedioセミナー講師の森 和恵です。
今回は、新年度講座のお知らせのため、号外メルマガを配信する
ということで、番外編のメルマガを書いています。

#いつもは「ちょっと気の利いたWeb系の情報とオススメ講座紹介」という
テーマでコラムを書いています。
http://www.imedio.or.jp/column_tax/column_mori

3月も下旬にさしかかり、そろそろ春めいて来ましたね。
先日テレビをみていると東京で桜が開花したそうです。
昨年と同じく1週間ほど早いそうですよ。
https://tenki.jp/sakura/

そして、iMedioでは、毎年恒例の春の無料セミナーの開催が告知されています。
楽しみにしていただいている方も多いのではないでしょうか?
ありがとうございます。

【春の無料セミナー】PhotoshopとIllustratorではじめる『ウェブと紙のデザイン』
この春の無料セミナーは、
【PhotoshopとIllustratorではじめる『ウェブと紙のデザイン』】です。
https://www.sansokan.jp/events/eve_detail.san?H_A_NO=23206

今年は、広告を作る作業工程をまるっとみなさんにお見せする予定です。

いつもは、便利な機能や使い方など『学ぶ』ことをテーマにしていましたが、
今年は一歩進んで『わくわく』を加えてみました。

広告とはいえ、自分の手で作品が作られていくのは楽しいものです。
これから作り方を学ぶ方にも、そのワクワクとした楽しさを
お伝えできればと思います。

● 制作の学びについて思うこと

ウェブやDTPなど、制作のプロの現場をめざしている方、
自社の広報担当で本業ではないけれどウェブやちらしを作る
必要のある方に、さまざまなセミナーを実施してきました。

その中でよく「何を勉強しておいたらいいでしょうか?」と、
ご質問いただきます。

わたし自身は、ウェブの制作に携わるようになってほぼ20年になり、
時代の変化と共に、その時々で作るために必要な知識を詰め込んで
進んできました。

技術には、流行すたりがありますので、勉強して知識を得たものの、
残念ながら使わなくなったことはたくさんあります。

しかし、これから学びたい方は、自分に必要なものを選択し、
先人が進んできた最短コースを歩むこともできるのです。
うらやましいかぎりです。

「まずは、自分が何をしたいのか・作りたいのか?」を想像する
ところから始めると、それを実現するためにどんな知識が必要かが
見えてくるように思います。

そのためには、いろんなものを広く・浅くみて、
「世の中にはこういうものやサービスがあるんだな」という
見聞を広げておく必要もありますね。


● 今年勉強しておきたいことは、ありますか?

最近のウェブ制作の現場は、作業が細分化されてきていて、
自分の担当する部分の知識しか持たないという方も増えてきました。
その結果、問題になってきたのが、チーム間の連携の甘さです。
お互いの仕事内容を理解していないために、作業の引き継ぎがうまく
いかないことがだんだんと明るみにでてきました。

制作現場でも、その状況を改善するために、デザイナーがコードを
ある程度理解したり、エンジニアがデザインに理解を深めたりする
ケースが増えてきています。チームで仕事をするために、自分の
専門分野以外の知識も学びだしているようです。

年度の初めということもあり、ここで一度思い描いて欲しいのが
「今年、勉強しておきたい」ことです。年度の目標という感じですね。

わたしは、毎年「今年はコレ」と決めて、習得するように努めています。
去年は、Illustratorのマニアックな機能とJimdoサービスの深い部分を
学ぶことでした。今年も決めていますが、いまはまだ秘密です
(習得したら、またお伝えしますね)。

さて。あなたにとって、今年学びたいことはありますか?
何もないなという方は、まわりを見わたしてみてください。
踏み込んだことがないけど興味を引くことが、きっと見つかると思います。

・・・ということで、今回はここまで。
号外には、技術的なことを触れないコラムをお届けしているのですが、
ちょっと雰囲気の変わったコラム、いかがでしたでしょうか?

ではまた、来年度もiMedioメルマガでお会いしましょう。

r360studio 森 和恵 (^^)

【Twitterにて情報配信中】( https://twitter.com/r360studio
【 担当講座一覧 】( http://r360studio.com/seminar/
【Dreamweaverのイベント大阪版に登壇】( http://cssnite.jp/osaka/vol43/

講師 森コラム
2017年03月15日

来年度も、よろしくお願いします&4月以降の講座

こんにちは。 iMedioセミナー講師の森 和恵です。
年度末が近づき、超バタバタした日々を過ごしております。
3月ですが、師走(先生が走る)ですね。(^_^;)
 
さて。本年度よりも、よりよい結果がだせるように
精進しますので、引き続きよろしくお願いいたします。
 
さてさて。来年度は何をしましょうか…
 
と、感慨ふける暇もなく、4月からのスケジュールが決定しました。
 
「これから始めるWebプログラム」(4/14・聴講)
「Dreamweaver入門」(4/21・PC実習)
「HTML&CSS読解入門」(5/12・PC実習)と、これまでの人気講座の再演からスタートです。
 
最後に“デザイン”にひっかけて、おすすめサイトと本を紹介しますね。
読めば、デザイン力向上になること間違いなしです。
(少なくとも、私がそうでした)

▼広告デザインを読む – Advertising Design Center
http://designcenter.tokyo/
※プロが作った広告を解説しています。

▼これでもう悩まない!2017年のデザイントレンド完全ガイド
http://photoshopvip.net/98490
※今年の流行は、セミフラット・デザインだそうです。

▼伝わるデザインの基本 増補改訂版 よい資料を作るためのレイアウトのルール 
https://www.amazon.co.jp/dp/4774183210/

▼なるほどデザイン〈目で見て楽しむ新しいデザインの本。
https://www.amazon.co.jp/dp/4844365177/


ではまた、来年度お会いしましょう。
r360studio 森 和恵 (^^)

<追伸>
Dreamweaver 20周年の記念にちなんで書いているブログも、その3が公開されました。
おなじみのソフトとのデータ連係について触れています。便利ですよ。
《Dreamweaver 再び(3)〜Wordやイラレデータを使って効率よくページを作る〜》
http://bn.dgcr.com/archives/20170307140200.html


【Twitterにて情報配信中】( https://twitter.com/r360studio
【 担当講座一覧 】( http://r360studio.com/seminar/
【 iMedioコラムバックナンバー 】( http://www.imedio.or.jp/column_tax/column_mori

講師 森コラム
2017年02月27日

今年の年度最終講座は、Jimdoデザインカスタマイズで決まり

こんにちは。 iMedioセミナー講師の森 和恵です。

先日、iMedioさんへの差し入れにお菓子を手作りしました。
久しぶりでしたが楽しかったです。
日頃デジタルばかりですが、アナログ作業もいいですね。
(※くわしくは、コラム最後の「今回のひとこと」からどうぞ。)

さてさて。今年度のiMedioセミナーの担当も、
あと残すところひとつとなりました。

《独自レイアウトに挑戦!Jimdoデザインカスタマイズ基礎 》(3/17開催)です。
https://www.sansokan.jp/events/eve_detail.san?H_A_NO=22758
★カスタマイズをしている様子が、動画でご覧いただけます。↓

Jimdoについては、これまでのコラムで何度かとりあげましたが、ユーザー
の声を反映しつつ、スマートなWebサイト管理ツールに変化しています。

今回のJimdoデザインカスタマイズ講座では、HTMLやCSSの
基礎知識を持っていて、普通にページが作るチカラのある方が、
導入が簡単なJimdoを使って、『自分のオリジナルのデザインで、
Jimdoのテーマを組む』ことを学びます。

公式サイトの↓で、Jimdoの独自テーマの作成方法が説明されています。
https://jp-help.jimdo.com/design/originallayout/

自分で作ったページに、
Jimdoの独自コードを埋め込むことでテーマを作ります。

例えば、Jimdoの6つのエリアで「記事を表示する」
メインコンテンツエリアを表示したいなら、
“<var>content</var>”と書けばOKです。

あとは、独自コードで生成されるHTMLコードを理解し、自分のオリジナルの
デザインをCSSを用いてのせていきながら、テーマを作ります。

もう一つの機能が『ヘッダー編集』という機能です。
https://jp-help.jimdo.com/edit-head/

これは、全ページのヘッダーに共通でコードを埋め込む機能です。
<script><style><meta><base><link>などの要素を使うことができるので、
JavaScriptやCSSを埋め込んだりするのに用います。

WordPressなどの高機能なCMSと比較すると、機能は限定されるものの、
比較的簡単にテーマを組むことができます。

これが、無料のライセンスの範疇でできてしまうというのは、
Jimdoは本当に使い勝手のいいツールだなと思います。

HTMLやCSSは使ったことがあるけれど、CMSは敷居が高くて利用したことがない方は、
一度Jimdoを使ってCMSにチャレンジしてみてください。

ではまた、次回お会いしましょう。
r360studio 森 和恵 (^^)

<追伸>
Dreamweaver 20周年の記念にちなんで書いているブログも、その2が公開されました。
今回も動画で機能紹介をしていますので、こちらも合わせてぜひ。
《Dreamweaver 再び(2)~CSSデザイナーパネルを使って、flexboxレイアウト~》
http://bn.dgcr.com/archives/20170220140100.html


【Twitterにて情報配信中】( https://twitter.com/r360studio
【 担当講座一覧 】( http://r360studio.com/seminar/
【 iMedioコラムバックナンバー 】( http://www.imedio.or.jp/column_tax/column_mori
【今回のひとこと】( https://r360studio.goat.me/5OVsFLPs

講師 森コラム
2017年02月15日

“受講に必要な条件” を準備するには

こんにちは。 iMedioセミナー講師の森 和恵です。

2月に入ってすぐ節分。豆や太巻きを食べたりすれば、お正月気分もすっかり抜けますね。
季節の節目の行事は、大切にしていきたいですね。
(※くわしくは、コラム最後の「今回のひとこと」からどうぞ。)

さてさて。今回は、講座の募集要項にある“受講に必要な条件”について話をします。

これは、受講前に必要な「前提知識」のことを指します。
iMedio講座は、通年で通う学校と違い、1日で終わる単発セミナーが多いために必要なこととなります。

本当は、1から10まですべてお話したい!…けれど、時間には残念ながら制約が設けられています。
そのためのスタートラインを合わせるものです。

わたしが担当する講座の“受講に必要な条件”によく書いてあるのが、
《Web制作経験者でHTMLとCSS2のソースコードをある程度理解できていること》です。
「これは、HTMLとCSSを使って、Webページを作ったことがあるよね?」ということになります。

これをカバーするために、定期的に講座↓を開講しています。

《HTML&CSS 基本文法からレイアウトまで 超入門 》
https://www.sansokan.jp/events/eve_detail.san?H_A_NO=22291
●HTMLやCSSをしっかりマスター。開催は、明日&明後日!

これからWebを運営していくのなら、知っておいて損のない講座です。

例えば、WordPressなどでページを作っていて、こんな困ったこと↓ありませんか?
http://r360studio.com/imedio/img/imediomm20170215a.png

太字に続いて「あああ」という文字を入力したら、そこも太字になっちゃった!
という、あるあるなNG操作です。実はコレ、このままではどうしようもありません。

でも、HTMLがわかっていれば、直すこと↓ができます。

[テキスト]タブをクリックし、ソースコード表示に切り替えて…
http://r360studio.com/imedio/img/imediomm20170215b.png

太字にしたくない部分を</strong>の後ろに移動します。
http://r360studio.com/imedio/img/imediomm20170215c.png

Web制作では、CMSソフトを使っていても、ありとあらゆるところで
HTMLやCSSが登場するんです。知っているのと知らないのとでは、違いがでます。

もう一つ、例をあげてみましょうか。

私が運営するブログでは、WordPressのデフォルトテーマをそのまま使っています。
変えようと思いつつ、なかなかまとまった時間が取れなくて…。
少なくても、ページ下部にある「WordPress」の表記とリンク↓を外したいなと思ってます。
http://r360studio.com/imedio/img/imediomm20170215d.png

これもWordPressのデザインカスタマイズの知識とPHPの知識があれば、
「どこを変えたらいいのか?」は、比較的簡単につきとめられます。

WordPressの管理画面から、[外観]-[テーマの編集]メニューより、
フッター(footer.pnp)を開き、↓の部分を削除します。
http://r360studio.com/imedio/img/imediomm20170215e.png

<?php … ?> で囲まれている部分は、PHP言語で書かれたプログラムです。
ちょうど削除したこの部分は、「Proudly powered by WordPress」と画面に表示し、
WordPressの命令文esc_urlで、ブログのトップページへのリンクを指定しています。

PHPとWordPress関数の知識を使って、読み解いています。

こちらは、WordPressのデザインを変更するテーマを自作したいという方に必要な知識ですね。

…ということで、今回ご紹介するのは↓の講座です。

3月は、2つのCMSの“デザインカスタマイズ”講座をがっちり開催します。
どちらも、HTMLとCSSを知っていることが前提条件です。

《WordPress カスタマイズ基礎》
 https://www.sansokan.jp/events/eve_detail.san?H_A_NO=22757

《独自レイアウトに挑戦!Jimdoデザインカスタマイズ基礎 》
https://www.sansokan.jp/events/eve_detail.san?H_A_NO=22758

最後に、こちら。
お待たせしました、関西の方にお知らせです。
Dreamweaver 20周年の記念イベント、5月13日に大阪で開催されることになりました!
イベントに先だって書いたコラム↓で書いてます。

《Dreamweaver 再び(1)~コンテンツの追加とCSSデザイナーパネル~》
http://bn.dgcr.com/archives/20170206140100.html
※Dreamweaverの便利な機能を紹介した動画もありますよ。

ではまた、次回お会いしましょう。
r360studio 森 和恵 (^^)

【Twitterにて情報配信中】( https://twitter.com/r360studio
【 担当講座一覧 】( http://r360studio.com/seminar/
【 iMedioコラムバックナンバー 】( http://www.imedio.or.jp/column_tax/column_mori
【今回のひとこと】( https://r360studio.goat.me/5MslNoye

open