hiyoko-programingの日記

プログラミングを勉強したてのひよっ子。   エンジニア目指して勉強中。

デザインの教科書

ドメイン名の取得

◉ ドメイン名 インターネット上のコンピュータを識別する住所のようなもので、 URLやメールアドレスに含まれている(赤字部分)。 URL http://www.examle.com Mail mail@example.com 自分が希望するドメインを持つには、 独自ドメインを取得する必要があり、…

絶対配置と相対配置

◉ position プロパティ 基本的に、位置を指定する top / bottom / left / right プロパティと組み合わせて利用する。 ◉ position プロパティで指定できる値 ⚫︎ static 配置方法を指定しない。 top / bottom / left / right プロパティの指定ができない。 初…

背景を半透明にする

◉ rgbを用いて10進数で表示 これまで16進数(#FFFFFFなど)で色を表示してきたが、 10進数を指定する方法もある。 ● rgba( R値, G値, B値, A値 ) ※数値の間には 「 ,(カンマ)」が必要。 r=red g=green b=blue の3色の指定に加えて、 a=alpha ( …

CSS で作るボタンジェネレーター

CSS では 好みのデザインボタンを作るために、微調整しながら作成するのは、 なかなか面倒なもの。 そこで、デザインソフトと同じようにボタンを視覚的に作成する、 ボタン用サービスがある。 「 CSS Button Generator 」 https://webdesign-assistant.com/b…

inline-blockについて

◉ インライン−ブロック要素とは? インライン要素とブロック要素の両方の特徴を併せ持った要素のこと。 ● インライン要素の特徴 要素の幅は中身と同じ大きさになる 要素同士が横に並ぶ 幅(width)と高さ(height)が指定できない 余白(padding・margin)が…

ボックスにマウスが重なった時に半透明にする

ボックスにマウスが重なった時に a 要素全体を半透明にすると、 ボックスが光ったような効果を与えることができる。 半透明は「 opacity 」プロパティで指定できる。 ◉ 書き方 opacity : 値 ; ※値について 値の部分には0.0~1.0までの数値で不透明度を指定。…

vertical-align プロパティ

◉ vertical-align プロパティ 行の中で、テキストや画像などの縦方向の位置揃えを指定することができる。 ◉指定できる値 ⚫︎ baseline 適用した要素のベースラインを親要素のベースラインに揃える。初期値。 例Example.baseline ⚫︎ top 上端揃え。 例Example.…

インライン要素のボックスの特徴

インライン要素(<p>など)のボックスは、 ブロックレベル要素 (<a>など)のボックスとは、違った特徴を持っている。 ◉ インライン要素の主な特徴 ● width height プロパティを設定することができない。 仮に指定しても無視される。 ●インライン要素のボックスは</a></p>…

ページ内リンクの利用例と id 属性

id 属性はページ内の固有の要素を示すもであるため、 1つの HTML ページ内に同じ id 名は1度しか使えない。 このようなルールを持っているのは、 CSS の id セレクタで装飾するためだけでなく、 ページ内リンクなどにも id 属性が利用されるためである。 例…

text-decorationプロパティ

text-decoration プロパティは 主にテキストに下線を表示するために使用するが、 そのほかにも、自由に設定できるものがある。 ◉text-decoration に指定できる値 ● underline テキストに下線をつける。 underline: 下線が付く。 ● overline テキストに上線を…

CSS3とベンダープレフィックス

◉ ベンダープレフィックス "Google Chrome" や "Mozilla Firefox"、"Safari" といった様々なブラウザの ベンダーがCSS3の拡張機能を実装するのに使用する識別子のこと。 プレフィックス(Prefix)とは「接頭辞」という意味。 CSS3のプロパティの接頭辞…

box-sizing プロパティとボックス

ボックスに width プロパティや height プロパティの値を指定した場合に、 それらは要素の内容(赤枠内部)の横幅、縦幅を表している。 これは、ブラウザの基準値では、 「 box-sizing 」プロパティの値に、「 content-box 」が指定されているため。 ◉ box-s…

背景画像を指定2

◉ background-position background-image プロパティで指定した画像の 開始位置を指定することのできるプロパティ。 横方向、縦方向の順で、スペース区切りで値を指定する。 EX) body { background-image : url ( " ../images/01.png"); backgroun-repeat: n…

背景画像を指定1

◉ background-image background-image プロパティで body要素に画像を指定すると、 ブラウザの表示領域全面に繰り返して表示されてしまう。 継ぎ目の目立たない画像を用意することで、 自然な背景を作ることができる。 繰り返しても継ぎ目の見えないような背…

絶対パスと相対パス

◉ パス リンクを設定する際に、 a 要素の href 属性にしているファイルの場所の記述のことをいう。 a 要素で HTML ファイルの場所を示すだけでなく、 img 要素で画像ファイルの場所を指定する場合や、 link 要素でCSS ファイルの場所を指定する場合など、 フ…

リンクの装飾と擬似クラス

リンク(a要素)に様々な装飾をすることを指定できる、擬似クラス。 ◉ a 要素の装飾を見てみる。 ⚫︎ a 全てのリンク ⚫︎ a:link 未訪問のリンク リンクのデフォルトの状態を意味する。 ⚫︎ a:hover リンクにカーソルが重なっている時 マウスをリンクの上に持っ…

リンク先を新しいタブで開く

◉ target 属性 リンク先を新しいタブで開くようにするには、 target 属性に属性値を設定する。 target 属性の属性値は任意の半角英数字で指定する。 EX) <ul> <li><a href="https://www.facebook.com" target="new">Faccebook ページ</a></li> </ul> 新しく開いたタブには、属性値で指定したフレーム名がつく。 また、複数のリンク先…

ブロックレベル要素とインラインレベル要素

要素を作るボックスは大きく、 ブロックレベル要素とインラインレベル要素の 2つに分類される。 ◉ ブロックレベル要素 ブロックレベル要素は、 見出し・段落・表など、文書を構成する基本となる要素で、 一つのブロック(かたまり)として認識される。 ブラ…

idセレクタと classセレクタの優先順位

id と class では、 id セレクタに指定したプロパティの方が優先される。 どちらが優先されているかを確認するには、 Google Chromeの「検証ツール」が便利。 このように、 優先されたものがある場合、 優先順位の低かった側に、取り消し線が引かれている。

overflow : hidden ; プロパティ

clearfix によってフローティングボックスが親要素からはみ出す不具合を解消できるが、 「 overflow : hidden ;」というプロパティを使用しても、解消できる。 ◉ overflow : hidden ; clearfix と違って、非常に短い記述で済むため、とても良い方法ではある…

clearfixの仕組み

clearプロパティとfloatプロパティの間では、 後続要素をclear しただけでは、 フローティングボックス(どちらか左右に寄せた要素)が、 親要素のボックスからはみ出してしまうことがある。 この問題を解消するために考えられたのが、 「clearfix」で、この…

float プロパティと clear プロパティ

◉ float 値を指定した要素を左右に寄せて配置するプロパティ。 後続のコンテンツは、floatを指定した要素の反対側に回り込む。 ● float プロパティで指定できる値 ⚫︎ left 要素を左に寄せる ⚫︎ right 要素を右に寄せる ⚫︎ none float を指定しない ◉ clear f…

日付をマークアップ

◉<time>タグ 日付は、<time> タグで囲む。 <time>タグには、 属性を追加し、 コンピュータが正しい日付を認識できるように決まった書式で 日時を入力できるようにする必要がある。 ◉日時の書き方 ● 時刻は「 :(コロン) 」で区切る ・・・・15:45:20 など ● 日付は「-</time></time>…

ページのレイアウトをする

◉ページ全体をセンターに寄せる これまでの作成では、 ブラウザ枠の横幅めいいっぱいまで表示されている。 そこでページ全体の横幅を固定して、 コンテンツ部分のブラウザをセンターに寄せて見やすくする。 ◉<div> ~ </div> ① HTMLで<div> タグでページ全体を囲む ② div に i</div>…

コピーライトの挿入

◉©️(コピーライト)マーク 特殊文字と呼ばれ、 ブラウザで「©️」と表示したい箇所に、 ソースコード中では、「 &copy; 」と記述する。 ◉特殊文字 コピーライトのように、特殊文字はいくつかあり、 それらは、 「 & ; 」のように、 「 &(アンド) 」と「 ;…

フォントの設定 2

google font に限らず、 一般的にフォントは、標準の書式を基準にして、 そこから文字の太さや斜体などの変更ができるように 様々なバリエーションが用意されている。 見出しレベルの違いなどを同じ書式を使うことによって ページ全体で統一感を出すことがで…

フォントの設定 1

Google Fonts https://www.google.com/fonts/ で利用する。 操作方法等が適宜リニューアルされているので、 現在は、以下のサイトを参考にするのがわかりやすかと思われる。 https://sodamelo.com/google-fonts/ 簡単に順序を説明すると、 ①カテゴリを選択。…

ブラウザ標準の文字サイズとマージン

ブラウザによって、 段落タグや見出しタグには、 予め標準の文字サイズと上下マージンが設定されている。 EX) CSSファイルにおけるブラウザ標準値 body { font-size : 16px ; } p { font-size: 1em ; margin: 1em 0 ; } h1 { font-size: 2em ; margin: 0.67e…

figureタグとキャプション

◉< figure >〜</figure > figure要素は、写真、挿絵、図表、コードなどのまとまりを表す。 figure要素によるまとまりは、単体で独立したものでならない。 つまり、その部分を文書から切り出したとしても元の文書に影響がないとともに、 切り出した内容自体で意味が通る…

画像をHTMLに挿入

<img src="images/img_01_01.jpg" alt="" width="720" height="390"> <img src="images/img_01_02.jpg" alt="確認写真。" width="720" height="390"> 上記の例で考える。 ◉ src 属性 <img> タグでは、src 属性をつけて、 埋め込み画像ファイル(フォルダ/ファイル名)があることを示す。 ◉ alt 属性 alt 属性には画像の代替テキストを入力する。 これは、主に、 スクリーンリーダー(目が不自由な方のための音…