HOME > Snow Notes Snow Notes This is Shotaro Kamimura's personal blog ウェブサイト制作 [React]MacでReactの開発環境を整えて、Hello Worldを出力するまで Reactを使用するために、開発環境を整えて、Hello Worldを出力するまでを整理する。 Reactを使用するための二つの方法 Reactを使用するには、二つの方法がある。 CDNリンクを使用してReactを使用す ... #Mac #React ウェブサイト制作 [React] Reactのコンポーネントを表示させる Reactのコンポーネントを表示させる。 Reactのコンポーネントは、関数でもクラスでも作成することができる。 関数のコンポーネント 関数のコンポーネントを表示させる。 関数のコンポーネントの定義 関数のコンポーネント ... #React ウェブサイト制作 [React] HTML1枚で、JSXを使ってReactをブラウザに表示させる Reactを使って、画面に文字を表示させてみる。 Reactで画面に表示させる方法は二種類 どうやらReactで画面に表示させるには、二種類の方法があるらしい。 CDNリンクを使用してReactを使用する npmでローカ ... #HTML/CSS #React ウェブサイト制作 [HTML] HTMLで最初に書くべきタグ HTMLを書き始めるために、最初に必要なタグの備忘録。 HTMLを書き始めるには、下記のタグが必要。 <!DOCTYPE html> <html> <head> <title&g ... #HTML/CSS テクノロジー [github] レポジトリの作成のやり方 レポジトリの作成方法について整理する。 リモートレポジトリの作成 まずはレポジトリを作成。 create repositoryのボタンを押す。 詳細を決める。 Repository name : レポジトリの名前 Des ... #Github ウェブサイト制作 [HTML/CSS] 別ファイルに写真を入れた時のパスの修正方法 別ファイルに写真を入れた時のHTMLのパスの修正方法の備忘録。 HTMLファイルと写真が同じフォルダにある時 HTMLファイルと写真が同じフォルダにある時。 写真のパスの書き方としては、下記のようになる。 CSSに書く時 ... #HTML/CSS #image ウェブサイト制作 [css] レスポンシブの時にdiv要素の順番を入れ替える方法 CSSを使って、HTMLサイトのレスポンシブ対応の時にHTML構造のdiv要素の順番を入れ替えるやり方を整理する。 スマホ対応のサイトを作る時、レスポンシブの時だけHTMLのdiv要素の順番が入れ替わってしまう問題を解決 ... #flexbox #HTML/CSS #レスポンシブ ウェブサイト制作 [html / css] ヘッダーメニューをアイコンに変えてレスポンシブ対応させる 横幅がスマホサイズになった時にヘッダーメニューをアイコンに変えて、レスポンシブ用のヘッダーメニューにするやり方を説明する。 完成のイメージ 完成系は下。ある幅までいくと、ヘッダーメニューが3本線のアイコンに変化する。 f ... #header #HTML/CSS #レスポンシブ ウェブサイト制作 [HTML / CSS] flexで画像や説明文を横並びさせる Flexboxを使って、画像と説明文のセットを横一列に並べるレイアウトの作り方を説明する。 完成形 下記のようなイメージを作る。 HTMLの用意 まずはHTMLを用意する。 「offers」というクラスの中に、「offe ... #HTML/CSS #image ウェブサイト制作 [HTML/CSS] 写真と文字を左右に配置するレイアウトを作る方法 ウェブサイト作成の際の備忘録。 イメージとしては、下記のようなレイアウトを作成する時。 HTML 下記のように用意。 <div class="cozyspace-wrapper"> < ... #HTML/CSS #image « Prev 1 … 18 19 20 21 22 … 31 Next »