2020年12月30日水曜日

Gitの基本知識

概要

コマンド 意味
git gitコマンドの簡易ヘルプを表示
git --version gitコマンドのバージョンを表示
git config --list gitを使うための設定内容を表示
git config --global user.name "XXXXX" gitを使うためのユーザ名を登録。XXXXXがユーザ名
git config --global user.email "YYYYY@gmail.com" gitを使うためのユーザ名を登録。YYYYY@gmail.comがメールアドレス
git init gitのリポジトリを作成する。
git status リポジトリの状態を確認する
git add リポジトリにファイルを追加する
git commit リポジトリの変更を確定させる
git log リポジトリの変更履歴を確認する

使用例

cd aries/
git init
Initialized empty Git repository in /aries/.git/
時刻: 0 件のコメント:

2020年12月26日土曜日

HTMLでフォームを作成する

概要

  • formタグ
    • <form></form>で囲んで記載する。
    「action属性」でデータの送信時に呼び出すプログラムを指定、「method属性」で呼び出し方式を指定します。

  • labelタグ
    • 入力欄の隣の見出しを設定します。for属性にIDを設定することができます。
  • inputタグ
    • 入力用のテキストボックス。type属性によって形式が変わる。name属性はフォームを送信するときのデータ名。id属性を使ってIDを設定することができます。
  • buttonタグ
    • Type属性を使って送信ボタンやリセットボタンを設定できます。
  • textareaタグ
    • row属性に行数を記載することで複数行のテキストエリアを作成することができる。
  • selectタグ
    • プルダウンリストを作成する。リストの選択肢はoptionタグで選択する。

<form action="#" method="post">
　　<label for="comment_1">コメント </label>
　　<input type="text" name="comment">
　　<button type="submit">送信する </button>
</form>

<form action="#" method="post">
　　<select name="select" id="select">
　　　<option>タマ</option>
　　　<option>ミケ</option>
　　　<option>トラ</option>
　　</select>
</form>
時刻: 0 件のコメント:

2020年12月24日木曜日

HTMLでリストや表を作る

リストの作りかた

  • ulタグ
    • リストを作るときに外側を<ul></ul>で囲みます。
    「class="list-group"」をタグの中に書くと、表のようなリストになります。
  • liタグ
    • <ul></ul>の中に<li></li>で囲むことで箇条書きのようなリストを作ることができます。
    「class="list-group-item"」ををタグの中に書くと、表のようなリストになります。
  • olタグ
    • <ul></ul>の中に<ol></ol>で囲むことで番号付きのリストを作ることができます。

表の作り方

  • tableタグ
    • 表を作るときに外側を<table></table>で囲みます。
    「class="table"」とすると表の線を書いて見栄えをよくします。
    「class="table table-striped"」とすると表の中身の色を1行ずつ変えながら表示するので、見栄えをよくします。
  • theadタグ
    • 表の表題を作るときに外側を<thead></thead>で囲みます。
  • tbodyタグ
    • 表の要素を作るときに外側を<tbody></tbody>で囲みます。
  • trタグ
    • 表の行を作るときに外側を<tr></tr>で囲みます。
  • thタグ
    • 表の表題の中身を作るときは、trタグの中で外側を<th></th>で囲みます。
  • tdタグ
    • 表の要素の中身を作るときは、trタグの中で外側を<td></td>で囲みます。
時刻: 0 件のコメント:

2020年12月23日水曜日

HTMLで画像やリンクを張る

画像を張る

  • imgタグ
    • 画像を挿入します。
    <img src="https://画像ファイルのURL">
    「class="img-responsive center-block"」を追記とすると、ウインドウサイズに合わせて画像を表示することができる。

  • aタグ
    • 文字をクリックすると他のwebサイトにアクセスします。
    <a href="https://リンク先のURL" target="_blank">ジャンプ</a>

    OKボタンをクリックすると他のwebサイトにアクセスします。
    <a class="btn btn-primary" href="http://リンク先のURL" target="_blank">OK</a>

    画像ファイルをクリックすると他のwebサイトにアクセスします。
    <a href="https://リンク先のURL" target="_blank"><img src="https://画像ファイルのURL"></a>
    「target="_blank"」を追記すると、リンク先のページを別のウインドウで開くことができる。
時刻: 0 件のコメント:

2020年12月19日土曜日

CSSのスタイルの基礎

概要

  • linkタグ
    • 参照するCSSファイルを記載する際に使用します。
    headタグの中で、このように記載すると、参照先のCSSファイルの情報を設定することができます。
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  • styleタグ
    • <style>と</style>で囲まれた中で、プロパティを設定します。
    「head { プロパティ }」と記載することで、「head」タグ対してプロパティを設定することができます。
    プロパティには、このような内容があります。
    • color
      • 文字の色を変更する
    • background-color
      • 背景の色を設定する。
    • padding-top
      • 先頭の余白を設定する。
    • padding
      • 要素の内側の余白を設定する。
    • margin
      • 要素の外側の余白を設定する。
    • font-weight
      • 文字の太さを設定する。
    • font-size
      • 文字のサイズを設定する。
    • font-family
      • 文字のフォントを設定する。
    • border
      • 要素の枠線を設定する。

  • コンテナの作成
    • コンテナは余白を追加して見やすくするためのデザインです。divタブで区切って使います。
    <div class="container"></div>

  • クラスのスタイルを定義
    • styleタブの中に「.」から始まるクラス名を定義して、それぞれにスタイルを設定できます。
    適用するときは、devタブで区切って使います。
    <div class="クラス名"></div>

時刻: 0 件のコメント:

HTMLの基本的な記法

概要

HTMLとCSSの学習の記録です。

  • htmlタグ
    • <html>と</html>で囲んで、HTML文であることを表現する。
    <html lang="ja">と書くと、日本語のwebページである事を表現することができる。

  • h1タグ
    • <h1>と</h1>で囲んだ部分が、見出しであることを表現する。

  • pタグ
    • <p>と</p>で囲んだ部分が、一つの段落であることを表現する。
    <p class="lead">と書くと、その段落が文章の要約部分であることを表現する。

  • brタグ
    • <br>と書かれた部分が、改行であることを表現する。

  • strongタグ
    • <strong>と</strong>で囲んだ部分が、強調部分であることを表現する。

  • headタグ
    • <head>と</head>で囲んだ部分が、webページ全体の設定であることを表現する。

  • metaタグ
    • headタグの中に記載する設定です。
    <meta charset="utf-8">と記載することで、文字コードがUTF-8であることを表現します。

  • titleタグ
    • headタグの中に記載する設定です。
    <title>と</title>で囲んだ部分が、webページのタイトルであることを表現します。

  • bodyタグ
    • <body>と</body>で囲んだ部分が、webページの本体部分であることを表現します。

  • aタグ
    • <a>と</a>で囲んだ部分が、リンクを参照してクラスを使う事ができます。
    <a class="btn btn-primary" href="#">OK</a>と記載すると、リンク先のCSSを参照してOKボタンを表現することができます。

時刻: 0 件のコメント:

2020年12月15日火曜日

機能や手順を伝える文章の書き方について

概要

ユーザ向けの資料を作成する際に役立ちそうな文章作成の勉強をしたので、ポイントをまとめておきます。
  • ユーザが使う用語を使う
  • 読む必要があるかわかるタイトルにする
  • 日時の表現は「2020年12月15日」のような書き方にする。「2020/12/15」のような表現はしない。
  • 数えられる数字は算用数字を使う。、熟語などで使用する場合(「一度に」など)は漢数字を使う。
  • 記号の使い方に注意する。「・」は「と」、「／」は「または」の意味で使う。
  • 一文一義を心掛ける。一つの文章に複数の話題を詰め込まない。
  • 簡潔に書く。「…してくださいますようお願いします」など丁寧に書きすぎない。「したがって」「また」なども不要なことが多い。
  • 主題から書く。最初に要求を言って、その理由を書くようにする。
  • ユーザを主体にする。使う側の立場に立って、「～します」ではなく「～されます」の表現が好ましい場合もある。
  • 列記には箇条書きを使う。順序性がある場合には項目に番号をつける。
  • 長い文章には見出しを使う事で情報の区切りを明確にする
  • 二重否定を使わない。「～しないと、しません」や「A以外を、削除しないでください」などは避けるようにする。
  • 主語と述語の対応に気を付ける。主語と述語だけを残したときに文章がつながるか確認する。
時刻: 0 件のコメント:
登録: 投稿 (Atom)