Technology

no image

Technology

[github] レポジトリの作成のやり方

2021/1/15  

レポジトリの作成方法について整理する。 リモートレポジトリの作成 まずはレポジトリを作成。 create repositoryのボタンを押す。 詳細を決める。 Repository name : レポ ...

no image

Technology

[HTML/CSS] 別ファイルに写真を入れた時のパスの書き方

2021/1/15  

別ファイルに写真を入れた時のHTMLのパスの書き方の備忘録。 HTMLファイルと写真が同じフォルダにある時 HTMLファイルと写真が同じフォルダにある時。 写真のパスの書き方としては、下記のようになる ...

no image

Technology

[css] レスポンシブの時にdiv要素の順番を入れ替える方法

2021/1/15  

レスポンシブの時にdiv要素の順番を入れ替える時の備忘録。 問題の詳細 HTMLの構造を、レスポンシブだと順番を変えて表示させたい時がある。 例えば、下のようなレイアウトの場合。 PC表示で見ると、交 ...

no image

Technology

[html / css] 横幅がスマホサイズになった時にヘッダーメニューをアイコンに変化させる

2021/1/14  

レスポンシブにする時に、ヘッダーメニューの欄を消して、アイコンに変化させる時の備忘録。 完成系は下。 fontawesomeのアイコンをヘッダー内に配置 fontawesomeのメニューアイコンを配置 ...

no image

Technology

[HTML / CSS] 画像や説明文を横一列に並べるレイアウトを作る方法

2021/1/13  

画像と説明文のセットを横一列に並べるレイアウトを作った時の備忘録。 下記のようなイメージ。 HTMLの用意 まずはHTMLを用意する。 「offers」の中に、「offer」のdivが3つ入っている。 ...

no image

Technology

[HTML/CSS] 写真と文字を左右に配置するレイアウトを作る方法

2021/1/18  

ウェブサイト作成の際の備忘録。 イメージとしては、下記のようなレイアウトを作成する時。 HTML 下記のように用意。 <div class="cozyspace-wrapper&quo ...

no image

Technology

[CSS] ヘッダーを固定する

2021/1/13  

ヘッダーを固定させるための備忘録。 最初にヘッダーを作ると、固定されていないので、スクロールした時に下の動画のように消えてしまう。 position: fixed;とz-indexを使用 positi ...

no image

Technology

[CSS]タイトルより短い下線を表示させる

2021/1/12  

タイトルより短い下線を表示させるための備忘録。 こちらの記事を参考にした。 このABOUTの下のボーダーラインを作成する。 HTMLの用意 HTMLはシンプルに<H1>と<p>を用意する。 ...

no image

Technology

[CSS]ロゴを左に、メニューを右に配置するヘッダーを作成

2021/1/12  

ヘッダーの作成方法について整理。左にロゴ、右をおく基本的なスタイル。 HTMLでロゴとメニューリストを作る まずはロゴとメニューリストをHTMLで作る。 <div class="log ...

no image

Technology

[CSS] liのリストの・を消す

2021/1/15  

備忘録のメモ 上の・を消したい時は、list-style:none;で消す。 li { list-style:none; }