総合 ゲーム 画像動画

【ゼロからはじめるプログラミング】CSS学習 #6

ゼロからはじめるプログラミング講座の第十回です。今回はブラウザにある開発者ツールという機能を使います。別のタブ(ページ)で紹介していきます。

 

  1. 開発者ツールを使ってみよう。
  2. 要素選択ツールを使ってみよう。
  3. コードを書き換えてみよう。
  4. 開発者ツールを使いこなそう。

 

開発者ツールを使ってみよう。

早速ですがこちらのページを開いてください。

 

 

要素選択ツールを使ってみよう。

つぎはこちらのページを開いてください。

 

 

コードを書き換えてみよう。

つぎはこちらのページを開いてください。

 

 

開発者ツールを使いこなそう。

今後自分でhtmlでページを作るときやスタイルシートを作るときなど開発者ツールで直感的に値を作ってみたり、自分が見ているウェブページでどのようなコードが動いているのかを見てみましょう。

 

こんな風に使えます。

 

お疲れ様でした。次回は要素の配置について解説します。

次も頑張って記事を作るのでチャレンジしてください!

 

CSS学習 #1/#2/#3/#4/#5/#6/#7/#8/#9

この記事へのコメント

  1. 名前:名無しさん 2018/09/28(金) 02:17:06返信する

    開発者ツールの使い方を説明したページで「デバック」と記述されていますが、正しくは「デバッグ」です。
    また、このページから次のページに進むリンクが「CSS学習 #7」でなく「HTML5用video(動画)を別ウィンドウで開く【jQuery】」になってしまっています。

  2. 名前:hyper_T 2018/09/28(金) 06:18:59返信する

    >>1
    お知らせありがとうございます。デバック修正しておきました!
    ページリンクの前後移動は動的に生成されるので意図したものではありませんでした。
    「記事作成日時」で前後のものが選ばれるようになっています。不便かもしれないので調整しておこうと思います。

  3. 名前:名無しさん 2018/09/28(金) 20:43:21返信する

    「CSS学習 #4」を含め、更新ありがとうございました。
    リンクについて、「CSS学習 #1/#2/#3/……」をクリックするより楽、という理由で使っていました。私の場合、【ゼロからはじめるプログラミング】を順番に読んでいるので、「CSS学習 #7」にする方が便利に感じます。ただ、ページ生成の変更が難しいようでしたら、そのままでかまいません。

  4. 名前:hyper_T 2018/09/28(金) 20:48:30返信する

    >>3
    データベースを直接触らないといけないので出先からは操作できないというだけで、難しい作業ではないので修正予定はあります。少々お待ちを。

  5. 名前:名無しさん 2018/09/28(金) 21:38:30返信する

    >>2
    度々すみません。別ページだったので油断しました。「デバック」の記述は https://hyperts.net/staticPage/cssdev1/CSS_devTools_page1.html にあります。正しくは「デバッグ」のはずです。

  6. 名前:hyper_T 2018/09/28(金) 21:49:08返信する

    >>5
    そちらは今朝修正したので直っていると思います。

  7. 名前:名無しさん 2018/09/28(金) 22:00:01返信する

    >>6
    すみません、キャッシュを見ていたようです。お手数をおかけしました。

コメントを残す。

メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。URLを含むコメントは承認待ちになります。