Web用語：CSSとは？

こんにちは。
Webであなたの夢が叶う！のHirokoです。

Web用語について、お問い合わせをいただくことが
多くなってきていますので、
いくつかをピックアップしています。

ホームページ制作では、主に
　HTML：ホームページの仕組み、構造
　CSS：ホームページのデザイン
　JaveScript：ホームページの働き
を使ってコーディングしていきます。

今日はCSSについてです。

★CSSとは？

CSSは、Cascading Style Sheetsの略で、

HTMLにデザインを指定する書式です。
具体的にいうと、
　・文字フォントの種類、大きさ、色
　・文字間隔（行間や幅）
　・文字や画像の配置
などの情報をまとめて書いておくファイルのことです。

HTML文書にCSSを適用させることで、
複数のページのデザインを統一できるので
ホームページ制作時の便利な手法です。

CSSを使うことで、見栄えを統一する以外にも
次のようなメリットがあります。

①HTMLのデザイン統一が容易
②HTML文書にデザイン部分を書かないので
　　　　　　　　　　　　　　構造がすっきりする
③デザインの変更が簡単にできる
　　　　（複数のHTML文書を書き換えなくてよい）

話題の「レスポンシブデザイン」も
HTMLひとつと
　・パソコン用CSS
　・スマホ用CSS
　・タブレット用CSS
のように各端末ごとにCSSを用意するだけで、
表示崩れなく見やすいデザインを実現できます。

このようにCSSは、
ホームページのデザインを担当しているのです。

今日も最後まで読んでいただいてありがとうございました。

Web用語：HTMLとは？

こんにちは。
Webであなたの夢が叶う！のHirokoです。

Web用語について、お問い合わせをいただくことが
多くなってきていますので、
いくつかをピックアップして簡単に解説していきますね。

ホームページ制作では、主に
HTML、CSS、JaveScriptの３つを使って
コーディングしていきます。

それぞれの役割は、
　HTML：ホームページの仕組み、構造
　CSS：ホームページのデザイン
　JaveScript：ホームページの働き
となっていてるので、
まずはHTMLについて記します。

★HTMLとは？

ホームページを作るときに使う定例文のこと。

HTMLを使ってホームページに
文字や画像を表示させたり、
ページをめくったり、
別のページを表示したりします。

また、
文字の色や大きさを変えたり、
画像を大きくしたり小さくしたり、
AさんのページからBさんのページに移動したり、
Web上でいろいろなことが実現できます。

文字の色を緑色に変えたい場合、
<font color="#008000">文字色をみどり色に！</font>
と書くのですが、
アメブロのようにエディタを使う場合、
その機能はエディタ内に標準装備されています。
ですから色を変えたい範囲を指定して、

文字色を変えるボタンをクリックするだけで、
すぐに色は変わってくれます。
とても便利ですね。

このような便利な機能が備わっていて、
書き手がHTMLを知らなくても、
ホームページ制作を容易にしているのが、
　・ドリームウィーバー
　・ホームページビルダー
などのアプリです。

こういったアプリを使うことで、
とても簡単にしかも手早くホームページ制作ができます。

ただしSEO対策的には、
このようなアプリを使わずに、
ご自身で最初からコーディングしたり、
コードを修正するほうがよいと言われています。

理由は、
整然としたコーディングができるから。。。
そのほうがGoogleの検索エンジンにかかりやすいためです。

HTMLについては、
何となくわかっていただけたかな？

今日も最後まで読んでいただいてありがとうございました。

Webのユーザーエージェントとは？

こんにちは。
Webであなたの夢が叶う！のHirokoです。

ユーザーエージェントって聞いたこと、ありますか？

私たちがパソコンやスマホ、ケータイなどから
インターネットに接続してWebページを見るとき、
このユーザーエージェントが大切な役割を果たしています。

例えばわたしのホームページの場合、
http://www.officegratia.com/
がWeb上のアドレス(URL)です。

このアドレスにアクセスすると、
パソコンからでも
スマホからでも
iPadやタブレット端末からでも
ケータイからでも
同じページがその端末に合ったサイズで表示されます。

これはレスポンシブデザインといって、
ホームページを制作し、運用していくときに
とても有効であるとお伝えしました。

それを可能にしているのが、
このユーザーエージェントです。

わたしたちがWebページを見るとき、
それぞれの端末が
「わたしはWindows8のパソコンで、
　　　　　ブラウザはgoogle chromeです！」
「わたしはiPad(iOS6)のSafariです！」
と宣言するので、
ホームページのプログラムは、その端末情報もとに
端末に合った画面を表示します。

アメブロも
パソコン表示とスマホ表示では、
表示画面が異なっていますね。
これは、
アメブロのプログラムがユーザーエージェントを判断して、
スマホからのアクセスだと
スマホサイトに切り替えているからです。

毎年多くの新しい機種が発売されますが、
それぞれユーザーエージェントも異なります。

また、パソコンやスマホだけでなく
ゲーム機などの通信機器にも
ユーザーエージェントがあります。

ユーザーエージェントの一覧は、
http://www.openspc2.org/userAgent/
から確認してみてください。

昔の機種もちゃんと一覧にあります。

今日も最後まで読んでいただいてありがとうございました。

Webで1年の後半スタート！

こんにちは。
Webであなたの夢が叶う！のHirokoです。

今日7月1日は一年のちょうど半分で折り返し地点、
そして後半のスタートです。

お正月に立てた目標や今年の抱負を思い返してみると、
今、自分がどのあたりを進んでいるのかがわかります。
今週は、この半年の振り返りと
これから半年の軌道修正のグッドタイミング。

わたしの場合、
昨年11月からアメブロでの記事内容を見直し、
今年からは、
お客さまからのご質問やお問い合わせの多かったことを
記事にしてきました。
そして4月にはようやく自社ホームページをオープン。

ホームページ内のブログとアメブロで、
Webの使い方や上手な付き合い方、
便利なツールのご紹介、
ホームページやブログの位置づけなど、
今、Web上で起こっていることに注目して
毎日、書いています。

これからも技術屋さんから見たWebの世界を
わかりやすく読みやすく書いていきますね。

いつも読んでくださっているみなさんに感謝いたします。
ありがとうございます。

今日も最後まで読んでいただいてありがとうございました。

Webで読めない文字を調べるとき

こんにちは。
Webであなたの夢が叶う！のHirokoです。

旧字体の書かれた専門書や海外の文献を参考に
論文を書いたり、
プレゼンを用意しなければならないとき、
また、他言語のWebページを作るとき、
普段あまり使わない文字や記号を画面上に表示させたい
ことがありますよね。

でも残念ながら、
日本語の「よみ」と「文字」「記号」が対応していない
ケースが多いのです。

こんなときに便利なのが、
Windowsの「手書きpad」です。
マウスでその文字や記号を手書きすると、
文字候補が現れて、
クリックすると画面に表示できるというもの。

「手書きpad」でもお目当ての文字や記号が現れない場合、
「手書き漢字認識」サイトを利用すると便利です。

http://kanji.sljfaq.org/drawj.html

部首や記号入力にも対応していて、
「手書きpad」よりも文字が大きいので、
細かいところまで認識しやすいところも気にいっています。

Web上のツールのおかげで
作業効率もアップしています。
感謝！（￣▽￣）=３

今日も最後まで読んでいただいてありがとうございました。