投稿日：2019-10-23T23:37:34+09:00

年末まで毎日webサイトを作り続ける大学生〜5日目ドラッグ&ドロップで簡単なゲームを作る〜

はじめに

初めまして。
年末まで毎日webサイトを作っている者です。
今日はドラッグ$ドロップを使って簡単なゲームを作りました。
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は5日目。(2019/10/23)
よろしくお願いします。

サイトURL

https://sin2cos21.github.io/day5.html

やったこと

3つの箱を用意して、それをドラッグ＆ドロップで右側に移動できるようにしました。
ドラッグした回数も表示しています。
レイアウトはこんな感じ↓

移動させた時にドロップできるポイントに入っていれば、ドロップ先の色が少し変わります↓

こだわったところ

箱ごとドロップさせるのに苦労しました・・・。
終わってみたらシンプルな構造でしたが、今日はドラッグ&ドロップの基礎を学んだという感じです。
javascriptはこれだけです↓
<script>
        function drag($event) {
            $event.dataTransfer.setData("Text", $event.target.id);
        };

        function drop($event) {
            var test = event.dataTransfer.getData("text");
            var test2 = document.getElementById(test);
            $event.currentTarget.appendChild(test2);
            $event.preventDefault();
        }

        var $count = 0;
        function count() {
            document.getElementById("count").innerHTML = ++$count;
        }

        function change() {
            document.getElementById("wrapper2").style.backgroundColor = "rgba(0, 0, 0, .1)";
        }

        function change2() {
            document.getElementById("wrapper2").style.backgroundColor = "transparent";
        }

    </script>
関数dragとdropで移動させています。
countで移動回数を数えています。
changeとchange2はドロップ可能状態になったらドロップ先の色を変えるために加えました。

感想

やればやるほど分からないことが増えていきますが、それでも動くものを作れて発信できるのはいいですね。
まだ$eventやらdataTransferやらよく理解できていませんが、今後も作りつつ調べるスタイルで行こうと思います。
今週はドタバタしているので明日と明後日のサイト制作は苦労しそうですが頑張ります！

参考

ドラッグ＆ドロップイベント ≪ イベント ≪ DOM ≪ JavaScript（ジャバスクリプト）リファレンス(http://alphasis.info/javascript/dom/event/draganddrop/)

HTML ドラッグ＆ドロップ API - Web API | MDN(https://developer.mozilla.org/ja/docs/Web/API/HTML_Drag_and_Drop_API)

上2つのサイトがとても分かりやすかったです。ありがとうございます。

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-23T21:22:52+09:00

Progateでの学習メモ　HTML,CSS編

Progateで学習したことのメモ
学習したことと、その時調べたことまとめ

HTMLとCSS

そもそも言語だってわかってなかった(･_･;

HTML（HyperText Markup Language）:Webページの要素や構造を形づくる言語

CSS（Cascading Style Sheets）:Webページの文書構造にデザインを施し、見栄えを整える言語

CSSのメリット

作業の効率化

ページの軽量化、読み込み速度向上

HTMLで表現不可能な装飾

SEO（検索エンジン最適化）に対応

複数レイアウトに使い分け可能（TV、印刷、ブラウザなど）

HTMLに触れてみよう！編

タグとか説明

<h1> 見出し。<h６>まであり、<h６>が最小の見出し。

<p> 段落

 コメント

<a href="リンク先のURL">実際にブラウザに表示されるテキスト</a> リンク

<img src="画像のURL"> 画像の表示。終了タグは不要。

<li> リスト。インデントで入れ子になる。

<ul> 囲んだ<li>の要素の先頭に黒の点がつく。

<ol> 囲んだ<li>の要素の先頭に連番がつく。

CSSに触れてみよう！編

サンプルソース
index.html
<h1>Hello World</h1>
<p>プログラミングの世界へようこそ</p>
stylesheet.css
h1 {
  /* 文字の色:赤 */
  color:#ff0000;
}

p {
  /* 文字の色：青 */
  color:#0000ff;
}
cssのソースで「h1」（要素）をセレクタ、変更項目をプロパティ

/* */で囲んだ行がコメント

font-size：文字の大きさを指定。ピクセル単位なので、pxをつける。

font-family：フォントの指定。スペースが入るフォント名については”をつける。それ以外はつけない。

「#dddddd」のように同じ値が続く場合は、「#ddd」と省略可能。

特定の要素にCSSを適用する場合　→ 要素に名前をつける
index.html
<h2>レッスン一覧</h2>
<ul>
  <li class="selected">HTML</li>
  <li>PHP</li>
  <li>Ruby</li>
</ul>
stylesheet.css
li {
  color: #444;
}
.selected{
  color:#ff0000;
}
要素にclassを使って名前をつけることによって、別々のCSSを適用する可能となる。

class名でCSSを指定する場合には、先頭にドット「.」が必要

レイアウトを作ろう！編

<head>要素にはページに関する情報、<body>要素には実際に表示したい内容。

<!DOCTYPE html>の部分はDOCTYPE宣言。HTMLのバージョンを宣言

<head>の内容例

<meta charset="utf-8">
文字コードの指定。ページの文字化けを防ぐ。

<title>Progate</title>
ページのタイトルの設定

<link rel="stylesheet" href="stylesheet.css">
HTMLからCSSの読み込み。href属性で読み込むCSSファイルを指定。

レイアウトは<div>要素によって構成。「div」は「division」の略で、要素をグループ化するために使用。

ヘッダーを作ろう！編

float:left;：要素を横並びにする

padding: 値;：余白を入れる。値を4つ、スペース区切りで指定する場合、「上」「右」「下」「左」の順で指定。

フッターを作ろう！編

ヘッダーとフッターのリストで異なるCSSを適用する場合
index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Progate</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <div class="header">
      <div class="header-logo">Progate</div>
      <div class="header-list">
        <ul>
          <li>プログラミングとは</li>
          <li>学べるレッスン</li>
          <li>お問い合わせ</li>
        </ul>
      </div>
    </div>

    <div class="main">
      
    </div>

    <div class="footer">
      <div class="footer-logo">
        Progate
      </div>

      <div class="footer-list">
        <ul>
          <li>会社概要</li>
          <li>採用</li>
          <li>お問い合わせ</li>
        </ul>
      </div>

    </div>
  </body>
</html>
stylesheet.css
.header-list li{
  float: left;
}
上記のように指定すると、「header-list」の中の<li>要素にのみCSSを適用できる。

コンテンツを作ろう！編

main要素は、「copy-container」、「contents」、「contact-form」の3つの要素

文中の一部にCSSを適用させたい場合は、<span>要素で囲む

paddingはborderの内側の余白を作る

marginborderの内側の余白を作る。

指定パターは以下の通り

上下左右を個別で設定

上右下左の順で値を4つ、スペース区切りで指定

上下左右の順で値を２つ、スペース区切りで指定

お問い合わせフォームを作ろう！編

<input>要素は１行のテキスト入力用の要素。終了タグは不要。type属性にsubmitを指定すると、入力欄ではなく、ボタンが表示される。

<textarea>要素は複数行のテキスト入力を用の要素。
index.html
      

      <div class="contact-form">
        <h3 class="section-title">お問い合わせ</h3>
        <p>メールアドレス（必須）</p>
        <input/>

        <p>お問い合わせ内容（必須）</p>
        <textarea></textarea>

        <p>※必須項目は必ずご入力ください</p>
        <input class="contact-submit" type="submit" value="送信" />
      </div>

      
複数のセレクタをコンマ（,）で区切ることで、それらに同じCSSを適用。

以上

とりあえず初級編終了！

参考

Progate

今さら聞けない！CSSとは【初心者向け】

ホームページの作り方：さきちんうぇぶ CSSのメリット

タグとか	説明
`<h1>`	見出し。`<h６>`まであり、`<h６>`が最小の見出し。
`<p>`	段落
`<!-- -->`	コメント
`<a href="リンク先のURL">実際にブラウザに表示されるテキスト</a>`	リンク
`<img src="画像のURL">`	画像の表示。終了タグは不要。
`<li>`	リスト。インデントで入れ子になる。
`<ul>`	囲んだ`<li>`の要素の先頭に黒の点がつく。
`<ol>`	囲んだ`<li>`の要素の先頭に連番がつく。

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-23T18:26:18+09:00

【初心者向け・基本】HTMLの階層とタグについて

勉強のため自分用のメモとして残しておきます。
基本的なことですが、最初は忘れやすいので、
私と同じようにHTMLを勉強している人は、ぜひ参考資料として使ってください。

HTMLの階層について

でブラウザに表示させずコメントを追加できる。
以下でそれぞれのタグの意味を記載しています。

<!DOCTYPE html>
<html>
    
    <head> </head>
    
    <body> </body>

</html>
タグの種類

ざっとタグの使い方をメモしておくよ。
<title></title>
下の画像の赤枠で、印をしたところのタイトルを変更できるタグ。
headタグの間に書く。
<h1></h1>
見出し。h1~h6まである。
見出し2を使いたい時は、h1をh2に変更しよう。
hの後の数字を変えるだけで、好きな大きさの見出しを使えるよ。

例）
文字を<strong>太く</strong>する
文字を太くする時は、strongタグ。

例）
<ins></ins>
下線を引きたい時に使う。Inserted。

例）
<em></em>
イタリック。emphasize、強調するという意味。

例）
<sup></sup>
上付き文字。superscripted

例）
<sub></sub>
下付き文字。subscripted

例）
<mark></mark>
マーカーを引きたい時。

例）
<hr>
まっすぐな線を引ける

例）
<p></p>
段落を作れる
<br>
文の途中で段落を作りたい時に使用できる。
役割としてはpタグと同様。
<del></del>
文字に線を引く。
例）
<div></div>
要素を作る時に
<a href>
リンクを作る

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-23T17:54:55+09:00

プログラミング学習の進捗状況

感想

昨日からプログラミング学習を始めましたが、カリキュラムを見ただけでは分かったようで分かっていない痛感し、実際に手を動かして、コードを少しでも多く書くことが重要だと感じました。

学習

HTMLとCSSの関係や役割、classやidの特性などを学習しました。

課題

スペルの間違いや；と：を打ち間違えてしまってエラーが出てしまった。

改善策

まずはエラーを少なくできるよう丁寧に入力し、エラーが出てしまってもなるべく自分で解決できるようにする。

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-23T17:36:58+09:00

HTML CSS 吹き出しを作ろう

画像として読み込みするのではなく、CSSで吹き出しを作る方法。
自分で作る時に迷わないようにするためのメモ。
右のようなのを作る

まずはhtml
fukidashi.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>吹き出し</title>
    <link rel="stylesheet" href="css/fukidashi.css">
  </head>
<body>
  <div class="text-center">
    <div class="fukidashi">
      <p>
        吹き出し
      </p>
    </div>
  </div>
</body>
</html>
次はcss
fukidashi.css
body {
    margin: 0;
}
.text-center {
    text-align: center;
    margin: 20px;
}
.fukidashi {
    background: #00bfff;
    position: relative;
    display: inline-block;
    width: 100px;
    height: 100px;
    padding: 0;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 50%;
    color: #ffffff;
}
.fukidashi p {
    margin: 0;
    position: absolute;
    top: 40px;
    left: 20px;
}
.fukidashi::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    display: block;
    width: 0;
    height: 0;
    margin: 0 auto;
    border-style: solid;
    border-width: 16px 8px 0 8px;
    border-color: #00bfff transparent transparent transparent;
}
●の丸みを決めているところは？

●の部分は
    border-radius: 50%;
で出来るのがすぐ分かった。

値を変えてみると
    border-radius: 25%;
右のようになる
「%」ではなく「px」でも指定出来る
    border-radius: 10px;
▼のところってどうなってるの！？

▼の部分をどうやって作っているか最初分からなかったので、それぞれのプロパティを見ていく。

content

▼の部分は疑似要素で作られているのでcontentプロパティが必須
    content: "";
プロパティ値に何もなければ空で良い

▼の位置を決める(position,left,right,bottom,display)
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    display: block;
分かりやすくするために赤くしてありますが、↑の記述だと▼はここの位置

positionをコメントにすると
    /* position: absolute; */
    left: 0;
    right: 0;
    bottom: -10px;
    display: block;
このようになり、left,right,bottomの数字を変えても変化はありません

ボックスモデル(width,height,margin)
    width: 0;
    height: 0;
    margin: 0 auto;
一番分からなかったのはここから…
「幅も高さも0なのに▼になってる！？」って

▼を作っているプロパティは？

実はボーダーで▼になっているように見せていたんですね
分かりやすくするために以下のような記述にしてみました
    border-style: solid;
    border-width: 20px 20px 20px 20px;
    border-color: #ff0000 #2600ff #00ff37 #d72add;
全て同じ線幅だとこういう風になっています
つまり▼にするには
「border-width」で幅の調整をして
「border-color」で上・右・下・左うち３つを透明(transparent)
という風にすれば良い

▼を任意の位置に持っていく

右側
.fukidashi::after {
    content: "";
    position: absolute;
    left: 90px;
    right: 0;
    bottom: 30px;
    display: block;
    width: 0;
    height: 0;
    margin: 0 auto;
    border-style: solid;
    border-width: 20px 0px 20px 20px;
    border-color: transparent transparent transparent #d72add;
}
上
.fukidashi::after {
    /* 疑似要素を使うときは「content」必ず書く！ */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 90px;
    display: block;
    width: 0;
    height: 0;
    margin: 0 auto;
    border-style: solid;
    border-width: 0px 20px 20px 20px;
    border-color: transparent transparent #00ff37 transparent;
}
左側
.fukidashi::after {
    /* 疑似要素を使うときは「content」必ず書く！ */
    content: "";
    position: absolute;
    left: -90px;
    right: 0;
    bottom: 30px;
    display: block;
    width: 0;
    height: 0;
    margin: 0 auto;
    border-style: solid;
    border-width: 20px 20px 20px 0px;
    border-color: transparent #2600ff transparent transparent;
}
効率的なやり方があったらご教授願いますm(__)m

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-23T17:08:54+09:00

学習進捗状況

感想

昨日からプログラミングの勉強を始めましたが、カリキュラムを

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-23T16:23:42+09:00

getElementByIdの引数は式展開できる！

a=1; getElementById('id${a}');　（※「'」→「`」に変えてください）

JavaScriptでは、文字列をバッククオートで囲み、さらにその中で${変数}とすれば式展開ができます。(こちらの記事でとても分かりやすく書かれています)

そしてこれは、直接出力する文字列だけでなく、getElementByIdの引数として渡すid名でも同じことができます！

たとえば下のコードでは、"id1"というid名を「id${a}」(a=1)という形で取得しています。
cake.html
<html>
<body>

<input type="text" id="id1">

<script>
let a = 1;
document.getElementById(`id${a}`).value = "ケーキ";
</script>

</body>
</html>
実行結果は

ちゃんと取得できています！

注意：「"（ダブルクォート）」ではなく「`（バッククォート）」で囲むこと！

getElementByIdでは基本的に、
getElementById("id1")のように引数をダブルクォートで囲みます。
しかしid名の中で式展開をしたい場合は、ダブルクォートではなくShiftと@ボタンの同時押しで出せる「`（バッククォート）」を絶対使わなければいけません。
また、Shiftと7同時押しの「'（シングルクォート）」は形が似ていますが、これでは上手くいきませんのでそこもご注意を！

以上です。
もしかしたら皆さんにとっては常識なことかもしれないのですが、「出力する文字列ではなくコード中で使うid名でも式展開が効く」ことを作業中に知って嬉しかったので投稿してみました。

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-23T13:53:48+09:00

画像を円形に表示　#object-fit #CSS #Ruby on Rails #Progate

やりたいこと

・画像を円形に表示したい
・画像を表示するスペースに合わせて画像を縮小or拡大したい
・表示する画像の縦横比は変えないで実現したい

経緯

・ProgateでRuby,Ruby on Rails,HTTM&CSSを学習し、現在tweet_appを再現中！
その中でつまずいた箇所の備忘として。

解決方法

①画像を加工　→面倒臭そう・・・なので今回は無視しました
②cssで指定　→今回はこれでやります

まずHTMLで画像を表示します。
HTML
img(src="sample.jpg")
次にCSSで設定していきます。
CSS
img {
  border-radius: 50%;  /* 角丸半径を50%にする(=円形にする) */
  width: 100px;  /* 縦横を同じ値にする */
  height: 100px;  /* 縦横を同じ値にする */
  object-fit: cover; /* 縦横比固定したまま上2つの縦横の範囲内に収まるように配置する */
}
これだけ！簡単！
ただ、
border-radiusを50%にすると円になるのはなんで？
object-fitってなに？ないとどうなるの？
という疑問が湧いてきたので少し調べてみました。

解説

※初心者が調べて解釈した結果になります。訂正・追加があればぜひコメントください！
border-radius: 50%;
・50%の場合、四角い画像が正方形になる
・pxで指定する場合は、widthとheightで指定したpx値の半分にする(100pxの場合は50px)。
・0%（0px)に近づけるほど、円ではなく四角に近づく
・考え方：四隅にくっつく円を4つ作り、直角の代わりに円の一部分（四角と円の接点から接点までの弧）を表示する。円の半径が小さいほど四角に近づき、大きいほど（ただしMAX50%)円に近づく
・Progateでは、border-radiusを使ってボタンの角を少しだけ丸にしていた
width: ◯◯px; 
height: ◯◯px;
・画像の大きさを決める（値が大きいほど大きな円になる）
・幅と高さは同じ値にする（円なので）
object-fit: cover;
・object-fitでは、widthとheightで定めたスペースへの”はめ込み方”を決めることができる
・今回は　はめ込むスペースに合わせて画像を縮小or拡大する、縦横比は変えない、多少カットされても良いからなるべく大きく表示する、の３つを満たしたかったのでcoverとしました。こちらがとてもわかりやすかったです。
・border-radius,width,heightだけでも画像を円にできるが、指定したwidthとheightのpxと画像のpxに差がある場合はおすすめできない（画像の一部しか表示されないor画像がかなり小さくなってしまう）

◆参考サイト
https://www.nishishi.com/css/trim-image-to-circle.html
https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-23T09:13:13+09:00

HTML,JavaScriptについて（自分用メモ）

注意

この記事は、僕Marnyがhtml、javascriptを勉強する際のメモ代わりです。初心者なりにいろんなことをメモしていきます

HTML編

タイトル設定
<!DOCTYPE html>
<title>

</title>
テキスト記入
<!DOCTYPE html>
<body>

</body>
JavaScript編

htmlにjsを組み込む
<script>
ここにいろいろ書く
</script>
ダイアログボックスで表示
alert("表示させるメッセージ");

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-23T08:53:52+09:00

なぜ阿部寛のホームページはベストを尽くさないのか。

はじめに

人気ドラマ「トリック」や「新参者」など数多くのヒット作品に出ている俳優阿部寛さんですが、今絶賛放送中の「まだ結婚できない男」面白いですよね。エンジニアになって知ったのですが、阿部寛さんのHPが有名な事は皆さんにとっては既知の事かもしれません。

もし、私まだ知らないという方には未知なる世界を体験して頂きたいので、是非下記のリンクから見に行ってみてください。

阿部寛のホームページ

敢えて時代の流行り廃りに乗らない「トラディッショナルスタイル」のホームページデザインですが、不要な装飾をしていないコードのため、爆速表示が可能なのです。それが話題になり、阿部寛さんの個人サイトはエンジニア界隈でも「阿部寛のホームページ」として親しまれています。

しかし、今はWIXやホームページエディターでコードを知らなくてもおしゃれなサイトを簡単に作れる時代。
どうして阿部寛のホームページは「ベストを尽くさないのか」。

今日はその理由を、余計なお世話だろうが徹底考察してみたいと思います。
訂正や異論あれば編集リクエストもしくはコメント下さい。

ホームページ作成｜無料ホームページ制作ツール｜Wix.com

なんのためにデザイン(装飾)をするのか

デザインとは、ユーザービリティに関連するものです。ここについて、多くの人は特段疑問を持たないでしょう。
しかし今回デザインが対象の価値を上げる存在なのか、あるいはデザインそのものが価値ある存在なのかという議論は今回置いておくとします。

もし反論のある人がいるとすれば、私はデザインがユーザービリティあるいはユーザービリティを向上させるという理論は曲げようのない真実だと言いたいのです。何故なら、ブランディングや使いやすさなど色んなものがデザインによって向上することができるからです。

一方で、「阿部寛のホームページ」は、流行りという観点でWEBデザインを無視しているように思えます。CSSやJavascriptは当てられておらず、宣材写真も最低限で抑えられているからです。

しかし実際、阿部寛のホームページはユーザーに必要な情報を伝えるという点で本来の役割を果たしています。これは俳優のためのサイトして考えるなら必要最低限の品質を担保していることに繋がります。もちろん、俳優という職業特性も加味しなければいけませんが、、、

では、このサイトの品質が悪いのかと言われると違います。阿部寛のホームページとしては、むしろ良いとすら思えてしまうのです。
その理由については、次項で語ります。

個人サイトの意味

俳優「阿部寛」のホームページを見る人はどんな人でしょうか。これはこの記事のように爆速であるからページを開きにきたという特殊ケースを除いて阿部寛のホームページを見に来ている人のことを指します。

一番多いペルソナは、出演情報について知りたいファンではないでしょうか。新作出演情報知りたいなとか、過去作で出演していた作品を知りたいなどファン達がニーズを満たすためにこのサイトを閲覧します。つまり、個人サイトは、基本的にファンのために存在する。私は、好きな人をテレビで見たいからこのサイトに来ると考えました。

そして時代が変わり、これまで大衆だった人たちがインターネットの即時性のおかげで様々な才能を開花させて、タレント(あるいはアイドル)となることが容易になりました。そうなると、当然ファンができる。ファンはタレントの情報に飢えています。次の更新はいつか、活躍の場はどこか、次に何をするのかが気になって仕方がないのです。

個人サイトとは、そういったファン層のニーズを満たすものであり、彼らが求めたいる「対象の情報」です。だからこそ、阿部寛のホームページは"あれでいい"のではないでしょうか。では、"あれがいい"のは、何故でしょうか。

例えば今日突然、阿部寛のホームページが今風オサレサイトなったらどうなるだろうか。それはそれで良いかもしれないが、悲しくなる人がいるのではないだろうか。そして、ユーザーに混乱を生むのではないでしょうか。

阿部寛のホームページはこれまで沢山の記事で紹介されてきました。紹介のされ方もまちまちです。爆速、速度制限下でも開けるサイト、90年代を彷彿とさせる...なんて失礼な書き方もあります。

そして阿部寛のファン層も様々です。10代20代若者もいれば、40代50代の往年のドラマを見てきた人もいることでしょう。私はトリックシリーズが大好きなんですが、、まあ要は幅広いファンがいる阿部寛にとって、今風でオシャレなホームページだけが正解ではないということです。

インターネットに詳しくない人、高速なネット環境が整っていない人たちにも平等に接することができる。そして、ファン達は自身のニーズを満たしていく。

前述の通り、個人サイトの意味とはファンに情報を発信するためのものである。オーソドックスな方法はブログだし、最近だとYouTubeになるんでしょうか。だが、プラットフォームは変われど、本質のファンという概念に新旧はありません。

阿部寛のホームページは、あえて情報発信という観点に絞って快適さを担保しています。そして、自身の広いファン層にとって最大公約数的に使いやすいであろうトラディッショナルスタイルのホームページ構成になっている。人によっては、これはかなりポジティブで都合の良い見方をしていないと心配ことだろう。

では、情報だけ発信すればよいのか。デザインの意味とはいったいなんなのだろうか。これについて次項で考えていきたい。

CSSやJavascriptの必要性

あえて、端折った言い方をさせて欲しいです。
デザイン、いわゆるcssやjsに代表される装飾物は何故必要なのでしょうか。
情報の理解をより容易にさせるためです。

人類がこれほど知的に進化した要因の1つに、言語と文字の発達は欠かせないでしょう。
これほどのコミュニケーションを確かにできるツールは他にないし、この2つを使いこなせる生き物は、人間以外存在しないはずです。

人類がまだアルファベットを使う前、象形文字という図化したサインを使ってコミュニケーションを図っていました。我々が視覚的情報を理解しやすいのは、歴史的に見ても正しいということです。

だからこそ、単に文字だけの粗野なページよりも色分けされていて、適度にアニメーションが施されたサイトの方が一般論としては使いやすいのです。

以上で装飾をするのは、理解を促すためだというのは持論に対して説明ができたと思います。
では、具体的にCSSとJavaScriptが必要な理由とは何でしょうか。
CSSが必要な理由は、情報と情報の間に適度な距離を保ってあげることだと思います。
家の敷地と同じと考えていいでしょう。
自分の家と他人の家に明確な線がないと、トラブルの元になります。庭はどっちのものだと。
CSSも同じです。きちんと情報をブロックにしてあげたり、並び方を統一し、区画を整備してあげないと混乱してしまいます。Aという情報とBという情報に柵を作ってあげないと、見てくれる人たちに混乱を与えかねません。
内容によっては見ればわかるよってものもあるだろうけど、そんな構造のサイトはあまりよいとは言えません。

ではJavaScriptの必要性はどうでしょうか。
機能が沢山あって、それによって説明する事は変わるでしょうか、僕の理解範囲で話をさせて欲しいです。
JavaScriptは、アコーディオンやグラフを動かしたりするようなアニメーションを装飾する時にも使います。

サイトに動きがあることによって、私たちは製作者の意図する内容をすぐに理解することができるし、深く内容理解できたりします。これは副次的な意図になってしまいますが、サイトを見ていて楽しいと認識させる要素に一役買っている大きな存在です。

統計などの一見すると、理解するのに時間がかかりそうな内容や取っ付きにくい内容を見やすくしてくれる。心的ハードルを下げてくれる。とても便利な要素なのです。

阿部寛のホームページはWebサイト界のらくらくホンなのかもしれない。

話が脱線したので元に戻すと、視覚的に直感性が優れているものほど私たちは使いやすいと認識します。iPhoneが使いやすいのも同じでしょう。何をするかアイコンで選択する「操作の速読性」は、ガラケーの頃にはあり得ませんでした。(勿論、ガラケーは絞られた機能をガラケーという枠組みの中で使うため、使い方を知っている人にはとても使いやすいものです。)

ガラケーはまずメニューという階層のなかに沢山の機能があって、例えば僕の祖父なんかはこの階層の理解にとても苦労していた。逆にらくらくホンみたいに、シンプルにすることで迷う事も悩む事も無くしてあげられる。

ある意味で阿部寛のホームページというのは、使う人のニーズに寄り添ったWeb界のらくらくホンなのかもしれないですね。

本質的ニーズを捉えておく

阿部寛とファンにとっては、余計なお世話な記事だったかもしれません。しかし、このサイトの考察するとエンジニアがWeb開発をする時に何を意識してサービスを作るべきなのか見えてこないでしょうか。

時に「流行っているから」、「こうした方がいいから」と無意識的に、もしくはエンジニアが恣意的ひサービス開発をしてしまっていないでしょうか。

なかなかユーザーのペルソナを考えたり、つくりたい物に対して本質的に何を求められているのか分からなくなる事もあるでしょうが、折れずにに顧客ニーズの本質を追いかけて欲しいです。

エゴに消費者を巻き込んではいけない

エンジニアと経営層の間で衝突するというのは、よく聞く話かもしれません。この類の記事は多く出ますし、気になる内容です。確かに経営層の人の中には、十分なITリテラシーを持っている人が足りていないケースもあるかもしれません。

ですが、経営層には経営層の考えがある事も事実です。彼らの意識は、勿論儲かるか儲からないかという軸になりますが、サービスをひろめたいという点では協力できると思います。

大切なことは、消費者をエゴに巻き込まないことです。

なぜ阿部寛のホームページはベストを尽くさないのか。

いかがでしたでしょうか。
今時、ベストを尽くせばどれだけでもオシャレでカッコいいサイトを作る事は出来ます。
それは、お金の問題ではありません。Wixなどで作ることだって可能です。

でも、阿部寛のホームページはそうしないんです。
それは今時のサイト構成がユーザーにとってベストとは限らないからです。
あえて時流に流されないことで、阿部寛のホームページは多くの人の心に、デザインをしないデザインという新たなメソッドを打ち立てることに成功しました。

そして、私たちエンジニアは常にユーザーのためにベストを尽くさなければならないのではないでしょうか。

　 Tweet
Qiitaで続きを読む

20191023のHTMLに関する記事は10件です。

年末まで毎日webサイトを作り続ける大学生 〜5日目 ドラッグ&ドロップで簡単なゲームを作る〜

はじめに

サイトURL

やったこと

こだわったところ

感想

参考

Progateでの学習メモ HTML,CSS編

HTMLとCSS

HTMLに触れてみよう！編

CSSに触れてみよう！編

レイアウトを作ろう！編

ヘッダーを作ろう！編

フッターを作ろう！編

コンテンツを作ろう！編

お問い合わせフォームを作ろう！編

以上

参考

【初心者向け・基本】HTMLの階層とタグについて

HTMLの階層について

タグの種類

プログラミング学習の進捗状況

感想

学習

課題

改善策

HTML CSS 吹き出しを作ろう

まずはhtml

次はcss

●の丸みを決めているところは？

▼のところってどうなってるの！？

content

▼の位置を決める(position,left,right,bottom,display)

ボックスモデル(width,height,margin)

▼を作っているプロパティは？

▼を任意の位置に持っていく

右側

上

左側

学習進捗状況

感想

getElementByIdの引数は式展開できる！

a=1; getElementById('id${a}'); （※「'」→「`」に変えてください）

注意：「"（ダブルクォート）」ではなく「`（バッククォート）」で囲むこと！

画像を円形に表示 #object-fit #CSS #Ruby on Rails #Progate

やりたいこと

経緯

解決方法

解説

HTML,JavaScriptについて（自分用メモ）

注意

HTML編

タイトル設定

テキスト記入

JavaScript編

htmlにjsを組み込む

ダイアログボックスで表示

なぜ阿部寛のホームページはベストを尽くさないのか。

はじめに

なんのためにデザイン(装飾)をするのか

個人サイトの意味

CSSやJavascriptの必要性

阿部寛のホームページはWebサイト界のらくらくホンなのかもしれない。

本質的ニーズを捉えておく

エゴに消費者を巻き込んではいけない

なぜ阿部寛のホームページはベストを尽くさないのか。

日付別

タグ一覧

年末まで毎日webサイトを作り続ける大学生〜5日目ドラッグ&ドロップで簡単なゲームを作る〜

Progateでの学習メモ　HTML,CSS編

a=1; getElementById('id${a}');　（※「'」→「`」に変えてください）

画像を円形に表示　#object-fit #CSS #Ruby on Rails #Progate