previous arrow
next arrow
Slider

Category: Uncategorized

Uncategorized

メールフォームの作成

メールフォームはHTMLだけで作成することはできません。 HTMLにはメールを送信する機能がないからです。 フォームの見栄えをHTMLやCSSで作成し、メールプログラムはCGIやPHPなど別のプログラム言語を使うのが一般的です。 といっても、メールプログラムの作成は簡単ではありませんので、一般的には有料または無料のフォームプログラムを入手してページに組み込んで、利用します。 例として、Googleフォームを利用する方法を紹介します。 GoogleフォームはGmailのアカウントがあれば誰でも無料で利用することができます。 もちろんGmailのアカウントも無料で取得することができます。 Gmailのアカウントをお持ちでない方は、「Gmailアカウント取得方法」などのキーワードでインターネット検索をしてみてください。 Googleフォームをページに埋め込む手順は以下です。 ①Googleのトップページ(https://www.google.co.jp/)からGmailのアカウントでログインをする。ログイン画面でパスワードを入力してログインボタンをクリック。 ②Googleフォームのトップページ(https://www.google.com/intl/ja_jp/forms/about/)を開き、「Googleフォームを使う」をクリック。 ③画面右下の「+」アイコンをクリックして、タイトルやフォームの項目などを設定する。 ④ページ右側の「+」アイコンをクリックすると新しい入力欄が追加されますので、同様にして「メールアドレス」や「件名」「お問い合わせ内容」などの入力欄を設定する。お問い合わせ内容は長い文章を入力できるように「段落」を選択するのがポイントです。 ⑤フォームの入力項目が全て設定できたら、次に画面上部のカラーパレットから画像選択のアイコンをクリックして「テーマの選択画面」を開く。 ⑥好きな画像を選んで「選択」ボタンをクリックしたら、ページ上部の「送信」ボタンをクリックする。 ⑦送信方法の「<>」アイコンをクリックすると、埋め込みコードが表示されるので、ホームページに埋め込みたいサイズを幅と高さに入力して「コピー」をク リック。すると、表示されている埋め込み用のコードがコピーできます。 あとは、コピーしたコードをHTMLに貼り付けて完成です!

Uncategorized

ホームページで使う単位は「px」

ワイヤーフレームを作るとき、ページ全体の横幅や、口ゴや写真など各部分の具体的なサイズを書き込むことがあります。 そのとき使う長さの単位を「px」と書いてピクセル (pixel) と読みます。 ウェブで使う写真やイラストなどの画像データは、色の付いた小さな点の集まりでできています。 その1つ1つの点をピクセルと呼び、画像の大きさや行聞の広さなどは基本的に「px」を単位として表現します。 大雑把に言うと、パソコンのブラウザ芯う横幅が1000px以上あるのが一般的で、スマホなら一番小さいもので横幅が320px(2016年9月現在)ぐらいです。 最近はノートパソコンでも高解像度のディスプレイが増えていますので、ページ全体の横幅が1000pxや1200pxぐらいで作ってあるホームページも珍しくなくなってきました。

Uncategorized

Webサイト構造設計

Webサイトの構造設計は、早い段階でどれくらいの手間をかけられるかがポイントとなる。一般的にサイト構造の設計は、各ページのイメージラフよりも早い段階で設計しておく必要がある。実際、建築でいうところの土台部分に相当この作業を重視せずに進めたことで、失敗へのプロセスを踏んでしまうことは非常に多い。さらに、表面上は一般的なトップページから各カテゴリのページへ分岐していくタイプのように見えても、使いやすいとされるサイトでは最初からユーザー導線を考慮して作られているケースが多い。ここで、Webサイトの構造を決めるための二つのステップを紹介しよう。 ①情報を分解して目的に沿って再分類する 新規、リニューアルに関わらず、Webサイトに掲載される情報はすでにある程度まとまった形で製作者に届くことが多い。これらはWeb公開用に最適化されていないこともあるので、いったん情報を分解してからサイトの目的に沿って情報に優先順位をつけ、大きなカテゴリごとに分類を行おう。分類手法としてはユーザー別・目的別などがあり、情報階層の幅や深さも考慮に入れながら行うと良い。 ②訪問者が目的を達成できる構造を考える 情報をカテゴリごとに分類したら、ユーザーの行動を想定した導線を考えよう。訪問者が何を求めてサイトにやってくるのか、訪問者が目的を達成するためにはどのような構造が望ましいのかをストーリーで考え、それに沿ってサイトの構造を決めていく。個の過程でナビゲーションの数やショートカットも決まる。この段階では、サイト構造に合ったディレクトリの構成やサイトマップの形も見えてくるだろう。

Uncategorized

リッチ メディアについて

IR 系のコンテンツなどでは PDFデータをそのままリンクして掲載し ているケースがあります。 Webサイトも多く見られるが、アクセシピリティが低いことも多 い。音声ブラウザでは、 PDFデータを読み上げることができるソフトウ エアも存在するが、 PDFデータ自体のテキストレイヤー構造によっては見た目通りの順序で読み上げられないことも実際には多い。また、 Flash コンテンツも読み上げに対応したコンテンツを制作することも 可能だが、企画時点でターゲッ卜を絞り込まれていることもあり実際 にはそこまで配慮されたコンテンツは少ないといえるだろう。 こういったリッチメディアを掲載する際、その情報がより広範囲に 伝えられるべき内容であるならば、別途テキスト版の HTMLコンテン ツを用意することも検討したい。また、事前予告なくこういったリッチ メディアにアクセスしてしまうことに不快感を感じるユーザーも多く存 在することから、リンク先が PDFデータであるといった情報をテキスト… Read more »

Uncategorized

モニタの高解像度化への対応

最近はPCのモニタ解像度が高くなり、縦横1 ,000 ピクセルを超えるエリアでサイトを表示できるユーザー も増えています。この場合、ブラウザの最大化ボタンを押せば、左揃えの小さいサイトは右に大きく余白が 空き、中央揃えでは左右に余白が出てしまいま す ~。 そこで、最初から横長の構図で作成されているサイトも多くなりました。 Web はどのブラウザフォントを使うかなど によりテキストの見え方が変わります  。 これはユーザーに合わせて環境を変えられる便利な点ですが、レイアウトの崩れの原因にも なります。フォントやレイアウトのスタイルをあ る程度確定したい場合は、 CSS (カスケーデ イング・スタイルシート )を使うことができます。 CSS… Read more »

Uncategorized

フロントページエクスプレスでぺージを新規作成するには

フロン トページエクスプレスを起動すると、自動的に新規ページのウインドウ が作成されますが、改めて新規ページを作成したいときには、 [ファイル]メニューの[新規作成]を選択して作成します。この際 [新しいページ]ダイアログが聞きますので[テンプレートまたはウ ィザード]の中から[標準ページ]を選択します。なお、この[テンプレートまたはウイザード]のウイザードでは、質問に答えていくと自動的にホームページを作成することができます。  

Uncategorized

インターネットはやりたいことがすぐ実現する夢のネットワーク

ホームページを作成してファイルをアップロードすれば、即座にしかも安上がりに全世界に情報発信できます。たとえばはるか昔、世界の反対側に行くのはとても大変でした。今では飛行機などを使って昔と比べものにならない早さで、目的地に着くことができます。そしてさらにインターネットを使えば、ネットワークを使って遠く離れた場所同士、ほとんどコストをかけず、まるでその場にいるかのように相手の顔を映像で見て話をしたり、チャット(筆談)で討論したり、果ては音楽でセッションしたり、芸術作品を共同で創りあげたりなどと、世界中の人々とコミュニケーションをとったり、世界中のさまざまな情報を家に居ながらにして安上がりに得ることができるなど、やりたい気持ち・やりたいことがすぐに実現する、より豊かな世界になってきました。 簡単にそして即座に人間の喜びや暖かさを知りともに喜ぶことができる一方、世界のどこかの誰かが嘆く、悲しい辛い気持ちも即座に知ることができるようになりました。それゆえ他人の気持ちを思いやったり世の中全体のこ とを考えたり、資源や自然を譲り合って使ったりなど、より人間的なモラルが必要になってきていると思います。ひとりひとりがモラルをもって、 より楽しく、素晴らしい、喜ばしい世界を実現するネットワークを皆で作りあげてゆきましょう。