2018-06-01から1ヶ月間の記事一覧
今回は初めてtableの作成とデザインを行いました。はじめはややこしいなと思っていましたが、理屈を理解できれば、そこまで難しい内容ではないと感じましたね。 tableの作成方法 HTML セルの結合方法 border-collapse: collapse まとめ tableの作成方法 今回…
今回は規定のデザインを流用して、今回作成したページをデザインしました。それとボタンの作成ですね。 linear-gradient まとめ 今回の記述です。 CSS article,#message ～以下略～ #photo a{ background-color: #ffaa00; background-image: linear-gradient…
今回はついにトップページを作成しました。最初に作っていたページがトップページだと思っていたので、ここまで来て軽くびっくりしました。 トップページの作成 background-repeat background-position font-weight: bold text-shadow まとめ トップページの…
今回は主にIDの使い方を勉強しました。 IDの使い方 HTML まとめ IDの使い方 まず今回の記述です。 CSS /*記事一覧のページ*/ #posts article img { float: left; margin-right: 20px; }#posts article h1{ font-size: 24px }#posts section { width: 900px; …
今回やったことはサイトタイトル通りのことです。前回勉強したdisplay要素と疑似要素が強すぎて、今回はとても楽勝に感じましたね。 ロゴ画像＆サイト名にリンクを挿入 各ページのヘッダーの統一 まとめ ロゴ画像＆サイト名にリンクを挿入 以下、今回の記述…
今回は主にnth childとdispley要素について勉強しました。参考テキストにはさらっとしか紹介されていませんでしたが、実際にWEBデザインをしてくのに欠かせない要素なので、しっかり理解したいと思います。 nth child display要素 block inline inline-block…
今回の記述は主に補足事項に対するリンク指定でした。 また、絶対パスと相対パスについても勉強しました。 リンク設定 aside 相対パスと絶対パスについて border-bottom text-decoration list-style-image: url(listmark.png) まとめ リンク設定 今回の記述…
今回は主にHTMLとCSSの両方を記述しました。リンクに関する内容です。 a hrefでリンクの設定 rel=”nofollow" linkタグ まとめ a hrefでリンクの設定 以下、今回の記述内容です。 CSS /*リンク*/a {color: #b77d3c;}a:hover {color: #ff8800;} HTML <p>森の工房</p>…
今回は記事一覧ページを作成しました。 今まで作ってきたページを紹介するページです。サムネの作成もこのテキストでは初めてのことです。 記事一覧ページの作成 まとめ 記事一覧ページの作成 今回はCSSを一切触りませんでした。以下今回のHTMLです。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>お</title></meta></head></html>…
今回はdivタグについて勉強しました。ここまでテキストに記載がなかったので、ネットにある知識を集めて独学で勉強しました。 divタグとは？ div idとは？ まとめ divタグとは？ divタグを言葉で説明すると、特別な意味を持たない特定のブロックとなります。…
今回から新しくnews02とnews03というファイルを作り、2ページ増やしました。 ページの増やし方 まとめ ページの増やし方 ページを増やすのはとても簡単で、新しいHTMLファイルを作り、従来と同じフォルダ内に保存すればいいだけです。同フォルダ内のCSSが適…
今回はHTMLしか触りませんでした。以前指定したタグが生きているので、HTMLだけで問題ありませんでした。 figcaption まとめ figcaption 今回の記述は以下のとおりです。 <figure class="photo-center"> <img src="sunflower.jpg" alt="青空とのコントラストで黄色いひまわりが眩しく輝いています。"> <figcaption>夏のひまわり畑</figcaption> </figure> figureクラス内にfigcaptionで囲ったタイトルをつけることによって…
今回はbackground-imageを使って背景の指定をしました。 background-image まとめ background-image 以下、今回の記述です。 body { font-family: "メイリオ","Hiragino kaku Gothic Pro",sans-serif; background-color: #edede3; margin: 0; background-ima…
今回はheaderにロゴ画像の設定を行いました。 ロゴ画像の設定 vertical-align alt="" まとめ ロゴ画像の設定 以下、今回の記述です。 CSS header h1 { font-family: 'Chango', cursive; font-size: 24px; width: 900px; margin-left: auto; margin-right: au…
前回挿入した画像に対して、記事の回り込み指定をしました。 難しいというよりもややこしいなと感じた部分があったので紹介していきたいと思います。 float figure.photo-left right overflow: hidden clear: both figure.photo-right left img {width: 550p…
今回は画像の配置と画像のレイアウトを整える作業をしました。 画像の配置 figure.photo-center まとめ 画像の配置 以下、今回の記述内容です。 HTML <article> <h1>真夏のひまわり畑</h1> <p>森の工房の隣にある畑は毎年夏になると満開のひまわりの花で黄色く染まります。ひまわ</p></article>…
今回やったことはただひとつ。ヘッダーのフォントを変更しただけです。 ヘッダーのフォントを変更する font-family: 'Chango', cursive; 文字サイズ 余白と横幅の指定 まとめ ヘッダーのフォントを変更する 以下、今回の記述です。 最上部 @import url('http…
今回はヘッダーのデザインを記述していきました。今まで使ったことのある指定ばかりなので、特に難しいと感じることはありませんでした。 ヘッダーのカスタマイズ border-bottom margin-bottom box-shadow padding まとめ ヘッダーのカスタマイズ 今回の記述…
今回記述したのは以下のとおりです。 box-shadow border-radius まとめ box-shadow /*記事*/ article { background-color: #ffffff; width: 900px; margin-left: auto; margin-right: auto; border: solid 1px #aaaaaa; padding: 30px; box-sizing: border-b…
今回はアーティクル部分を罫線で囲み、余白を調整して文章を読みやすくするコーディングをしました。 罫線で囲む padding box-sizing: border-box margin-bottom: まとめ 罫線で囲む 以下今回の記述内容です /*記事*/ article { background-color: #ffffff; …
今回CSSを記述していって、大きな間違いをしていることに気が付きました。 CSSの正しい記述方法 背景色の指定 コメントアウト 余白の指定 まとめ CSSの正しい記述方法 それは、基本的な記述方法です。 以前は下記のように書いていました。 h1 { font-size: 3…
ヘッダーとはサイト名をマークアップするための記述です。ヘッダーがないというサイトは基本的にはありません。フッターはページ最下部に表示させる情報で、コピーライトなどが記述されるのが一般的です。 今回のHTMLの記述内容 <header> <フッター> <small> <h1> まとめ 今回の</h1></small></header>…
引き続きCSS3の記述を勉強していきます。 CSS3の記述内容 CSSの記述方法 font-family font-size line-height まとめ CSS3の記述内容 今回CSSで記述したのは以下のとおりです。 ---------------------------------------------------------------------------…
はじめまして、kokotosuと申します。 このブログでは、ずぶの素人である僕が一からhtml5＆CSS3を勉強した内容を掲載していきます。 僕の備忘録と同時に、ずぶの素人でも独学でhtml5とCSS3を学べるんだってことを証明したいと思います。本当に一からの勉強に…
