HTML/CSS::Cyta.jp http://cyta.jp Cyta.jpのHTML/CSSの講師がブログを通じて、HTML/CSS情報を発信! ホームページを作るには? http://cyta.jp/htmlcss/b/92081 <br>ホームページっを作るには、いくつかの方法があります。 コーディングという技術を使う HTML,CSSという言語を使ってページを作ります。 webサイト制作サービスを使う STUDIO,WIX,ペライチなどのサービスを使って作ります。 CMSを使って作る。 WordPressなどを使ってページを作ります。 いずれの方法もメリット/デメリットがありますので、 状況に応じた方法を知っておくと良いです。 HTML/CSS Fri, 09 Aug 2019 22:18:57 +0900 HTML/CSS入門講座::わかりやすいHTML&CSS入門講座 塩谷 康弘 Adobe DreamWeaverに関する近況「3」導入するメリット http://cyta.jp/htmlcss/b/91796 <img src="http://cyta.jp/p/image/card/2019/7/27/54259/120.jpg" alt="" /><br>Adobe DreamWeaver「以下DW」とは、アドビが提供する「ホームページ作成「支援」ソフト」です。 前々回のブログではDWは業界標準で非常に便利なソフトだと褒め殺しました(苦笑) 前回のブログでは、致命的バグが多すぎてこき下ろしました(苦笑) ということで、今回はもう一度DWを持ち上げたいと思います(苦笑) コーディングに適したエディタはフリーでも結構ありますが、 DWが業界標準であるその所以と最大のメリットをご紹介しておきます。 ===================================== 【DWを使うべき理由とメリット(デザインビュー関連)】 ===================================== 最近のVerは「ライブビュー」もありますが、直接ブラウザーで確認しているのと同じでかつ重くなるというのもありあまり使ってはおりませんが、「デザインビュー」は未だに使います。 -------------------------------------------------- 1)DWを最大限に使いこなす「デザインビュー(1)ソースの選択」 -------------------------------------------------- もしかしてデザインビューは「ただの簡易プレビュー」だと思っていませんか? 特に初心者において、初歩的なHTMLを確認するのにも、このデザインビューは真価を発揮します。 デザインビューで任意の箇所を選択すると「HTMLソースの箇所も同時に選択」されます。 あたり前のようですが、長々と書き綴られたHTMLソースでタグ要素を確認するよりデザインで視覚的に選択した方が早いのはあたりまえですからね。 -------------------------------------------------- 2)DWを最大限に使いこなす「デザインビュー(2)テーブルタグの編集」 -------------------------------------------------- もしかして「コルスパン」って何?で感じでしょうか? 簡単なテーブル(表)を作るのは、どのソフトでもできますが、デザインビューのみでほぼ完全な形で編集、修正ができるHTMLエディタはDWしかないのではないかと思います。 今ではさほど恩恵を感じられないかと思いますが、テーブルレイアウト時代、DWはまさに神がかり的な存在だったのです。 以前のブログで、DWを使った方が涙を流した機能の一つが、まさにこの機能です(笑 -------------------------------------------------- 3)DWを最大限に使いこなす「デザインビュー(3)ポジジョンの視覚的配置」 -------------------------------------------------- もしかしてCSSポジジョンで要素を配置するのに、いきなり数値のみで配置していますか? 一番上、一番右、一番下、一番左なら、それもいいでしょう。 でも、そう端だけでは上手い具合いかない場合もあるでしょう。そんな時はまずはざっくりDWのデザインビューで要素を配置したい場所にドラッグしてみましょう。 最終的な微調整は数値の世界になりますが、Photoshop内でイメージを移動するような感覚でポジジョン要素を配置できるのです。(ただブラウザー確認とは微妙に位置が違いますが、笑) -------------------------------------------------- 4)DWを最大限に使いこなす「デザインビュー(4)クリッカブルマップ」 -------------------------------------------------- もしかしてクリッカブルマップって何? って感じですかね? (笑 これは画像内の任意の範囲でリンクを貼る機能です。レスポンシブデザインがスタンダードの現代でも、JSを併用することにより使い方によっては効果的な場合も多々有ります。 DWのクリッカブルマップはデザインビューですべて完結するようにできています。つまり「座標」をいちいち調べなくも、画像のリンク貼りたい場所の範囲を決めれば、それがリンク範囲として自動的にクリッカブルマップとしてタグが生成されるのです。 このDW機能無しでクリッカブルマップの範囲を生成しようとするとたいへんなことになります。 Photoshopで「情報ウィンドウ」を駆使して、X、Yの座標の左上、右下の2軸調べないといけないのです(笑 矩形は2軸ですみます。円形は4軸必要で、多角形になると、もはや無限大となります・・・w 以前のブログで、DWを使った方が涙を流した機能の二つめが、この機能でした(笑 -------------------------------------------------- このようにDWにおけるサイト制作には多くのメリットがありますので、 ご興味がありましたら、ぜひ一緒に体感してみましょう^^ 導入するメリットはまだまだありますが、 長くなりそうなので次回に続きます♪ HTML/CSS Sat, 27 Jul 2019 02:39:05 +0900 HTML/CSS入門講座::WEBデザイン HTML・CSS実践講座 真夜 Adobe DreamWeaverに関する近況「2」バグが多すぎ・・・!? http://cyta.jp/htmlcss/b/91656 <img src="http://cyta.jp/p/image/card/2019/7/20/54181/120.jpg" alt="" /><br>Adobe DreamWeaver「以下DW」とは、アドビが提供する「ホームページ作成「支援」ソフト」です。 前回のブログで、非常に便利なソフトだと褒め殺しましたが(苦笑、それは今回の致命的バグに対しての反動とも言えますw 去年までCC 2015を使っていて、それまで対して大きなバグも無く気にもしていなかったのですが、 週2〜3回講義しているクリエイター系専門学校の環境に合わせて、CC2019にしたところ、授業に支障をきたすほどのとんでもないバグだらけで、非常に困っているのです。 <以下、致命的バグのご紹介>  1)いきなりコピー&ペーストがのショートカットが効かなくなる。  2)カラー番号を入力(例#CC66FF)すると、いきなり落ちる。  3)プロパティからターゲットリンクを使用すると、いきなり落ちる。  4)クイック編集がいつの間にか効かなくなる。落ちる前兆。  5)その他細かなバグ多数・・・ 上記の現象は、スクールのWEBクラス全員のマシンでこのバグが発生します。 特に(1)(2)がすごいです。ものすごい発生率です。 たとえばこんな感じです・・・ 「それではみなさん、ここの<header>のbackground-colorは、#66ccffですよ〜♪」 とか言いながらw、最後のセミコロン(;)を入力した途端、クラス全員の「DreamWeaver」が、 「スパーン!」っといった音があたかも聞こえたかのように(音も無く)、いきなり全員落ちます。 いや、落ちるというか消えたいっても過言ではないぐらいの勢いで落ちるのです。 それ以来、DWで色番号の入力はさせない方向に・・・という、苦渋の選択を強いられることに (講師もたいへんですよね、苦笑) じゃ見本から色番号コピーしようにもショートカット効かないとか・・・(苦笑 もうアドビにはクレームつけた方がいいです! 昔からバグが多いソフトでしたが、CC2019は極め付けでした。 便利なソフトだけに、今後のアップデートで修正されることを願っています。 そんなわけで代替えソフトの紹介をしたいと思います。 <DreamWeaverの代替えソフト / 無料>  [Atom] https://atom.io  [Aptana] http://www.aptana.com  [Brackets] http://brackets.io これについてはまた別の機会でご紹介します。 いずれもDWに勝るとも劣らないソフトです。 ただWEB作成支援ソフトには極力依存しないように、HTML/CSSの手打ちレッスンではごく普通のテキストエディタから始めたいところです。 気になる方は、DreamWeaveのバグを一緒に体験しましょう!?w HTML/CSS Sat, 20 Jul 2019 00:06:27 +0900 HTML/CSS入門講座::WEBデザイン HTML・CSS実践講座 真夜 Adobe DreamWeaverに関する近況「1」手打ちのすすめ http://cyta.jp/htmlcss/b/91412 <img src="http://cyta.jp/p/image/card/2019/7/7/54017/120.jpg" alt="" /><br>Adobe DreamWeaver「以下DW」とは、アドビが提供する「ホームページ作成「支援」ソフト」です。 業界標準となっており、特に事情がなければ、コレをつかってWEB作業をするクリエイターが多いのではないでしょうか。 現にわたしもコレ使ってます(苦笑・・・て笑うところではないがw) 非常に便利な機能が盛り沢山で、HTML等を手打ちできる能力があればあるほど、真価を発揮できるソフトといえるでしょう。 逆に言えば、HTML/CSSの「手打ち」ができないと、いまいち便利さを感じないということになってしまうわけです。 実際のところ、スクールの講義などでは一般的に数回程度のHTMLをテキストエディタで打つ授業を得て、すぐDWの操作のステップに入ってしまうことが多いためか、DWに感動してくれる方があまりいないのです。 なので、わたしはDWを使用する初回の授業で必ずこの台詞を言います。 「非常に残念ですがDreamWeaverを使うことになってしまいました、純粋にテキストエディタだけで授業を進められるなら、そうしたいのですが・・・大人の事情で・・・以下省略w」 要は、テキストエディタで手打ちの経験があればあるほど、DWの恩恵を感じられるということです。 これまで私の知り合いのコテコテの手打ちプログラマー系のオジさんは、はじめてのDWでサイト制作の学習をするときに、感動して涙を流しておられました・・・(ほぼ実話) どれだけ手打ちで人生送ってきたんでしょうかw そういうことで、アドビのDreamWeaver・・・で感動したい方は、テキストエディタで思いっきり手打ちの練習をお勧めします! 一緒に練習しましょう^^! HTML/CSS Sun, 07 Jul 2019 17:24:07 +0900 HTML/CSS入門講座::WEBデザイン HTML・CSS実践講座 真夜 コーディングって何から始めればいいの? http://cyta.jp/htmlcss/b/91351 <br>お疲れ様です。コーチの柿崎です! 長い間、ブログを更新出来ておらず申し訳ありません。。 今後は週に一回は更新したいと考えております(ほんとにできるかな・・・) 今回は「コーディングは何から始めればいいのか」について紹介したいと思います。 コーディングってどのようなイメージをお持ちでしょうか? 「難しい」、「黙々とタイピング」、「理数系の人が向いている」 といった様々なイメージをお持ちかもしれませんね! しかし、コーディングは 簡単で・誰でも・気軽に 出来るものだと私は思っております!! その理由として、未経験の方が約三ヶ月で立派に コーダーとして活躍している姿を目の当たりにしているからです。 そこで今回は、これからコーディングを勉強したいという方に まず何から始めればいいのか。 これについて紹介したいと思います。 1、環境を準備する 環境を準備といっても、そんな大変なことはありません。 自分の好きなテキストエディタを準備するだけです。(最悪メモ帳でもできます。) オススメなテキストエディタは以下の二つです。 ▼無料 ・Atom ・さくらエディタ ・TeraPad ▼有料 ・Dreamweaver ・秀丸 以上になります。無料のエディタでもコーディングする上で 問題ありません。 まずはたくさん使ってみて、自分と一番相性がいいものを探しましょう。 2、HTML、CSSの文法を覚える まず、Webサイトは三つの言語から出来ております。(厳密にはその他もありますが、今回は割愛いたします) それは ・HTML(基本的な要素) ・CSS(サイトの見た目) ・JavaScript(サイトに動的な動きをつける) です。 しかし、まずはHTMLとCSSの勉強から始めましょう! その理由はJavaScriptは上記の二つよりも少し難易度が高いです。 先にHTMLとCSSを勉強してからの方が、よりJavaScriptを理解しやすくなるでしょう。 (プログラミングの基本的な概念はどの言語も共通しております。) HTMLとCSSの文法についてはネットや書籍でもたくさん勉強することは 出来ます。 以上になります。 今回は以上となります。 ご覧いただきありがとうございました!! 次回は「HTMLの絶対覚えるべき必須タグ」についてご紹介したいと思います。 HTML/CSS Thu, 04 Jul 2019 17:21:07 +0900 HTML/CSS入門講座::初心者のためのHTML・CSS入門講座 柿崎 悠希 CSS「GRID」[FLEXBOX ] 最新のCSSレイアウト手法をレッスン教材化しました! http://cyta.jp/htmlcss/b/91329 <img src="http://cyta.jp/p/image/card/2019/7/3/53971/120.jpg" alt="" /><img src="http://cyta.jp/p/image/card/2019/7/3/53972/120.jpg" alt="" /><br>クリエイター専門学校の方ので毎週2〜3回現在講義をしています! 生徒は18〜20歳が多いのもあり学習意欲や記憶力も高く?、わずか数ヶ月の授業で「HTML/CSSの上級(実践)」までスキルが達した方が多く見受けられました。 ただ、学生が社会人クリエイターとして就職するのはまだ1年以上あるので、今後WEBスタンダードになるであろう「CSS GRIDレイアウト」を授業で実施するため、数年先を見越したレイアウト手法に時間を割き、教材化する事にしました。 2019年現在「CSS GRID」はIE10、11が微妙に対応していない箇所もあり、またここ数年でFLEXBOXがやっと定着してきたという現状で、生徒はもちろんの事多くのクリエイターや企業が「「CSS GRID」を積極的に使っていない様な気がしています。 しかし、数年後のクリエイターはきっとこのCSS GRIDを使いこなしてくれていることを信じていますし、必ずWEBスタンダードになる、非常にすばらしいレイアウト手法です。 「FLEX BOX」「CSS GRID」、どちらもこれまでの「フロート、ポジション」を知っていれば知っているほど、便利で楽しいレイアウト手法ですよ! テーブルレイアウトの時代から見れば信じられない事がいとも簡単にできるのです。 興味のある方は、もっと詳しく知りたい方はぜひ体験してみてください!  ※教材で使用したサイトデザインは知人のデザイナー&フォトグラファー「オフィスカンケ」様からお借りしました。 HTML/CSS Wed, 03 Jul 2019 10:03:48 +0900 HTML/CSS入門講座::WEBデザイン HTML・CSS実践講座 真夜 とてもかんたん!?「HTML5/CSS3」を学んでみませんか? http://cyta.jp/htmlcss/b/90538 <img src="http://cyta.jp/p/image/card/2019/5/25/53418/120.jpg" alt="" /><br>サイタ様の方で講師登録が完了しましたので、ようやくスクールを開講することができました。 ということで、とてもかんたん!?「HTML5/CSS3」を学んでみませんか? 初心者、経験者問わず大歓迎です! 取り急ぎ・・・^^; HTML/CSS Sat, 25 May 2019 01:47:30 +0900 HTML/CSS入門講座::WEBデザイン HTML・CSS実践講座 真夜 はじめまして! http://cyta.jp/htmlcss/b/90338 <br>はじめまして! この度、HTML/CSSの講座を開講させていただくことになりました佐藤和幸と申します。 どうぞ、よろしくお願い致します。 今回は自己紹介です。 私は現在、個人事業主として主にIT関連のサポートとWEBサイトの構築の仕事をしています。 以前は企業に勤めており、同じような仕事をしておりました。 今回、開講するHTML/CSS講座ですが、インターネットが普及し始めた頃からの経験を交えてお伝え致します。 私は最初は趣味からホームページ作りを始めました。 初めてHTMLに触れたときはちんぷんかんぷんでしたが、パソコンに表示されたページを見てワクワクしたことを覚えています。 あなたもきっと同じように感じるはずです。 ぜひ一緒に学びませんか! HTML/CSS Thu, 16 May 2019 06:02:19 +0900 HTML/CSS入門講座::佐藤和幸のHTML・CSS入門講座 佐藤 和幸 まもなく10連休と新元号の始まり http://cyta.jp/htmlcss/b/89841 <br>皆様、こんにちは、HTML/CSS講師の赤堀です。 もうすぐ10連休が始まるのと、平成があと1週間弱で終わり、新元号「令和」が始まります。 皆さんは、新元号「令和」になって何かを始めたいと考えている方いらっしゃいますか?どんな事始めたいと思っていますか? 趣味ですか?運動ですか?勉強ですか?等々あります、そんな中、これから始められる事をご自分でホームページやWEBサイトを作成してネットに掲示しませんか? どんなことでもいいんです、ご自分でホームページやWEBサイトにしたいことを作成するだけです、もちろんお仕事で作成したいということでも問題ありません。 GW中も体験レッスンのご相談させて頂きますので、お気軽にお申込みしてください。 ご自分でしっかりと納得できるサイトやホームページができるまで、サポートさせて頂きます。 一旦、ご自分で作成できるようになると、楽しくなって次のサイトやホームページがまた違った物が出来上がりますので、しっかりと覚えて今後に活かしましょう。 HTML/CSS Thu, 25 Apr 2019 18:54:02 +0900 HTML/CSS入門講座::楽しいHTML・CSS入門講座 赤堀 広志 はじめまして! http://cyta.jp/htmlcss/b/89405 <br>皆さんはじめまして、当スクールにアクセスいただきましてありがとうございます。 皆様はご自分でホームページやWEBページを作成してみたいと思ったことはありませんか? ご自分の趣味や皆に是非!見てもらいたいことなどをご自分なりに作成してWEB上にアップしてみませんか? ホームページやWEBページを作成するのは難しいと考える方がたくさんいらっしゃるかと思います、という私も最初は難しいと思っていました。 でも、実際にやってみるとそれほど難しくはなかったというのが、私自身の感想です。 実際に自分が作成したいと思っていたホームページが出来上がってくると、「お~、すごい!」と思うようになったのとでき上がっていくにつれて楽しくなっていきました。 この機会に、ご自分で世界に一つしかないホームページを作成してみましょう。 HTML/CSS Tue, 09 Apr 2019 16:14:16 +0900 HTML/CSS入門講座::楽しいHTML・CSS入門講座 赤堀 広志 本日スクールを開校いたしました! http://cyta.jp/htmlcss/b/87197 <br>はじめまして、柿崎悠希と申します。 本日からコーディングスクールを開校いたしました! コーディングってそもそもなに‥って方も、さらにコーディングスキルを高めたい!って方もお気軽に体験コースにお申し込み頂ければと思います! 何卒、よろしくお願いいたします🤲 HTML/CSS Tue, 15 Jan 2019 22:49:14 +0900 HTML/CSS入門講座::初心者のためのHTML・CSS入門講座 柿崎 悠希 正解のやり方ってあるのか? http://cyta.jp/htmlcss/b/85941 <br>スクールでは日々多くの生徒と接しておりますと、 よく質問で、 「先生、正解のやり方(コーディング)ってどうやるんですか?」 というのがあります。 極論言いますと 「ありません」 です(笑) HTMLやCSSのコーディング、引いてプログラムの世界においては 「絶対これをやらなければいけない!」 という1本確固たるレールが敷いてあるわけではありません。 たとえば、「自分の家から新宿まで行く」という目標を達成するには ・電車(地上、地下鉄) ・バス ・車(自家用車、タクシー、レンタカー) ・徒歩 ・スキップ ・ムーンウォーク ・ヘリコプター ・または上記の手段を組み合わせる まあいろんな行き方があるわけです。 これはコーディングにおいても同じで、決まったやり方があるわけではありません。 「ブラウザーでただしく表示される」 これができていれば、それが正解です。 だからと言って、むやみやたらにやっていいってもんでもありません。 最低限守らなければならないルールはもちろんあります。 「飲む前に飲む!」 「そもさん、せっぱ!」 「こういうときにはこれ」といった、 ある程度パターン化された常套手段というのもあります。 なので基本を押さえた上で、こうしたらこういうふうに表示されるんだな というのを常に探りながら、自分の解を見つけていってください。 (逆にそういう探求が好きではない人はコーディングは向いていないかもしれません) レッスンではいろんなパターンを教えています。 教科書的に1つにこだわったやり方はしません。 私が知らないやり方を見つける人もおられ、逆に感心・勉強させてもらうことも多々あります。 自分の解をたくさん持つことで、それをさらに組み替えて他のパターンを生み出すことも可能なわけです。 HTML/CSS Tue, 27 Nov 2018 11:43:40 +0900 HTML/CSS入門講座::HTML・CSS・Wordpress講座 ツタエ ノリヒロ レッスンノートの作成 http://cyta.jp/htmlcss/b/85715 <br>当方のレッスンを受けて頂いてる生徒さんにはオリジナルのHTML+CSSの基本資料と、毎回やった内容をまとめたレッスンノートをお渡ししています。 サイタのレッスンノートはコードサンプルを掲載することはおろか、基本的な文書作成には不向きすぎて使いづらいので(笑)、こちらでEvernoteのような文書作成専用のクラウドサービスを利用してシェアしています。 以前はPDF化しておりましたが、オンラインの方がリアルタイムに編集も可能なので何かと便利なわけです。 HTML/CSS Sun, 18 Nov 2018 14:23:39 +0900 HTML/CSS入門講座::HTML・CSS・Wordpress講座 ツタエ ノリヒロ FTPソフトでサーバーにアップロード、レンタルサーバー http://cyta.jp/htmlcss/b/85120 <br>ウェブサイトを作成すると、今度は実際にサーバーにアップロードするという作業があります。 ウェブサイトを全世界に公開してみんなが見れるようにするわけですね。 レッスンに来ていただいてご希望であれば一定期間使えるサーバーをお貸し致します。 ※ドメインやアドレスは決められません。 ※実際に運用するサイトは作成できません(飽くまでテスト的に利用するのみ) またレンタルサーバーの契約からやってみたいという方もいらっしゃいますので、 ロリポップサーバーの無料お試し期間などを利用してその流れを体験していただいています。 (契約しなければ14日後に自動的に無効になります。たしかw) HTML/CSS Sat, 27 Oct 2018 09:50:37 +0900 HTML/CSS入門講座::HTML・CSS・Wordpress講座 ツタエ ノリヒロ Sass(サス)のレッスンします http://cyta.jp/htmlcss/b/84937 <br>HTML, CSSを一通りマスターしたら挑戦してみたいSass。 Sassって何? という方はいいところに来ましたw CSSをもっと楽に書きたくありませんか? そう思ったらSassです。 SassはCSSを楽に作るための言語です。 短く、効率的に書いてCSSを作っちゃおうというのがSassのコンセプト。 ●CSSを書いていくとおなじような記述増えていきませんか? -> それSassで省くことができます。 ●CSSを書いていくと1ファイルのボリュームが増えていきませんか?  スクロールするのがダルい...(;´Д`) -> それSassで短くできます。 まだまだいろんな機能が隠されているSass。 短時間でレッスンし、マスターすることができますのでご興味のある方は是非! HTML/CSS Sat, 20 Oct 2018 12:32:37 +0900 HTML/CSS入門講座::HTML・CSS・Wordpress講座 ツタエ ノリヒロ よくある巷のWordpress講座について http://cyta.jp/htmlcss/b/82968 <br>最近よく「Wordpress1日講座」というのを見かけます。 「Wordpressでサイトが1日で完成しちゃう」 「独自テンプレートを使って1日でサイト完成」 という謳い文句で講座を開いている団体さんや、個人の方を見かけます。 Wordpressの全貌や、何ができるかをざっくり知るにはとても良いと思います。 ですが、初心者の人は要注意です。 もし独自テンプレートを作りたいと思ったり、それなりのカスタマイズをマスターしたいと思ったら 「1日じゃ無理」 です(笑) 何を目標・目的とするかにもよりますが、 独自テンプレートを作り、自分好みのカスタマイズをするにはHTML,CSS,JavaScript,PHPなどの総合的なスキルが必要です。 それに加え、デザインをこだわりたいとなってくると、デザインの基礎知識やグラフィックソフトウェアを使いこなすスキルも必要になってくるわけです。 それをマスターするには数ヶ月はかかると思います。 (専門のスクールも数多くあるくらいですからね) でも既存のテンプレートをちょこちょこ直してカスタマイズする程度であれば 1日講座でも良いと思います。 コーディングやプログラムがわからなくても、Elementor(ビルダーツール、Wixのような感覚でサイト作りができるプラグイン)などを利用して、ある程度はレイアウト、デザインができてしまいます。 ページや投稿のレイアウトなどもできるグーテンベルクというエディタも次期バージョンに控えています。 もう数年したらWordpressの使い方もコロッと変わってくるんじゃないかなと思います。 普段スクールで生徒に講義しているときもそうですが、 ・カスタマイズできたり、独自テンプレを作れるようになりたいのか ・既存テンプレからちょこちょこいじる程度よいのか というところを聞いています。 どちらがいいということはありません。 結局その人に合わせて講義したほうがよいなーって思うわけです HTML/CSS Fri, 17 Aug 2018 13:11:06 +0900 HTML/CSS入門講座::HTML・CSS・Wordpress講座 ツタエ ノリヒロ レッスン開始より約2週間ほど経過しての感想 http://cyta.jp/htmlcss/b/82432 <br>先々週からこちらで講義開始いたしまして、体験レッスンの申し込みいただき大変ありがたく思います。 普段も講義(大人数)を行っているのですが、 サイタではプライベートレッスンのため、生徒さんのペースに合わせることができるので、 「ピンポイントにわからないところを教えられる」 という実感が一番あります。 市販の教科書をベースに進める場合もありますし、すでに作りたいものがあってそれに対するサポートという場合もあります。 質問のされ方も様々ですので、こちらとしても引き出しを多く持って臨もうというところもあり、いい刺激になっております。 という感想文でしたw HTML/CSS Sun, 29 Jul 2018 16:20:37 +0900 HTML/CSS入門講座::HTML・CSS・Wordpress講座 ツタエ ノリヒロ Wordpressのテーマづくり http://cyta.jp/htmlcss/b/82016 <br>猛暑が続いてる日本列島。 水分補給しつつ日々コーディングをやっております。 本日はWordpressのテーマづくりについて WordpressはHTML・CSSがわからない初心者〜プログラムをゴリゴリ書ける上級者まで様々なレベルの人が使っています。世界中の30〜40%のサイトはWordpressで作られているというデータも。 初級者がWordpressを用いてブログやホームページを作るときにやることが 「テーマ」と呼ばれるものの選定。 テーマというのは簡単にいえばサイトの見た目。デザイン。 自分のサイトの趣旨やビジネスの業態にあったテーマを選ぶことがまず最初だと思います。 テーマには無料のものから有料のものまでいろいろとあります。 一概に、無料のものは単純なことがしかできない反面、有料のものは機能が充実しており、予めいろんなことができるようになっています。 さてそんなテーマですが、もちろん自分で作ることもできます。 自分でつくると何が(゜д゜)ウマーなんでしょうか? 例えば、紳士服のなんとか…というお店がありますが、 いろんなスーツが売っています。でもあなた専用に作ったスーツはありません。 サイズや生地の選択肢はある程度ありますが、限りがあるでしょう。 一方オーダースーツのお店は、あなただけにあつらえてくれます。 あなたの体型やこだわりを聞いてオリジナルのスーツを作ってくれます。 Wordpressのテーマもこれと似た側面があります。 人が作ったテーマというのはいろんなシチュエーションに対応できるように汎用的にできており、その型に沿って作っていきます。言い換えれば自由度はあまりないということです。 自分でテーマづくりができると、 「これがやりたい」「この要素はここに表示したい」という希望が叶います。 もちろん自分でテーマづくりができるようになるためには、勉強と時間が要ります。 それをやるためにも、まず最初はHTML・CSSです。 これにちょっとしたPHP、Wordpress関数(Wordpressテンプレートタグ)を覚えると自分で思い描くサイトを作成することができるようになります。 1回苦労してテーマづくりをやるとWordpressの仕組みがわかります。 仕組みがわかってくるのでいろんなことができるようになります。 1から作らなくても既存のテーマを利用して別のテーマを作るってこともできます。 テーマづくりを自分でやれるに越したことはありませんが、コストや時間の問題もあるのでどういったスタンスでサイトづくり・運用をするかにもよります。 これはいつだって悩ましいところです。 それではまたー HTML/CSS Sun, 15 Jul 2018 14:23:42 +0900 HTML/CSS入門講座::HTML・CSS・Wordpress講座 ツタエ ノリヒロ Bootstrapなどのフレームワークについて http://cyta.jp/htmlcss/b/81939 <br>本日はどんよりな都内でございます。ムシムシしますね〜 本日はHTML,CSSのフレームワークと呼ばれるBootstrapについて。 Bootstrap Ver.4が先ごろ出ましたが、HTML、CSSなどを勉強しているとよく出てくる Bootstrapってなんでしょうか? ある程度たくさんページを作っていくと良く出てくるパーツがあります。 例えば、 ・ボタン ・ナビゲーション ・パンくずリスト ・スマホサイト用の折りたたみメニュー etc... こういったパーツは、新しいサイトごとに1から作っていると大変です。 またこんなケースもあります。 「このレイアウトのやり方、前にも似たようなのを作ったぞ…」 こういうシチュエーションに対応してくれるのがBootstrapなんですね。 ボタンとかナビゲーションとか汎用的なパーツは使い回す場合も多いので、 予めHTMLとCSSのコードを用意しておきます。 もちろん自分で用意する場合もありますが、 Bootstrapはそんなよく使うパーツやパターンをギュッとたくさん集めたものなんですね! 言ってしまえば誰かが作って準備してくれたものを利用するということなので、 いささかオリジナリティには欠けますが、デザイン、コーディングのスピードはググッとアップするわけです。 ちょっと被りますが、どんなものがあるかというと、 ・ボタン ・ナビゲーション ・パンくずリスト ・スマホサイト用折りたたみメニュー ・フレキシブル段組みレイアウト ・カード型レイアウト ・メディア型レイアウト ・レスポンシブ対応 ・アイコンフォント ・スライダー ・モーダルウィンドウ ・ポップアップ and more! (実のところBootstrapはHTML,CSS,JavaScript(jQuery)でできています) とくにスピードを重視されている方や、あまりデザインが得意ではないエンジニアの方など 重宝されている方はたくさんいます。 かく言う私ももちろん一ユーザでございます。 BootstrapはHTML・CSSフレームワークとも言われております。 フレームワーク=既存の枠組み、仕組み ってな解釈でございます。 この枠組みには前人の知恵と努力が詰まっているので出来栄えも素晴らしいです。 それでいてかつサクッと使うことができる優れもの。 サイト制作には是非活かしたいものですね☆ 余談ですが、Bootstrapにはあまりにたくさんの機能が凝縮されているので、 もっと軽快なものを目指して後発のフレームワークがたくさん登場しております。 ・Foundation ・Bulma CSS(★おすすめ) ・Spectre CSS この辺などが自分も案件で利用したりするフレームワークです。 それではまたー HTML/CSS Thu, 12 Jul 2018 12:30:26 +0900 HTML/CSS入門講座::HTML・CSS・Wordpress講座 ツタエ ノリヒロ スマホ用のサイトってどうやって作る? http://cyta.jp/htmlcss/b/81891 <br>今日は昨日に比べカラッと晴れているので洗濯物がよく乾きそうです。 都内は32度超えですが… 今日はスマホサイトのデザインの話。 <i style="font-weight: bold; font-style: oblique; font-size: 1.25rem;">「スマホ用のサイトってどうやって作るんですか?」</i> この質問はよく初心者の質問として上がります。 答えは以下の2つ。 1. 見ている人の環境(スマホとかPCとか)をプログラムで調べ、表示するページやコンテンツを出し分ける 2. 見ている人の画面サイズに合わせCSSでデザインを変化させる 1の方法はプログラムを用いるので敷居が高いですが、 2の方法はHTML+CSSを学べば作ることができます。 簡単な例を示します ==================================== 【HTML】 <code style="font-family: Courier;"> &lt;p&gt;初心者のためのHTML+CSS講座&lt;/p&gt; </code> 【CSS】 <code style="font-family: Courier;"> /* 共通(スマホ用)のスタイル */ p { color: blue; } /* タブレット、デスクトップ用のスタイル */ @media (min-width: 768px) { p { color: pink; } } </code> ==================================== この例では、 ▼画面サイズが767px以下の場合(スマホなどの画面サイズ) ・文字の色:ブルー ▼画面サイズが768px以上の場合(一般的なタブレットの画面サイズ以上) ・文字の色: ピンク ということをやっています。 画面サイズが768px以上の環境では後に書いてあるスタイルのほうが優先されます! 基本的にはこれだけ。 細かいこともありますが、これをどんどんレイアウトなどに応用していくことで スマホ/PCのデザインを切り分けていくことができます。 またスマホ用のスタイルを先に指定しているので、 「モバイルファーストなCSSの記述」なんて言われたりもします。 こう見れば、スマホ用のサイトを作ると言うよりは、 「いろんな画面サイズにサイトデザインを対応させる」 といったほうが正しいかもしれませんね! これを「<b style="font-weight: bold;">レスポンシブウェブデザイン(RWD)</b>」と言います ・レスポンシブ:いろんな画面サイズに応答して(対応して) ・ウェブ:ウェブの ・デザイン:デザインを変化させる ということでございます! ちなみに「レスポンシブル(責任)」ではありませんよ〜(よくあるミスです 笑) それではまたー HTML/CSS Tue, 10 Jul 2018 17:17:48 +0900 HTML/CSS入門講座::HTML・CSS・Wordpress講座 ツタエ ノリヒロ