カテゴリー: 日記

Home / カテゴリー: 日記

9章まとめ

今回は9章をまとめました。残りはお問い合わせフォームとサイトページのアップロードの仕方になりますのでまとめません。つまり今回でこの本の攻略は最終回です。後は実装編。

floatプロパティ

画像にテキストを回り込ませる為にfloatプロパティを使います。

<p class =”float”>

float img{

float=left;

padding-right

}

フロートは解除しなければそのままになってしまうのでclearプロパティで解除します。


テーブルの整形

書式

<table class=”info”>(HTML)

table.info{

border-collapse:collapse;

border:lpxsolid#b78c5f;

}(CSS)

これでテーブルに記述した部分は線で囲まれます。

table.info th, table.info td {

paddong: 8px 8px 8px 8px;

border: 1px solid #d6c2b5;

text-align: left;

vertical-align: middle;

}

table.info th{

    background-color: #c99e73;

    color: #442220

}(CSS)

これで表の項目の部分の色を変えて項目ごとに線を引く事が出来ました。


borderショートハンド・プロパティ

書式

border: 太さ スタイル 色;

これで一括で指定出来る。


2コラムレイアウト

書式

.menu_block{

    overflow: hidden;

    zoom: 1;

}

.menu_left {

    float: left;

    width: 280px;

    margin-right: 20px;

}

.menu_right{

    float: left;

    width: 600px;

}(CSS)

これで縦に一列に並んでいた写真のレイアウトを変更できる。


overflowプロパティとzoomプロパティ

overflow プロパティを使ってもフロート解除ができます。zoomプロパティはインターネットエクスプローラ6/7でoverflowプロパティが動作しない場合があり、zoomプロパティが書かれていると動作することがあるとか。

 ちなみにzoomプロパティは本来ボックスを拡大縮小するためのプロパティです。しかし本来の機能で使われることはあまりない模様。

参考文献

スラスラわかるHTML&CSSのきほん 第2版posted with ヨメレバ狩野 祐東 SBクリエイティブ 2018年04月16日 楽天ブックスAmazonKindle

前記事

スマホ(iPhone用)のキーボード買ってみた。

2019年9月15日 | アフィリエイト | コメントはまだありません

今回はスマホ用のキーボードを購入したので、そのレビューと使い方、欠点について書いていきます。

見た目

利点

購入前から予想は立てていましたが、スマホのソフトウェアキーボードで画面が半分埋まり、見えずらい・打ちにくいという苦しみから解放されました。私はスマホで入力する時はいつも携帯打ちではなくキーボード打ちだったのでとっても助かりました。タイピングが得意な人は尚のことかもしれません。

更にブログの執筆のためだけにパソコンを持ちあるかなくても良くなりました。キーボードは鞄のスペースを少々取るかも知れませんがキーボード200gとノートパソコン2000gでは10倍も質量が変わります。

荷物が減っただけでなく、今までは外出先で調べたいことがあった時にわざわざスマホのロックを外したり、WiFi環境のあるところにいなければなりませんでした。しかし、キーボードのショートカットキーからSafariを開きそのままキーボードで入力できます。

コピー&ペーストもショートカットと→キーを使って簡単に出来ます。

PCの場合起動時間を待たなければならず隙間時間に起動することができませんでしたが少ない荷物で手軽にどこでもブログの執筆ができるようになりました。


欠点

LINEなどのSNSを使っている時に送信ボタンを押す時や、文章を入力している時に手動でスクロールするためにキーボードから手を離さなければならないといったところでしょうか。トラックポイントが無いものを使用しているのでそこは億劫に感じました。

それ以外には、今もノリノリでおnewのキーボードを使ってタイピングしていますが、小型のキーボードな分、パソコンのキーボードのタイピングの時よりタイプミスが多くなっているように感じます。

キーボードはものによっては充電式なので充電するために鞄からとりださなければなりません。スマホのとなりで充電させておけばいいのでさしたる問題ではありませんが。

まとめ

スマホ用キーボードは

  • いつもスマホでキーボード打ちしている人、又はスマホでのタイピングを煩わしく感じている人。
  • 主に入力作業をする為に外でノートパソコンを持ち歩いている人。

こういった人にお勧めです!

今回買ったもの

iPad&iPhone6s 用 マルチキーボード Bookey Plus ブラックposted with カエレバ楽天市場

今回は7章と8章の要約をしていきます。

7章要約

今回はCSSの基礎なので実習だったところだけまとめていきます。

外部CSS

CSSは外部ファイルに記述することが一般的なので外部ファイルに保存します。(その方が管理しやすい。)

HTMLとCSSをリンク

書式:<link rel=“stylesheet” type=“text/css” href=“(CSSファイルのパス)”>

8章要約


プロパティ

CSSにはさまざまなプロパティがあります。

background-color:背景色指定。

color:色指定。

font-size:フォントサイズ。文字の大きさ。

line-height:行間の幅を指定する。

図1 ボーダーのプロパティ
図2 ボーダーのプロパティ(続き)
画像は「スラスラわかるHTML&CSSのきほん 第2版」より引用

displayプロパティ

これを使って一列に並べるなど整列が出来る。

書式

display:inline;(横一列になる)


list-style-typeプロパティ

・の表示を消したりできる。

書式

list-style-type:none;(・を表示しない)


background-imageプロパティ

背景を変えられる。画像のパスはCSSファイルから相対パスを指定します。

書式

background-image:url(画像のパス)


カスケード順序

タイプセレクタ<classセレクタ<idセレクタ

classセレクタやidセレクタが含まれているとタイプセレクタ(id属性やclass属性が記述されていない)よりもそちらを優先して適用されます。


書籍紹介

スラスラわかるHTML&CSSのきほん 第2版posted with ヨメレバ狩野 祐東 SBクリエイティブ 2018年04月16日 楽天ブックスAmazonKindle

次記事

前記事

6章の要約

テーブル(表)

<table><tr><td>(<th>)のタグを使います。

書式:

<table>

<tr>

<td>(char)</td>

</tr>

</table>

CSSを適用しない限り<th>の中は太字で表示される。<th>タグは見出しで使われます。

<tr>に含まれる<td>の数は<table>タグの中で同じ数になるようにします。

序列リスト

書式:

<ol>

    <li>(char)</li>

    <li>(char)</li>

</ol>

非序列リストと使い方も同じ。

違いはブラウザ上で・を表示するか、番号をふるかです。


宣伝

参考書籍

スラスラわかるHTML&CSSのきほん 第2版posted with ヨメレバ狩野 祐東 SBクリエイティブ 2018年04月16日 楽天ブックスAmazonKindle

前の記事

次の記事

Twitter

今回はHTMLの勉強を進めたのでまとめていきます。

スクリプトファイル?が複数だったり、進捗の取り方も雑なので、今回は学んだことをブログにまとめていきます。(実は写しただけで理解していない)

5章の要約

内部リンク

書式:<a href=“(URL)”>テキスト</a>

<a>:アンカーリンク。<a></a>で指定されたWebページに移動する機能を有する。

href:属性。ハイパーテキストを参照する。

外部リンク

書式:<a href= “http://(https://)” target=“_blank” >

target=“_blank” :リンク先のWebページを別タブで表示させる。

http://(https://)から始まるパスは絶対パスと呼ばれます。

画像

書式:<img src=“” width=“” height=“” alt=“”>

alt属性は画像データが取得できない時に表示するテキストを指定します。

フッター作成(文字実体参照)

フッターにはコピーライトを記述する。

書式:<p>&copy;Copyright ~

この&copy;はサイト上で©️を表示します。

要素のグループ化

要素のグループ化は<p>タグや<img>を<div>で囲みます。(<div>は<body>の中でしか書けない)

要素のグループ化をすることによってCSSを適用しやすくなります。

id属性,class属性

これらを付与することによってCSSの適用に近づきます。

書式:<div class=“wrapper”>

これはタグに決まった名前をつけることができます。決まり事としてid属性は一つのドキュメントの中で同じ名前のid属性は一度しか使えません。

コメント

書式:<!– コメント–>

このタグの中にはメモ書きができます。

宣伝

参考文献

スラスラわかるHTML&CSSのきほん 第2版posted with ヨメレバ狩野 祐東 SBクリエイティブ 2018年04月16日 楽天ブックスAmazonKindle

前記事

次記事

久しぶりのHTML

一年半近く前に学校で習った様ですがすっかり忘れてしまいました。人間は使わないことや繰り返したことのないことは忘れるってエビングハウスさんが忘却曲線であらわしてますね。

前回は書籍でいうところのChapter1の4節をやりましたが今回はChapter3とChapter4をまるっと攻略していきます。

詳しい説明はあまりしないので説明が欲しい場合は参考書籍のリンクより書籍を購入して頂けると嬉しいです。

Chapter3

下準備

専用のファイルを作ります。

初期設定なので少し設定を弄ります。

今回記入するコードを「index.html」という名前で保存します。

すべてのHTMLドキュメントに必要なタグ

<title>タグと<meta>タグ

多分<mata>タブが使う文字コードについてで<title>タグがそのままの意味。

Chapter4

見出し

見出しレベル(「Chapter4」と「見出し」の違い。文字の大きさ。)を変更できる。

段落

<p></p>で囲むと段落になる。中の文はあらかじめ別のところで書いておいてコピペすると楽。

非序列リスト

<ul>タグが非序列リストで<li>がその要素。<li>は必ず<ul>や<ol>(序列リスト)で囲わなければいけない。


宣伝

参考書籍

スラスラわかるHTML&CSSのきほん 第2版posted with ヨメレバ狩野 祐東 SBクリエイティブ 2018年04月16日 楽天ブックスAmazonKindle


この記事の前後

前回

次回

閲覧数を伸ばしたい!

気になるSEO

私はよくブログの統計情報を見るのですがsteamVRをスマホでやった記事が特にみられていることに気が付きました。アフィリエイトブログの本には継続的な閲覧数を得るには検索サイトの順位が高くなければいけない(SEO対策)と書かれており、「SteamVR スマホ」とGoogleで調べたところ2ページにありました。

改めましてSEOの大切さを理解したところで、ではどうしたら検索順位が上がるのか読んで調べたところをまとめていきます。

SEO対策

まず重要なのが「誰に読まれたいか」。

誰かのためにと漠然としたターゲットでは駄目で、「こういった人に読まれたい」といった。狙いがあると言いようです。因みに私は同じような悩みを持つブロガーに読まれたいと思って書いています。

それ以上に重要な「キーワード」。

検索する時に例えばSteamVRをお金をかけずにやる方法を知りたかったら「SteamVR お手軽」と検索を掛けますよね。その検索キーワードです。

SteamVRだけだと競争相手も多く、他のVRゴーグルを使った記事とも検索順位を争うことになってしまいます。そうすると私のような弱小ブログに勝ち目はありません。なのであまりメジャーじゃないキーワードや3語以上のキーワードを狙います。この記事であれば「ブログ 儲かる 書き方」とか。

ソーシャルメディアの有効活用

YouTubeやTwitter、Facebookを活用します。中でも特にYouTubeはSEO対策には効果は抜群で、上位表示されやすくなります。私のブログでも数か月前に投稿した動画付きの記事が未だに閲覧数を伸ばし続けています。動画を貼ることでブログの滞在時間が増え、動画の内容を文字に起こすことで文章量が長くなります。


参考書籍

見込み客が増える儲かるブログの書き方講座

posted with ヨメレバ武藤正隆 ソーテック社 2015年07月11日

楽天ブックス

Amazon

Kindle

ブロガーとして基本中の基本(?)HTMLを勉強します。これを勉強すればブログをもっと華やかにできるはず。

ソフトのインストール

テキストエディタのインストール

OS標準の「メモ帳」でも構いませんが

今回はTerapadというテキストエディタをインストールします。

以下はダウンロードサイトのリンク

https://tera-net.com/library/tpad.html

ダウンロード出来たらダウンロードしたファイルを実行してさくっとインストール。

FTPクライアントのインストール

FTPクライアントとはHTTMで作ったWebサイトをサーバーにアップロードするためのソフトです。

FileZillaをインストールします。以下はダウンロードサイトのリンクです。

https://ja.osdn.net/projects/filezilla/

ダウンロードする際は各OSまたはビット数に合わせてダウンロードしてください。windowsは64bitと32bitで違うので注意です。

ダウンロード出来たらファイルを実行してインストールします。


今回はここまでです次回からは本格的にHTMLのコードについて勉強していきます。

参考書籍

スラスラわかるHTML&CSSのきほん 第2版posted with ヨメレバ狩野 祐東 SBクリエイティブ 2018年04月16日 楽天ブックスAmazonKindle


次回

https://magurotanblog.com/?p=439

学習記録 8/23 三平方の定理

2019年8月25日 | 勉強 | コメントはまだありません

ブログ(毎日投稿)だからやらなきゃいけないという使命感の元続いています。見たところプログラミング関連の記事が伸びていますがこちらの方が日常的に取り組みやすく投稿しやすいです。いつもの投稿時間に間に合わなければ原本をスキャンしてそのまま貼れますし楽です。まあ、そんなことはしませんが。


今日の目標 三角比!

時間割(予定)

  • 14:30-14:40 因数分解
  • 14:40-15:30 三平方の定理(中学数学)
  • 16:00-17:30 三平方の定理(中学数学)
  • 18:00-19:30 三角比(数学Ⅰ)
  • 20:00-21:30 三角関数(数学Ⅱ)

わからなかったところ

・三平方の定理

基礎中の基礎だけど頭に入ってなかった。

例AD//BCの等脚台形ABCDでAB=5√2,BC=15,AD=5で面積を求める。

三角形(5×5×1/2)×2=25

長方形5×5=25

25+25=50


上で座標が0の点Aと5の点B


この後やる内容を英単語に変更しましたがつかれたのでそのあとは家に帰りました。(いつも予備校で勉強してる。)

時間割(結果)

  • 14:30-14:40 因数分解
  • 14:40-15:30 三平方の定理(中学数学)
  • 16:00-16:50 三平方の定理(中学数学)
  • 16:50-17:30 英単語

夏休みは勉強もプログラミングもMMDモデル作成もしようとして失敗したのでここから少しずつ勉強に力を注いでいきたいです。

前回

https://magurotanblog.com/2019/08/23/学習記録 7-21/