読者です 読者をやめる 読者になる 読者になる

webプログラミング覚え書き

webプログラミングの勉強の覚え書きです。

URIとURLの違いって?

URLとURIの違いって?

参照(http://yasuda:pass@www.example.com:8080/news/index.htm?page=2&msg=yes#hot)

URL ≠ URI

URIの方が広い概念で、URLはURIの 一部分

URL

場所を示す書き方のルール →ページや画像などを取得したりするための場所、アクセス方法の指定

URI

名前または場所を識別書き方のルールの 「総称」(ボス) URLはURIで定められたルールに従って書かれたり使われたりする

例 寿司(URI) --握り寿司(URL)

webページのアドレスはURLと呼んでもURIと呼んでもどっちでもよい。

URLを解剖してみる。 http://yasuda:pass@www.example.com:8080/news/index.htm?page=2&msg=yes#hot

https: スキーム(scheme)

//yasuda:pass@www.example.com:8080 オーソリティ(authority) アドレスの根本部分。さらに以下のパーツに分かれる

yasuda:pass  ユーザー情報 アクセスに使うユーザー名とパスワード

www.example.com  ホスト(host) アクセス先サーバー名

:8080 (port) アクセス先のサーバーのポート番号

news/index.htm パス(path) 指定したオーソリティの中でのアクセス先

?page=2&msg=yes クエリ(query) パスの中でさらにアクセス内容を細かく識別する。サーバー上で動作するプログラムへの指示や命令が書かれることが多い

#hot フラグメント(fragment)

jQueryライブラリに依存しないスライダー「Swiper」がめっちゃ便利!

jQuery

f:id:weblog-masaya:20160406143737p:plain

この 「Swiper」は、jQueryライブラリに依存せずjavascriptを1行書くだけで機能する便利なスクリプトです。 このスクリプトは、レスポンシブデザインで真価を発揮します。

続きを読む

【日本製】Bootstrapのテンプレートが簡単に作れるBootstrap Editerがお薦め!

bootstrap

f:id:weblog-masaya:20160403173209p:plain

Bootstrapはとても多くの機能が用意されているのですが、 ともすれば不要な機能も多く、Bootstrap初心者の方はかえって混乱してしまう・・・ Bootstrapは敷居が高くて使えない・・・ なんてこともあると思います。 そこで、web上でささっとテンプレートが作れるサービスを紹介します。 なんと日本製なのです。

続きを読む

初心者ほどたくさん使おう!公式リファレンス・公式サイト

役立ち

今日は公式サイト、リファレンスなどのご紹介です。

f:id:weblog-masaya:20160308145535j:plain

ついつい個人のwebサイトで調べて、それをそのまま覚える/使って終わり。

なんてことはありますが、出来る限り公式サイトも使ったほうがいいです。

続きを読む

【簡単!!】Sassで書いたコードをcssにコンパイルする方法【mac】

CSS

macで簡単にSassで書いたコードをcssコンパイルする方法

まずSassでコーディングします。

サンプル

フォルダ名: sass_test

*{
  padding: 0;
  margin: 0;
}
header {
  width: 500px;
  h1 {
    font-size: 30px;
  }
  nav {
    ul {
      overflow: hidden;
      width: 100%;
      list-style: none;
      li {
        float: left;
        width: 25%;
        a {
          display: block;
          height: 40px;
          line-height: 40px;
          text-align: center;
          background-color: blue;
          color: #FFF;
        }
      }
    }
  }
}
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="test.css">
  <title>test</title>
</head>
<body>
  <header>
    <h1>テスト</h1>
    <nav>
      <ul>
        <li><a href="">item1</a></li>
        <li><a href="">item1</a></li>
        <li><a href="">item1</a></li>
        <li><a href="">item2</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>本文</h1>
    <p>Sassをcssに変換します。</p>
  </main>
</body>
</html>

次にmacならターミナルを開きます。

チェンジディレクトリ cd[半角スペース]を入力した後に、

コンパイルしたいSassファイルを含むフォルダ(この場合は、sass_test)を

まるっとターミナルまたはコマンドプロンプトに放り込みます。

そうすると以下のようにディレクトリが変わります。

f:id:weblog-masaya:20160307145500p:plain

そのディレクトリで

 MacBook-Air: ~ user$ sass (ファイル名).scss:(ファイル名).css

と入力するとcssコンパイルされたcssファイルが出来上がります。

f:id:weblog-masaya:20160307152607p:plainf:id:weblog-masaya:20160307152607p:plain

ただ、このcssファイルを開くと分かるのですが、インデントが崩れていて可読性が悪いのです。

f:id:weblog-masaya:20160307152750p:plain

なので、インデントをcssの記述方法にするために、以下のようにコマンドを入力します。 最初の手順と同じ、

cdの後にフォルダを放り込む

MacBook-Air: ~ user$ sass[半角スペース]フォルダ名.scss:フォルダ名.css --style expanded

と入力します。

出来上がったcssファイルを開くとインデントが揃った状態になります。

こんな感じ

f:id:weblog-masaya:20160307154105p:plain

黒い画面は嫌い!! といった方でもこれだけなら出来るかなーっと

思うので、ぜひ参考にしてみてください。

【2016年版】プログラミングをeラーニングでしっかり学ぼう!eラーニングサイトまとめ

HTML CSS

f:id:weblog-masaya:20160219171422j:plain

ドットインストール

dotinstall.com

webデザイナー、webエンジニア、プログラマーみんな一度は利用しているサイト。

とにかくすべてのプログラミングからサーバー周りなど

とても幅広く学習することができます。

しかもこれが無料なんです!

私も今でもかなり利用しています。

とにかく新しいことを学ぶ時に、使っています。

f:id:weblog-masaya:20160219042601p:plain

この画像は、HTML・CSSの部分です。

この他にもjavascriptwordpressPHPなども学習することができます。

基本無料ですが、プレミアム会員(月額880円)があって、

テキストの文字起こしソースコードの閲覧、デモの確認などができるようになります。

eラーニングサイトは、まずここを抑えましょう。



続きを読む