行われた「楽しそうネットワーク」という情報通信技術の活用勉強会にて、ホームページはどうやって作っているのか、制作に必要なHTMLとCSSとは何か、ということをお話してきました。本当に初心者向けの、全くホームページ制作などしたことないという方に向けた、初歩の説明です。思う部分もありましたが、Web制作の現場で活躍されている方々からの助言も頂けて、大変勉強になりました。スライドで、モデルとして使ったのは、制作中の私のホームページです。そんなスライドですが、公開してみました。今回お話して、ホームページ制作というのは、専門の言語やソフトを使う分、そういうものに全く触れたことがない人にとっては難しく感じると思いますし、それをわかりやすく説明する...というのも難しいと思いました。私もそうなのですが、HTMLとCSSは最初はコピペでも、英語が元になっている言語なので、使っていくうちに意味が理解できると思います。間違った使い方とかしちゃうと思うんですけど、本当はダメなんですけど、気づいたら恥ずかしくなるんですけど、でも自分が思ったとおりに表示されると嬉しいわけで...とりあえず怖がらずに書いてみるのが良いと思います。やっていくうちに何がおかしいかとか分かってくるのではないかと思いますし、やっぱり経験が大事だなぁと思いました...。テキストエディタ「Brackets」について無料のテキストエディタ「Brackets」は、HTMLやCSSなどの予測、補完機能があって、見た目も綺麗だし初心者さんでも使いやすいと思います。詳しくは以前記事にしました。ラフ画についてスライド中の私のラフ画はめっちゃ汚くていい加減で申し訳ないのですが...ラフ画を描くことも大事です。あと個人的には「テーマ」を決めると作りやすくなります。私の場合、テーマが単語だったり文章だったり、ひどい時は音楽だったりします。そんなところからデザインのアイディアを出しています。今回モデルにしたホームページのデザインテーマは「雪の日の線路」なのですが、私はこの単語から色々想像してデザインしていっています。́Д`)ちょうどこのデザインをしていた日は大雪でした。そんな思い出もあります。ラフ画書いたり設計したり...という作業を「ワイヤーフレーム制作」と言ったりします。詳しくはこちらで解説されています。WebクリエイターボックスノーマライズCSSとリセットCSS勉強会で補足があった部分です。今回のモデルのホームページでは、ノーマライズCSSを採用しています。ホームページを見るとき、どのブラウザ(ホームページを見るツール。インターネットエクスプローラーとかサファリとかグーグルクロームとか)で見るかによって、表示がちょっと変わってきます。これは、ブラウザが最初から用意しているCSSが、ブラウザ毎で異なるためです。CSSはデザイン担当の文書です。これを読み込むことでホームページのデザインが決まりますが、ホームページを見やすくするために、ブラウザ側でもあらかじめ設定されているCSSがあるそうです。<h1>とか<h2>とかいう、見出しを指定するhtmlタグなどは、それらを文字に指定するだけで最初から文字が大きくなったりしますが、その最初の設定がブラウザによって差があったりします。最初から差があることによって、自分の書いたCSSが、ブラウザを変えると違って表示される...ということをなくすために、ノーマライズCSSやリセットCSSは使われます。リセットCSSは全ての設定をリセットするので、自分でCSSを書くときは、細かくしっかり指定をしていく必要があるそうです。ノーマライズCSSは、全てをリセットするわけではなく、各ブラウザでのCSSの差を無くしてくれるCSSです。ブラウザ標準のCSSは、差はなくなれど効いたままになっています。これがあることで、細かい指定がなくても、ブラウザ側でCSSの調整が入るので、自動的に余白などが入ることがあります。どちらを使うのがいのか...というのは好みによるらしいのですが、最近ではノーマライズCSSを使うのが主流になってきているそうです。最初からある程度形の整ったCSSがあって、それをベースにするほうが作っていく上で安全だったり、修正しやすかったり、スマホ用のブラウザも補正してくれる点が良かったりするようです。1からがっちりデザインを指定したい場合は、リセットCSSの方が使いやすいかもしれません。詳しい説明はこちらにあります。Designidとclassこれは何が違うのか、というのは私も昔よく理解していませんでしたし、勉強会でも出た話です。idは、そのページに1度しかない要素に使います。一度しか出てこないということは、そのidが使われているところは一箇所なので、文書中の場所を特定したり、また違う人が編集したりする時に「これは1つしかない要素だ」という風に伝えることができます。1つしかない要素という認識は結構重要で、1つしかないと分かっていれば、修正箇所の確認なども楽ですし、またその要素の個性や重要さも教えてくれるんじゃないかなぁ...と思ったりします。classは何回でも使えるので、1つではなく何回でも適用したいデザインなどを指定する時に使います。classの方が汎用性が高いですし、idを使うべきところでclassを使っても表示に問題はありませんが、分かりやすいHTMLを書くためには、idとclassは使い分けたいところです。私も最初は使い分けが不安でしたが、実際HTMLを書いて修正を繰り返していくと、idやclassの使い分けについて何となく分かってきた気がします。使い分けると修正作業とか楽です。そんな感じですかね...。今回スライドを発表するにあたり、色々ツッコミを入れて下さった皆様ありがとうございました。勉強になりましたし、ほんとの初歩ですが、基本を見直すことは大事だと思いました。これからホームページを作ろうと思ってらっしゃる方の参考になれば幸いです...なるかな...。私のやったWordPressの勉強法(スライド)色の持つ意味を書いていったら、プリキュアとかももクロとか幸子さんが出てきたIllustrator初心者さんへ。#LOVEFONT初心者でもできそうなIllustratorで簡単に作れるキャラクターメイキング次の記事ブログ始めて1周年を迎えましたので、まとめとか。キャンセル投稿を送信できませんでした。メールアドレスを確認してください。メール送信チェックに失敗しました。このブログではメールでの投稿共有はできません。