saya's-blog

森田ゼミ　5期生のゼミブログ

インターン⑦レスポンシブデザインとグリッド

レスポンシブデザイン

 

レスポンシブデザインとは、ブラウザ・サイズに合わせて表示すること。

スマホフレンドリーといってスマホの画面サイズに合わせた表示は必須である。Googleの検索エンジンに影響する。

 

レスポンシブの実装

 

ｃｓｓでも可能だが、ゼロからの記述は面倒なため、ライブラリという完成コードを使うと良い。

 

完成コードがつかえるのは、オープンソースという考え方がもとがあるからである。オープンソースとはみんなが使えるように情報などを提供することである。これによって、効率的にできる。

 

 

グリッド

 

グリッドとは格子状の線をさし,デザインで余白やレイアウトを統一的にするために活用される。ほとんどのサイトで使われており、見やすさに関わる。

 

行　row

列　colome　カラム

ｆｒは単位

 

デザインについて

 

色の組み合わせを提案してくれるサイトでカラーホイールというサイトがある。

 

モノクロマティック＝主張を抑える。

ドライアド＝コントラストがはっきり。日本人好み

補色＝互いに補う

正方形＝色々、組み合わせるのに適している。

 

ＣＩ・ＶＩ

企業の象徴となる、シンボルマークやブランドロゴの色と同じ色をサイトで、メイン色として使う。

 

 

 

 

 

 

インターン⑥

年明け、初めのインターン。

久しぶり過ぎて今までやったことを少し忘れていた。

ブログを見返すことで、すこしづつ、記憶を取り戻しました。笑笑

ブログを書いていてよかった。

 

まず、タイピングをした。

冬休みの間、たくさんやったので完全にキーボードを見ずに打てるようになった。

前は、ブラインドタッチで70点だったが、今は、170点ぐらいとれるようになった。これからも継続して頑張りたい。

 

 

 

今回は、divのクラス分けを習いました。

 

同じセレクタだけど、違うスタイルにしたい場合、divに名前をつけ、クラス分けし、それぞれに、指示を出すことが出来るという仕組み。

 

例えば、

<div class=”navigation">

<div classaa="main">

など、””の間は、自分で自由に名前を付ける事ができる。

中身が分かるような名前を付けると良い。

 

さらに、細かく、スタイルを指定したい場合、

div.navigation h1{

                            text-aligh:center ;

}

 

などと、書き込めば指定することも可能。

 

しかし、この細かく指定する作業を行って思ってことがあまり、細かく指定しすぎるとせっかく、ｃｓｓという便利なものを使っているのに、ｈｔｍｌで毎回プロパティを書き込むようなことと同じではないのか。。。？と思った。

 

まだ謎だが、もっとやってく内に分かるのだろう。

 

 

もうひとつ、レイアウトについて学んだ。

 

boder ：　枠線

margin：　枠の外側の余白

pudding：　枠の内側の余白

 

値の指定は、ｐｘ、％、autoで行う事が可能、

 

％は、スマホやパソコンで見る場合画面のサイズなどが変わるがそれに対応できるので、良い。

 

 

キャッシュについて、

キャッシュとは、とは、ブラウザーなどが、表示したウェブページのデータを一時的にコンピューターに保存しておく機能だ。 次に同じページにアクセスしたときに、インターネット上のデータではなく、保存されたデータを参照するため、すばやく表示できるものである。便利だが時々、消去しないと重たくなり、ウェブが更新されてもそれが反映されなくなったりする。

 

ｖｓｃで保存されていてもウェブにうまく反映されない場合、キャッシュを消去するか、または、シークレットモードや、in privateなどのキャッシュが無いページで見ると良い。

 

 

 

今回の感想

やりたいページの構想などがあってもそれを形にできないのがもどかしいと思った。また、習う事が多くなるにつれて、エラーの数も多くなるが自分で出来るだけ解決できる力を身に着けていきたいー！来週も頑張ります

 

 

インターン⑤

こんにちは。今日で、インターンも5回目に突入しました。

 

タッチタイピング

新しいファイルをつくる

入れ子構造をつくる

ＣＳＳファイルの作成

ＣＳＳファイルとは

 

タイピング

まず、毎回タイピング選手権を行うのですが、今回もあまり、点数を伸ばすことが出来ませんでした。

 

タイピング練習はたまに行うのですがまだまだ足りないようで毎日やるべきだと痛感しました。タイピング練習をしてて思うのが、知ってる言葉と知らない言葉を打つスピードの違いが出るし、日本語を打つのと、コードを打つのでは、全然違ってきてそれもまた難しいと感じました。

　また、私は正確性にかけるているのだろうなと思いました。ブラインドタッチタイピングは難しい！ですが、3月ごろには、250点ほど取れるように頑張りたいです！

 

 

 

新しいファイルを作る

新しいファイルを作るところから行いました。

index2.thmlファイルを自分のディレクトリ内に作る。

<head>タグ内に以下のコードを記述

<link rel="stylesheet" type="text/css" href=".style.css"/>

この時に、typeとhrefの前にスペースを入れること

 

（、、、このコードを埋め込むことで、ｖｓｃの中にあるhtml2とstyle.cssという二つの異なるファイルが結合というか、うまく繋がったということだろう。？？）

 

 

 

入れ子構造を作る

<div>

　　<h1>タイトル</h1>

            <p>文章<p>

</div>

<div>

        <h1>タイトル<h1>

        <h2>見出し<h2>

            <p>文章<p>

</div>

 

同じタグどうし、要素どうしで先頭をそろえて書く。

常に、見やすいコードを書く意識を！

 

 

 

 

ＣＳＳとは、

html内の要素に対して、統一的な規定を行うことが出来る言語。

一度コードを指定すると、同じ要素のタグに何度もプロパティを打ち込む必要がなくなる。

イメージとしては、htmlが主な外の枠組みを造り、中を整えるのがＣＳＳの役割。

 

 

 

 

 

ＣＳＳの書き方

 

h1 {

   　    color : red ;

}

 

大かっこの前は半角スペース

改行してプロパティと値の入力

閉じるときの大カッコの前はスペース不要

 

 

 

ブログを書いてる時も思いましたがコードを入力するのに時間がかかりすぎ！

<>などの記号の位置を正確に把握し速く打ち込めるようにせねば！！！

タイピング頑張ります！

 

今日はこれで終わりです！お疲れ様でしたm(__)m

 

 

 

 

 

 

KATインターン④

今回は4回目のインターンでした！やっと慣れてきました。

まず、先週出された課題について、、

 

１．画像の挿入

katのフォルダの中にimgのファイルを作る。好きな画像をそのファイルの中にimageと名前をつけて保存。

 

ftpのサーバーの方にもimgファイルを作成する。

タグは、<img src="./img/imge.jpg">

大きさを変える場合は、上のタグの中にwidth="240px"height="180px"を入れる、　（数字は自由）

※画像が表示されない場合、確認したいこと

・ファイル名が間違っていないか、

・ファイルにきちんと画像が保存されているか

 

２.　URLの挿入

<a href="URL">画面に表示したい文字</a>

 

※　URLの部分は、表示したいURLを入れる

 

 

今回、習った事

１．リストを作る

 

リストのタイプは2タイプある！

<ol><li><li></ol>　　このタイプは

１．　　

２．　　と数字で表される。

 

<ul><li><li></ul>  　　これは、

・

・　　　と表示される

 

※　liタグには、閉じタグなし！

 

２．動画の挿入

共有、埋め込み、コードコピペの順で行う。bodyタグ内の好きな所に入れる。

 

３．人間が美しさを感じる比率

 

黄金比１：1.618

白銀日１：1.414

 

４．ブロック要素とインライン要素

 

ブロック要素とは、ページの内容をかくブロックに分けて表示するためのものである。インライン要素は、ブロック要素の中にあり、テキストや画像などを表示するためのタグである。

 

ブロック要素である<div>を多く使う事が主流であり、見えやすいページを作ることが出来る。

 

５．表をつくる

 

<tr> 行

<th>見出し

<td>セル　（データなど）

 

1行で書きたいことは、<tr>で囲む。

全体像を把握するのが難しかったので調べてみました。

www.sejuku.net

 

まとめ

文字を表示するだけでも、色やサイズを指定などを行うため、初めの頃よりも打つコードが長くなってきました。ですが、長くて複雑に感じるコードもｈｔｍｌが基本入れ子構造という事をおさえれば、良いのだろうと感じました。

基本をしっかり押さえたいです。

 

また、私がミスをするときは基本、コードの見落とし、見間違えなので気をつけたいです。笑

 

次は、ｃｓｓに入るらしい。全く分からないけど、楽しみです！

KATインターン③

今回は、文字の大きさと色を変える方法を習いました。その作業の方法とやった時の感想をまとめたいと思います。

 

そのまえに、、、

プログラミング言語について少し学びんだので書こうと思います。

 

まず、プログラミング言語とは、機械と会話するための言語である。htmlは厳密にいえばプログラミング言語ではない。プログラミング言語は、ｐｈｐやｓｗｉｆｔ、pythonsなど様々なものがある。

プログラミング言語は機械と会話するための言語と聞いて、プログラミング言語は今は、特別な言語と思われがちだし、私も実際そう思うけど、これからは、英語ぐらい重要な言語になってくるかもしれないなと思いました。

 

では、本題に入ります。

文字の色の変え方について、

 

文字の色を変えるには、<font color="#ffffff”>白</font>というタグを使用する。

 

#ffffffの部分をカラーコードという。

カラーコードは、０に近いほど黒く、ｆに近いほど白に近い色である。

数字が多いほど、原色に近く、文字が多いほど淡い色になる。

 

次に、文字の大きさの変え方について、

文字の大きさを変えるには、<font size="1"></font>というタグを使用する。

 

色とサイズは普通、まとめて書く、

<font size=”2" color="#ffffff"> 

 

他に習ったタグ、

太字       <b>太字</b>

強調　　<strong>強調</strong>

 

背景色を変える方法

<body bgcolor="#ffffff"></body>のタグを使用する。

 

この作業をするにあたって、またてこずりました。

これは、body本体に色をつける作業なので、</head>の下の<body>タグを編集して、

<body bgcolor="#ffffff">を打ち込まないといけなかったのですが、<body>タグの下に新しく、<body bgcolor="#ffffff">これを打ち込んでいてエラーばっかり、出していました。反省です。

 

（まとめ

今回も私にとっては少し難しく、順調にはいきませんでしたが、コードを打ち込んでそれが画面上にサイトとして見れた時の感動は大きかったです。へこみますが、色々間違えながら前に進みたいと思います。頑張ります！

 

 

 

（画像をを入れる作業については週末行うので、来週書きます。すみません）

 

 

KATインターン②　

2回目のインターン！ 

 

 

少しだけ、前回のおさらい

なぜ、サイトが見れるのか？

 

作ったサイトをソフトを用いて、サーバーにアップロードすることで、ネット上で閲覧できるようになる。

サーバーに置く事が大事。

 

ftpのアプリ使い方

接続したら、左がローカル。右がサーバー。

自分の名前書いてあるフォルダ開く

 

 

 

今回行ったこと

  • コーディングの仕方（主に、閉じたぐ）
  • ファイルのアップロードの仕方
  • 自分が作ったサイトをネット上で確認

 

サイトの作り方

  1. デスクトップフォルダを作成。名前もつける
  2. ｖｓｃを開き、open folderを押して、先ほど作ったファイルを選択。
  3. ニューホルダをクリックして　index.html　と入力する
  4. ｆｔｐを開き、ローカルから、サーバーにドラッグアンドドロップ

 

 

 

コーディング

コーディングは、visual studio code　(vsc) というコードエディターを使って行いました。

 

  • コーディングに使われているこの記号<>これを、タグという。
  • タグに挟まれている文字には、それぞれ意味がある。
  • 一番上にあるのは、宣言文といってどの言語を使って、運用するかを宣言するもの。
  • 真ん中にあるbodyタグはページの中身を示すもの。
  • <p>文字</p>　　と打つと、文字が出る。タグは半角。

 

自分で好きな言葉を打ち込み、サイトを作ってみようという作業。

実際にやってみると、そんなにステップは多くは無かったにも関わらず、一人で完成できませんでした。

 

一つ目の原因は、タグの記号<>が間違っていたことです。私は、これ〈〉を打ち込んでいました。

<>この記号は、私がこれまでに使ったこともなく、存在すら知らない記号でした。

改めて、キーボード上にある記号や文字を把握し、使いこなせないといけないなと反省しました。

 

2つ目の原因は、書き込みたい言葉（朝だ）にもタグをつけていたことです。

正しくは、<p>朝だ</p>でした。

私は、すべてにタグをつけると思い込んでいました。

そこで改めて、タグの意味を調べてみました。

 

タグとは、プログラムのソースコードを囲むものであることが分かりました。

ようやく、さっき上で書いた『タグで挟まれている言葉には意味がある』という言葉と意味が繋がり、理解出来ました。

 

あと、<p>の意味もついでに調べてみました。

「P」とは、段落を指定するためのタグで、「P」とは「Paragraph」の略です。<p>～</p>で囲まれたテキストは1つの段落であることを示します。

html-coding.co.jp

終えての感想。

この作業だけでかなりてこずって、みんなの時間を奪ってしまった事と、自分の能力の低さを感じて、すごくきつかったです。

 

アップロード

やっと、コーディングを終えたところでｆｆｆｔｐというソフトを使って、サーバーにファイルをアップロードしました。

 

アップロードの作業は、先ほどよりも簡単で、ネット上にすぐアップロードできました。あまり、アップロードした感覚は、無かったです。すごく簡単に世の中に情報を届けられる素晴らしさと、ワンステップで情報が漏れてしまうかもしれない恐ろしさの両方を感じました。

 

サイト検索

実際に自分のサイトを検索して見に行ってきました！

本当にサイトが作られていて感動しました。

コーディングの時、9行ほど、コードを打ち込んだのに実際に表示されているのは、私が打ち込んだ3文字の言葉だけのシンプルというよりさみしい感じのサイトでした笑笑

私たちが日ごろ見ているサイトはどれほどのコードが打ち込まれているのか考えただけでもゾッとします。

 

 

初めてだったので長々と書いてしまいましたが、これで終わりにします！

お疲れ様でした(__)

 

 

 

 

 

 

 

アドアルファさんと2回目のミーティング

今回は、アドアルファさんとの2回目のミーティングをしたので、その時の思考の整理をしたいと思う！（ミーティングから1週間以上あいてしまった事に反省。）

 

 

今回のミーティングでは、プロジェクトの方向のすり合わせをした。しかし、私たちが考えてきた方向性と相手が求めているものはかなりずれていた。

 

【オフィスを家化する何かを作って提案せよ】という、テーマから、

 

家のような安心感と癒しがあり、ほどよくリラックスしつつも集中できる場所が必要なのでは、、と考えた。

 

集中とリラックス

そこでオフィスと家の違いを観察し、それぞれの特徴を捉えた。

そこから、考えたのは、個人スペースの有無だった。

それを、提案するはずだった、、、、、、

 

 

 

 

アドアルファさんがテーマに対して考えているものは、集中とコミュニケーション。

このコミュニケーションはリラックスと関係がないわけではない。

 

リラックスも様々であり、ここで求めているリラックスは、緊張せず、コミュニケーションがとれるということ。

 

理想のオフィスは、日頃からアウェアネスの状態をつくり、コミュニケーションが生まれ、コラボレーションが起こり、イノベーションが起こせる場というものだった。

 

なぜなら、イノベーションを起こそうと、会議を開き各部署からあつまり、アイディアや技術をコラボレーションさせようとしたところで、緊張感からうまくいかない。

 

したがって、日ごろのリラックスした状態からコミュニケーションを生み、そこからコラボが生まれ、イノベーションに繋がる環境を用意することが大切らしい。

 

 

テーマの背景は理解できたが、それで？、、、私たちが何をすべきか、、って最終的になった。

 

とりあえず、人が集中している時の状況とリラックスして話し合える場、について観察などをしながら考えていきたい。

 

 

ただでさえ、カオスなミーティングだったのに1週間以上あくと、ミーティングの内容がほとんど思い出せない。当たり前なんだけど、、、、、、(´;ω;｀)

絶対に今度から３，4日以内に書く！何回も言われてきたことなのに。。。