アットウィキロゴ
note4recurrent @ ウィキ
ページ一覧
アットウィキロゴ
note4recurrent @ ウィキ
ページ一覧
note4recurrent @ ウィキ
掲示板 掲示板 ページ検索 ページ検索 メニュー メニュー
管理メニュー

note4recurrent @ ウィキ

webプログラミング基礎

最終更新：

匿名ユーザー

- view
だれでも歓迎！ 編集

html

  • html内のタグに装飾は加えない。CSSでやるときに邪魔になる。
  • 文字コードはutf-8 が主流。過去のページで違うものをメンテナンスすることがあるかもしれない。その際は変えないこと。
  • 動いているものはあえて正すことはしない

基本記述： 

<!DOCTYLE html> // バージョンによって異なる場合がある。書き換えないのが吉
<html lang="ja"> //日本語
<head>
<titlte>タイトルバーに表示される名前<title>
<link rel="stylesheet" href="css/style.css"> // cssファイルを使っている場合
</head>
<body>
ここにコンテンツを入れる
</body>
<footer></footer> //任意
</html>

リスト

  • リスト 
    <ul>
 <li></li>
 <li></li>
</ul>
  • 数字付きリスト 
    <ol>
 <li></li>
 <li></li>
</ol>

CSS

記載場所：

  • htmlのタグに直接書く方法（インライン）：非推奨
  • ヘッダに記載する方法
  • CSSファイルを参照する
    • htmlの<head>内に書く。例：　<link rel="stylesheet" href="css/style.css"> //html ディレクトリ内のcssフォルダ内に置いた　style.css というファイルを参照する場合 何を適用するか優先順位で決定する(弱＞強）：
  1. ブラウザ
  2. 同じ優先順位なら下に記載されたものが採用される
  3. HTML内に記載されたもの（CSSファイルを変更しても反映できない）
セレクタ 例 点数
全称セレクタ ＊ 0
タイプセレクタ ｐ 1
class .photo 10
id #logo 100
疑似クラス a:hover 1
子孫 .nav li 11
属性 input[type=text] 10
複数 th,td 1
  • CSSで設定された書式がhtmlのどこに適用されているかはコンソールで確認できる。ページの空白部分を右クリックし「検証」を実行。

色指定（カラーコード）

  • #000000(黒） ~ #ffffff（白）:数値は16進数（０,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f)
  • ２桁ずつ　赤・緑・青を表現している。　各色　00〜ff　の256段階で表現している。
  • ２桁が同じ場合は　#59a　のように３桁で表すことも可能　　#59a　=　#5599aa となる。各色が１６段階の組み合わせとなる。基本的な色だけならこの表現で構わない。　例：　#f00 = 赤
  • 色名を指定することもできる（black white red など。色名で設定する場合は#はつけない）
  • RGB: rgb(255,0,0) // パラメータは１０進数

単位（サイズを指定する場合に使用する）

  • px :ピクセル
  • em :対象となる要素のfont-size を基準にして相対的に表す　例：1em = 1文字　
  • rem :htmlのfont-size を基準にして相対的に表す　例：1rem
  • % :対象となるものの標準値を１として％で表現　例：width = "80%" height="120%"

margin,padding

  • margin は要素の外側の余白、padding は要素の内側の余白
  • 一括指定　例：　margin = "10,5" padding ="5,3,10"
    指定の数 対象
    1 上下左右同じ
    2 １つ目が上下、２つ目が左右
    ３ １つ目が上、２つ目が左右、３つ目が下
    ４ 上、右、下、左の順

6/22

前回の続き

  • cssで修飾
    • 背景
    • センタリング
    • line-height
  • flexは超便利かつ必須
  • emmet
    • 覚えておくと便利

宿題回答例

  • index.html 
    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Remntal Space</title>
<link rel="stylesheet" href="css/style.css"
</head>
<body>
     <header class="wrapper">
        <img src="images/logo.png" alt="flex box 2colummn">
        <ul class="list">
            <li><a hfer="">Home</a></li>
            <li><a hfer="">About</a></li>
            <li><a hfer="">Plan</a></li>
            <li><a hfer="">Access</a></li>
            <li><a hfer="">Context</a></li>
        </ul>
    </header>
    <h1>flex box 2 colummn</h1>
    <main class="wrapper">
        <ul class="outer">
            <li><div class="box"><img src="images/sample-image01.jpg"><h2>flexboxのメリット</h2><p class="box">しぶさわたつひこ（1928年-1987年）：フランス文学を中心とした翻訳から始まり、中世から近世までのヨーロッパにはびこる歴史教科書に載らない人間の歴史を取り上げたエッセイを書いた。</p></div></li>
            <li><div class="box"><img src="images/sample-image02.jpg"><h2>flexboxのメリット</h2><p class="box">東京大学文学部仏文科卒。翻訳・評論・小説などを行う。</p></div></li>
            <li><div class="box"><img src="images/sample-image03.jpg"><h2>flexboxのメリット</h2><p class="box">のサイトは、澁澤龍彦氏の著作権相続人たる龍子夫人より著作物の使用について承認を頂いております。ただし、出版社の著作隣接件について抵触すると判</p></div></li>
            <li><div class="box"><img src="images/sample-image04.jpg"><h2>flexboxのメリット</h2><p class="box">著作者に著作権がありますので、法律にゆるされた範囲を逸脱した引用は許されません。</p></div></li>
        </ul>
    </main>
    <footer><p>&copy;Recurrent Shool</p></footer>
</body> 
</html>
  • style.css 
    @charset "UTF-8";
 
html *{
   box-sizing: border-box;
}
body{
   margin:0;
}

a{
   text-decoration: none;
   color: #333;
   display: block;
}

footer{
   background-color: #036eb8;
   color:#fff;
   text-align: center;
}

h1{
   text-align: center;
   line-height: 100px;
}

h2{
   text-align: center;
}

p{
   line-height: 1.8;
   margin:0;
}

a:hover{
   opacity: 0.5;
   color: red;
}

footer p{
   line-height: 40px;
}

li{
   list-style: none;
}

header{
   display: flex;
   justify-content: space-between;
   align-items: center;
}

header .list{
   display: flex;
   flex-wrap: wrap;
}

header .list li{
   padding: 0 1.5em;
   line-height: 2.6;
   border-right: 1px dotted #333;
}

header .list li:last-child{
   border:none;
}

.wrapper {
   width: 960px;
   margin: 0 auto;
   padding: 0 1em;
}

.outer{
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: flex-start;
}
.outer li  .box{
   display: flex;
   flex-direction: column;
   background-color: #ddd;
   margin-bottom: 50px;
   width: 410px;
   height: 600px;
   align-items: center;
}
 .outer li .box p{
    padding: 15px;
}
.outer img{
    width: 350px;
    margin-top: 30px;
}

2022/07/11

  • Responsive への対応
    • html には　meta タグに viewport を記述する：決り文句なので、コピペでOK
    • CSS ではpxでの指定を行わないこと。
    • 画面の大きさに寄って適用するCSSの記述を変えることができる。
  • htmlで複数の画像を設定しておいてCSSでどちらを表示するかを決めることができる。

2022/07/14

bootstrap

  • 4依然はjQueryが必要で5から不要になった。
  • 授業ではまだ残っているサイトのメンテを考慮して４を使う。なので、以下でjQueryを使う設定をしている。（JSはjQueryがbootstrapより先に読まれるように配置する必要がある。）
  • 自分のCSSを使いたい場合はbootstrap.cssより下の行に記述する事。bootstrapで物足りない、もっと細かい設定をしたいといった場合に使う。
  • bootstrap のバージョンに注意！
    • 日本語版は4.5、英語版は4.6がある。
  • 22日17時：企業説明会　パーソンコーポレーション

タグ：

html css
+ タグ編集
  • タグ：
  • html
  • css
タグの更新に失敗しました
エラーが発生しました。ページを更新してください。
ページを更新
「webプログラミング基礎」をウィキ内検索
最近更新されたスレッド
    +新規スレッドを作成する
    最近更新されたページ
    もっと見る
    ウィキ募集バナー