ラベル CSS学習 の投稿を表示しています。 すべての投稿を表示
ラベル CSS学習 の投稿を表示しています。 すべての投稿を表示

2014年9月7日日曜日

css 学習 : border-style

Sketch of VIENNA


Sketch of VIENNA (inset)

Sketch of VIENNA (outset)

Sketch of VIENNA (double)

Sketch of VIENNA (groove)

Sketch of VIENNA (ridge)

2014年8月4日月曜日

木槿

2014年1月13日月曜日

知っていれば楽しい漢字の読み(CSS HTML)

懐疑的

かいぎてき

電子書籍

返報性

時期尚早

しょうそう

喫緊の問題

きっきん

頌春の候

しょうしゅんのこう

如月

きさらぎ

落葉松

からまつ

菖蒲

あやめ

公孫樹

いちょう

CSS TEST 斜体、太字、下線

文字を斜体に、太字に設定しました。

文字に下線を設定しました。

影響力の大きい上司のキーワード (HTML TABLE)

影響力の大きい上司のキーワード
こわい厳格性を身につける
すごい専門性を身につける
すてき人間性を磨く
ありがたい返報性を大切に
ブレない一貫性を持つ

影響力の大きい上司のキーワード
こわい厳格性を身につける
すごい専門性を身につける
すてき人間性を磨く
ありがたい返報性を大切に
ブレない一貫性を持つ

2014年1月11日土曜日

css style test color font-size list-style-type

color is red

color is green

color is yellow

color is blue

color is olve

color is lime

color is gray color is silver color is maroon

color is teal,font-size:xx-small

color is teal,font-size:x-small

color is teal,font-size:small

color is teal,font-size:medium

color is teal,font-size:large

style

color is teal,font-size:x-large

color is teal,font-size:xx-large

  1. apple
  2. pineapple
  3. grape
  4. strawberry
  1. apple
  2. pineapple
  3. grape
  4. strawberry

2014年1月5日日曜日

Oriental Zodiac

干支
Oriental Zodiac〔年・時刻・方角を12単位で表す。子(ネ、ねずみ)、丑(ウシ、牛)、寅(トラ、虎)、卯(ウ、ウサギ)、辰(タツ、龍)、巳(ミ、蛇、ヘビ)、午(ウマ、馬)、未(ヒツジ、羊)、申(サル、猿)、酉(トリ、鶏)、戌(イヌ、犬)、亥(イ、猪)。〕
mouse,cow,tiger,rabbit,dragon,snake,horse,
sheep,monkey,rooster,dog,boar いのしし

2014年1月4日土曜日

記事(テキスト)を色分けして表示させるには?

記事(テキスト)を色分けして表示させるには?

下記のような<SPAN>タグで表現できます。
ピンクの記事 青のの記事 黄色の記事 赤の記事

下記のような<H1>タグで表現できます。

赤い記事

2013年12月17日火曜日

2012年12月31日月曜日

DropDown Menu

作成日:2012.12.31






2012年12月30日日曜日

WEB design: Is that frame hurting your site?

95 SEO Tips and Tricks

Search engine optimization is important if you want to get customers from search engines.
But there are lots of things to think about.
This long checklist shows the things you should do, from most important to least important.

Is that frame hurting your site?

Frames are no longer part of the HTML5 standard because they cause accessibility issues, and there are ways to create similar styles with CSS and the IFRAME element that are more accessible.
But I still see people using frames periodically.
And it always surprises me.
One reason you might consider changing away from a framed site is because of SEO.
It is possible to optimize a framed site for search engines, but it's harder and many people forget to.

This WEB site : from here

2012年12月17日月曜日

CSS: width properties

The width of an element is the distance from the left inner edge of the element to the right inner edge. When you set the width on an element, you don't need to use tables to create text boxes.

This box is created using the width tag on the paragraph. 100 pixels wide. padding:20px

This box is created using the width tag on the paragraph. 200 pixels wide. padding:20px


FROM HERE

CSS Box Properties: Think INSIDE the Box

"Think Outside the Box" - this has become such a cliche in business, but in CSS you want to stay inside of it.

All elements in HTML generate a rectangular box.

This is called the element box.

This box describes the amount of space the element and its properties occupy within the layout of the document.

Each element or box will influence every other box in the document.

For example, if the first element is two inches tall, the element to follow it will be two inches from the top of the document.

If the first element shrinks to one inch, the following element will then be one inch from the top of the document.
 

2012年12月16日日曜日

CSS学習:文字間隔、単語間隔、行間など


文字間隔

文字間隔を2emに設定しました。


単語間隔

The word spacing 2em


行間隔

この段落の行間は標準です。line-height:normal この段落の行間は標準です。line-height:normal この段落の行間は標準です。line-height:normal

この段落の行間は200%です。line-height:200% この段落の行間は200%です。line-height:200% この段落の行間は200%です。line-height:200% 


斜体、太字

文字を斜体にしました。font-style:italic

文字を太字にしました。font-weight:bold

h1からh6タグは標準で太字です。

h1からh6タグは標準で太字でが、font-weight:normal指定です


フォント種類

あいうえお MS 明朝

あいうえお MS ゴシック


下線、上線、末梢線

下線を付加

上線を付加

末梢線を付加


2012年11月25日日曜日

Span and Div


HTML is all about applying meaning to content. Whereas most HTML tags apply meaning (p makes a paragraph, h1 makes a heading etc.), the span and div tags apply no meaning at all, which might sound about as useful as a foam hammer, but they are actually used quite extensively in conjunction with CSS.

They are used to group a chunk of HTML and hook some information on to that chunk, most commonly with the attributes class and id to associate the element with a class or id CSS selector.

The difference between span and div is that a span element is in-line and usually used for a small chunk of in-line HTML whereas a div (division) element is block-line (which is basically equivalent to having a line-break before and after it) and used to group larger chunks of code.
   
    This is crazy

div and especially span shouldn't actually be used that often. Whenever there is a sensible alternative that should be used instead. For example, if you want to emphasize the word 'crazy' and the class 'paper' is bold, then the code might look like this:
    This is crazy

If you haven't got a clue about classes and ID's yet, don't worry, they're all explained in the CSS Intermediate Tutorial. All you need to remember is that span and div are 'meaningless' tags.
出展WEBサイト:from here

2012年11月24日土曜日

earn HTML / CSS / XML

Learn HTML / CSS / XML
By Jennifer Kyrnin, About.com Guide
Once you start building Web pages, you will want to learn the languages that build them. HTML is the building block of Web pages. CSS is the language used to make those Web pages pretty. And XML is the markup language for programming the Web. Understanding the basics of HTML and CSS will help you build better Web pages, even if you stick with WYSIWYG editors. And once you're ready, you can expand your knowledge to XML so that you can handle the information that makes all Web pages function. The information on this page will help you learn the languages that make up the Web.
FROM HERE

11月の花



サフラン
(アヤメ科)
愛への誘い

ハナカタバミ
(カタバミ科)
決して貴方を捨てない

ノコンギク
(キク科)
指導

コウヤボウキ
(キク科)
働き者

2012年10月11日木曜日

マウスを乗せると写真が変わります。

dummy

マウスが乗ると画像が変わる

dummy
同じサイズの2枚の写真を左右に合成します。
最初は、その画像の左半分(1枚目)を表示します
ホバー時に、右側の画像(2枚目)を表示します

影付き文字

この文字に影が付きます。

style="filter: Shadow(Color=#80cc00, Direction=135, Strength=8); height: 1em; color: blue; padding: 0.1em;"

この枠に影が付きます。


style="filter: Shadow(Color=blue, Direction=135, Strength=8); height: 1em; color: red; padding: 0.3em;">

この文字に影が付きます。

style="filter: DropShadow(Color=#ffcc00, OffX=4, OffY=4, Positive=true); height: 1em; color: red; padding: 0.3em;"