元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事とブログのカスタマイズについて書いています。

 menu

CSS入門(box-sizingプロパティの使い方)

box-sizingプロパティの基本的な使い方について書きます。box-sizingプロパティは、要素の幅と高さをどのように計算するのかを設定するプロパティです。つまり、要素の幅と高さにパディングとボーダーを含めるか含めないかを指定します。具体的な書き方は、…

ブラウザとウェブサイト制作の関係

ウェブサイトを閲覧するときに欠かせないブラウザについて書きました。ブラウザの種類、ブラウザシェア、ブラウザとウェブサイト制作の関係について触れています。 ブラウザとは ブラウザの種類 IE(Internet Explorer) Edge(Microsoft Edge) Safari Firefox(…

CSS入門(border-radiusプロパティの使い方)

border-radiusプロパティの基本的な使い方について書きます。border-radiusプロパティは、要素の角を丸くするプロパティです。具体的な書き方は、サンプルコードを確認してください。 記述の仕方 border-radiusプロパティの基本情報 サンプルコード 4つの角…

CSS入門(borderプロパティの使い方)

borderプロパティの基本的な使い方について書きます。borderプロパティは、要素に枠線を付けるプロパティです。具体的な書き方は、サンプルコードを確認してください。 記述の仕方 borderプロパティの基本情報 サンプルコード 表示例 まとめ 記述の仕方 /* …

CSS入門(z-indexの使い方)

z-indexの使い方について書いています。z-indexで、要素の重なり順を指定します。「position」とセットで使います。 記述の仕方 下準備 表示例 z-indexで重なり順を指定する 表示例 まとめ 記述の仕方 /* 記述例 */ セレクタ名{ z-index: 数値; } z-indexで…

覚えておくと便利なショートカットキー

「ショートカットキーの利点」と「覚えておくと便利なショートカットキー」について書いています。 ショートカットキーの利点 基本編 ブラウザ(Google Chrome)編 まとめ ショートカットキーの利点 時短(作業効率が上がる) 腕の動作が少なくなる 他のアプリケ…

HTML入門(引用タグの使い方)

HTML入門(引用タグの使い方) 引用タグの基本的な使い方について書きます。引用文と引用元のセットで書きます。引用するときに法律の面で注意点がありますが、専門外なのでその点に関しては触れません。詳しくは他のサイトを参考にしてください。 blockquote…

ウェブサイト公開の手順

個人がウェブサイトを制作して、それを公開するときの手順について書きました。 データを作る レンタルサーバを用意する 無料サーバ 有料サーバ ドメインを取得する FTPでファイルをサーバにアップロードする ブラウザで確認する まとめ データを作る HTML、…

CSS入門(リストのCSSについて)

リストのCSSについて、まとめています。リストの先頭に表示される"黒丸"や"数字"のことをマーカーと言います。マーカーの種類や位置を変えることができます。 list-style-type 表示例 list-style-image 表示例 list-style-position 表示例 list-style 参考サ…

HTML入門(リストタグの使い方)

リストタグの基本的な使い方についてまとめます。リストタグの記述例と利用例をご紹介します。 順不同リスト 表示例 カレーの材料 順序リスト 表示例 カレーの作り方 リストの入れ子表現 表示例 はてなブログ グループのカテゴリ 定義リスト 表示例 リストタ…

画像ファイルの形式を知ることの利点

画像ファイルの形式が分かれば、ファイルの特徴が分かります。特徴を踏まえた上で画像を適材適所に使い分けることができれば、ページの容量を抑えることも可能です。ファイルについての話が出たので、最後に拡張子についても書いています。 ファイルの特徴が…

画像ファイルの種類

画像ファイルの種類と特徴について書きました。いくつか種類があるので、その特徴を知り、使い分けます。 gif jpg(jpeg) png png-8 png-24 その他の保存形式 svg 画像の種類 ラスター画像 ベクター画像 gif Graphics Interchange Format(グラフィックス・イ…

個人がネット上で情報発信する際に取り得る手段

何かしらの情報をネット上で発信する場合、どのような手段があるのか考えてみました。 情報発信の手段 ウェブサイト ブログ(CMS:Contents Management System) SNS(Social Networking Service) 動画配信 まとめ 情報発信の手段 情報発信の手段を、おおまかに4…

CSS入門(aタグのCSSについて)

aタグのCSSについて、基本的なことに絞って書いています。 リンクの下線を消す マウスカーソルの種類 aタグの疑似クラス リンクの下線を消す aタグは、デフォルトで下線が付いています。下線を表示したくない場合は、text-decoration: none;を指定します。 <a href="https://shiroyuki2020.hatenablog.com/"></a>…

HTML入門(ページのレイアウト)

Webサイトのページのレイアウトについて書いています。レスポンシブデザインについては、取り上げていません。 よくあるレイアウト 1カラム 2カラム 3カラム レイアウトの基本的な考え方 レイアウトは自由 よくあるレイアウト サイトのレイアウトでシングル…

HTML入門(Webサイトのページを構成する部品の名称)

もし、Webサイトの制作をどこかに依頼する(された)場合、ページを構成する部品の名称を知っているとスムーズにやり取りすることができるはずです。依頼者と制作者の意思疎通が円滑になり、無用なやり取りを防ぐことが期待できます。 Webサイトの1ページを構…

HTML入門(aタグの使い方)

aタグの基本的な使い方についてまとめます。 aタグの使い方 別タブで開く ページ内リンク リンクが飛ばない原因 おまけ(次への>>記号の表示の仕方) aタグの使い方 aタグは、他のサイトやページにリンクしたいときに使います。 <a href="https://www.google.com/">Googleのサイトへ移動</a> href属…

プログラミング学習ノート作り

プログラミングの学習方法は人それぞれだと思います。 私は、過去にプログラミング学習用のノートをよく作っていました。ノート作りをして実感したことは、労力がかかる割に非効率的だということです。しかし、紙には紙の良さがあります。紙で読みたいときも…

HTML入門(HTMLのコメントの書き方と注意点)

HTMLのコメントについてまとめました。コメントの書き方、注意点、役割、コメントに関しての追加情報も書いています。 コメントの書き方 1行コメントの書き方 複数行コメントの書き方 注意点 入れ子にできない 実際の表示 コメント宣言の詳細 コメントの役割…

CSS入門(色の指定方法)

CSSでは色の指定方法がいくつかあります。その方法について書きます。

現状のプログラミング学習法の紹介(アナログ・デジタル)

プログラミングの学習方法を模索した結果、最近たどり着いた方法をご紹介します。過去の2つの勉強方法も合わせてご紹介します。

Google Search Consoleにサイトマップを登録する

はてなブログのサイトマップについて書きました。登録する理由や在りか、疑問点についても書いています。

はてなブログのカスタマイズ(レスポンシブ対応)

レスポンシブ対応について書き残します。

CSSでアニメーションさせる方法

CSSでアニメーションさせる方法について書きました。JavaScriptを利用してアニメーションさせる方法も書いています。

CSS入門(CSSでつまずくところ)

CSS入門の段階でつまずきそうなところについて書きました。スタイルが反映されないときは、記事で挙げた点を確認してください。

HTML入門(タグの誤用)

HTML入門の記事です。HTMLタグのよくある誤った使い方について書きました。

HTML入門(HTMLでつまずくところ)

HTML入門の記事です。HTMLでつまずくところについて書きました。画像ファイルのパスについてでは、図を用いて説明しています。

Atomで書いたコードを印刷する3つの方法

Atomで書いたコードを印刷する方法について書きました。今回、調べて分かった方法は3つでした。他にもあると思いますので、各自で調べてみてください。

CSS入門(優先度)

CSS入門です。CSSの優先度について書いています。少し難しい内容かもしれませんが、使えるようになればCSSを味方につけられます。

CSS入門(セレクタの種類と書き方)

CSSの入門です。セレクタの種類と書き方について書いています。CSS入門で押さえておきたいセレクタの種類3つとセレクタの書き方についてご紹介します。