のはこごと

モノヅクリノハコの中の人の雑記です

AdventCalendar2013

【HTMLとCSSの基礎の基礎講座】その25:ボックスを浮かす、回り込みの解除

ついに25日目です。AdventCalendar企画、最終日です。 筆不精のくせに案外書けたもんだ!ワーイヽ(゚∀゚)メ(゚∀゚)メ(゚∀゚)ノワーイ という事で最終日は【ボックスを浮かす・回り込みの解除】についてです。そう、第一回目でチラッとだけやったあれです。 floatというものを学…

【HTMLとCSSの基礎の基礎講座】その24:番外編!border-radiusを愛でる会

24日目です。いよいよ終盤が近づいてきましたが、この記事は CSS Property Advent Calendar 2013 - Adventar 24日目投稿postです。 一人AdventCalendarを始めて24日目、本日はちょっと変わったことを書きますのでご了承ください。 改めまして初めましてのか…

【HTMLとCSSの基礎の基礎講座】その23:ボックスモデルについて

23日目です。いよいよ残すところあと2回ですよ! よく続けてきた!自分偉い!ひゃっふー! てな訳で、本日のお題は【ボックスモデル】についてです。 ボックスモデル:ブロック要素1つ1つを箱とするイメージ。 <h><p><ul><table>などなど。 この、ボックスの構成要素は、 内容</table></ul></p></h>…

【HTMLとCSSの基礎の基礎講座】その22:webページを作る上で…

22日目です。いよいよ佳境ですね!floatまで行けるのか自信無くなってきましたw という訳で本日のお題【webページを作る上で、ストレスを与えてはいけない】について書いていこうと思います。 ストレスを与えない →CSSをうまいこと使って、画像を減らせばそ…

【HTMLとCSSの基礎の基礎講座】その21:リストに対するCSS

21日目です。本日の内容は【リストマーク(行頭記号)の設定】です。 HTMLで<ol>や<ul>というのが出てきた事は覚えていますでしょうか?箇条書きする際に使ったり、ナビゲーションに使ったりと用途は様々。 list-style-type:値; この値を色々変えていきます。 disk→●</ul></ol>…

【HTMLとCSSの基礎の基礎講座】その20:文字の場所に与えるスタイルについて

20日目です。気がつけばAdventシリーズも残すところあと5回ですね。 最終日は総括になると思うので実質4回。そのうち一回は CSS Property Advent Calendar 2013 - Adventarへの投稿記事になる為、そうなるとあと3回。 んー、当初の予定、floatまで行けるか!?…

【HTMLとCSSの基礎の基礎講座】その19:一括設定について

19日目です。CSSには少し慣れてきたでしょうか? 「装飾」ということを忘れずに! HTMLで組み立てた骨組みを飾り付けていくだけですので、難しく考えず、楽しく 装飾していきましょう! という事で、本日のお題は【一括設定】についてです。 18日目の記事に…

【HTMLとCSSの基礎の基礎講座】その18:文字の装飾

18日目です。完走まであとすこし。筆不精ながらよく書いてるもんです。えらい自分!と、褒め称える事でモチベーションを上げる作戦です。 さて、本日もCSSについてお勉強していきましょう。 では、直接書いてみましょう。 標準 下線 上線 取り消し線 点滅 さ…

【HTMLとCSSの基礎の基礎講座】その17:フォント関係のCSS

17日目です。今回は【フォントに関わってくるCSS】についてです。 まず、大前提なのですが、各ブラウザは標準フォントサイズを定めています。 ブラウザにもよるのですが、だいたい16pxになっています。ですので<p>でくくった時、その<p>タグに関して何も指定してい</p></p>…

【HTMLとCSSの基礎の基礎講座】その16:複合設定について

16日目です。いよいよChristmasまでもう少しですね。 世の中のリア充ども爆発してしまえ!!!とかまったく思っていませんよ^^ では、ほんじつは【複合セレクタ】と【全称セレクタ】についてです。 複合セレクタ →子孫セレクタ。半角スペースで区切ります。 こ…

【HTMLとCSSの基礎の基礎講座】その15:spanとdivについて

15日目です。あっという間ですね。 本日は、<span>と<div>についてですので、ちょこっとHTMLに戻ります。 まず<span>ですが、インラインレベルです。 なにに使うかというと、これがまた使いドコロが難しい。 なぜなら【特に属性をもたせないタグ。属性を追加する為に使用する】</span></span>と<div>…

【HTMLとCSSの基礎の基礎講座】その14:セレクタ・プロパティ・値について

14日目です。そろそろ諦める頃か、はたまたここまで来たなら完走してやろうと思うかの分岐点かと思います。 まあでも、CSS好きな自分としては、せっかくなのでちょいちょいですが書いていこうかなーと思っている次第でございます。 さて、本日の内容は、基礎…

【HTMLとCSSの基礎の基礎講座】その13:CSSとは

13日目です。今回からはCSSのお話になります。 CSSってなんでしょう? Cascading Style Sheetsの略です。 1996年に登場しました。 2004年にCSS2.1登場Mozilla・Operaというモダンブラウザも登場。 2008年にはIE7登場、ほぼCSSをサポート。 CSSレイアウトとは…

【HTMLとCSSの基礎の基礎講座】その12:HTMLとCSS

12日目です。ついに半分くらい来ましたね。という訳で、これからCSSに入っていく前にHTMLのおさらいです。 ●HTMLはテキストファイルです。文章にただ意味だけを与えていきます。装飾はしません。 ●CSSは色や大きさ位置などをレイアウトしていくものです。装…

【HTMLとCSSの基礎の基礎講座】その11:テーブルという表現方法

11日目です。本日は【テーブル】についてのお話です。 テーブルってなんぞ? その昔は、このテーブルこと<table>=表を使ってレイアウトをしておりました。 ですので、別名”テーブルレイアウト”と呼ばれていたのです。 しかし、現在ではレイアウト用に使用する事は</table>…

【HTMLとCSSの基礎の基礎講座】その10:画像の挿入方法

10日目です。もう少しで折り返しですね。意外と毎日続けられてて、筆不精ながらびっくりしています。 さて、本日は【画像の挿入】についてです。また新しいタグがでてまいります。まずは、画像の挿入に必要なタグをひと通り見てみましょう。 <img>←画像のことです…

【HTMLとCSSの基礎の基礎講座】その9:強調・重要性・細目

9日目です。 本日は、今までもあったけれどHTML5から追加されたり使用する際の意味付けが変わったタグをご紹介しようと思います。 <em></em>←強調(斜体)にする。日本語文章だとあまり強調されません! <strong></strong>←重要性(太字)にする。 <small></small>←細目を表す。(小さくする)コピーライトな…

【HTMLとCSSの基礎の基礎講座】その8:インラインレベルとブロックレベル

8日目です。本日のお題は【インラインレベルとブロックレベル】です。 タグはインラインレベルとブロックレベルに分かれます。 ●ブロックレベル→改行される、一つの文章のかたまり。<h><p><ul>などなど ●インラインレベル→改行されない、文章中に用いる。<br><hr><q>などなど ここ</q></hr></ul></p></h>…

【HTMLとCSSの基礎の基礎講座】その7:セクションのお話

一人Advent Calendarも7日目になりました。案外続けられるもんなんだなぁと我ながらびっくりしております。 根っからのめんどくさがりなので、どこかでくじけるかもしれませんがそこはご愛嬌。 さて、本日は HTML5 Advent Calendar 2013 - Adventar7日目エン…

【HTMLとCSSの基礎の基礎講座】その6:全体構成とリスト

6日目です。3日続けば良いかなぁと思っていたので自分でもびっくりです。 今のところ、本当に基礎の基礎しかやってませんが、はたして伝わっているのか? 日本語が苦手です。他国語も苦手です。 もう、人間として詰んでますが、さっそく本日のテーマいってみ…

【HTMLとCSSの基礎の基礎講座】その5:段落・区切り線・改行

5日目です。HTMLは少し見慣れてきたでしょうか? そして自分はこの一人AdventCalendar企画、何日まで続くのでしょうか? 25日全部続けられたらいいいなーとは思いますが、ま、基本的にめんどくさがりなので その辺の保証はできないという常に崖っぷち精神で…

【HTMLとCSSの基礎の基礎講座】その3:タグってなに?

※基本的にはHTML5で解説していきます。 ※あと、画像で解説していないのは、めんどくさかったからです。 3日目です。 本日は、【タグ】についてです。 タグとは、<>で囲まれているものです。日本語だと、付箋とかって意味になるそうな。これでマークアップ、…

【HTMLとCSSの基礎の基礎講座】その2:HTMLってなに?

2日のテーマは【HTMLってなに?】です。 HTMLとは、テキストファイルです。文章にただ意味を与えるだけのもの。 装飾はしません。建物でいうところの基礎です、骨組みです。 文書と文書をつなぐものです。 この「文書と文書をつなぐ」=リンクと言います。 …

12月になったので、Advent Calendar的なかんじで【HTMLとCSSの基礎の基礎講座】というテーマで始めてみよう

12月ですね。 ちまたでは、Advent Calendarが始まりましたね。 今年こそは一人でCalendarやってみようかなーと思いましたが 間違いなく三日坊主になると思うので、気が向いた時にだけ書こうと思います。 では本日1日のネタは、 【CSSってなに?とりあえずflo…