タグ: HTML・CSS

HTML・CSSについて。

HTML

HTMLはマークアップ言語で、Webサイトのページの内容を記述する時に使用する。HTMLタグと呼ばれる<タグ名>のようなマークで、文字や画像などページに使用する項目を定義する。

HTMLのルールに沿って書かれた.htmlの拡張子のついたファイルなどをHTMLファイル、HTMLと略して呼んだりする。

CSS

CSSは記述されているHTMLに対して、色を付けたり大きさを指定したり、アウトを指定するための装飾用のファイル。拡張子は主に.css。

拡張子は.htmlや.cssじゃないといけないのか?

HTMLとCSSは.htmlや.cssで記述されることが多いが、プログラムでルールに沿って記述されたコードを表示させることで、HTML・CSSとして表示させることも可能。サーバーの設定やプログラムでそのように表現することも可能。

HTML・CSSを使ってどういった表現が可能か?

  • 見出し
  • 段落
  • リスト
  • テーブル
  • 画像
  • 動画

など様々な要素がある。基本的には縦に要素が表示されるものだと思っていればシンプルに納得できる(厳密に言うと違うが)。
例えば、縦に並ぶ要素を横に並べたいときはCSSを横に並ぶように記述する。

※ただし、横に並べるには横に並ぶようにHTML側もそのように記述しておかなかければいけない

HTMLタグの組み合わせとCSSの組み合わせは対なので、どちらも矛盾がないように記述する。
プログラム言語ではないため、自分で作成したHTML・CSSファイルはエラーが表示されず処理されて表示される。表示された時に思ったようなレイアウトになっていない場合は、どちらかあるいはどちらも記述内容をチェックする。

レイアウトによく使用するプロパティ

レイアウトは表示が問題なければ、以下のプロパティ以外でも可能。

  • display:flex;
  • display:table;
  • width:***px;
  • width:***vw;

文字の設定に使用するプロパティ

様々な単位がある。

  • font-size:***px;
  • font-size:***vw;
  • font-size:***vw;

文字の色変更に使用するプロパティ

文字の色設定は16進数表記やrgba表記でも可能。

  • color:#******;
  • color:rgba(***,***,***,*);

背景に使用するプロパティ

背景は単色・グラデーションの他、画像を使うことも可能。

  • background:#******;
  • background:url(***.***);

印刷など

CSSは印刷の文書も表現できる。単位はmmなども使用可能。

JavaScript

HTMLやCSSを操作するためにあるスクリプト言語。HTMLやCSSと同じように.jsとすればJavaScriptファイルとして認識される。HTML・CSSと違い、記述方法を間違えるとうまく処理結果が表示されないことがある。
※ブラウザに搭載されている

    HTML+CSSでfocus時にoutline(外枠)を表示しないようにする方法

    inputタグやスライダーなどを選択している時に表示される外枠。こちらはoutlineというプロパティ。デフォルトだと表示される設定になっているが、見せたくない場合もある。そういった時はnoneとしてあげることでリセットできる。 inputのCSS 例 input:focus{ outline: none; } :focusという擬似クラスがあるので、設定すると気になるアウトラインが消せる。 *:focus{ outline: none; }

    ★CSSのメディアクエリ(Media Queries)を使い表示を分岐する

    メディアのタイプ 媒体のタイプを指定します。基本的に指定せず、allということで、全ての媒体で同じようにCSSが適用されるようになっています。 スクリーンはよく触れますが、プリンタなどは印刷の指定まで考えていないとなかなか考えませんよね。印刷は簡素にし、印刷用紙にうまくはまるように指定するとより良いです。 テレビ画面は大きいですが、それに合わせた指定も可能です。 @media allすべての媒体 @med...

    HTML+CSSでボタンレイアウトのサンプルコードスニペット

    inputなどのボタンをHTML+CSSを使って表現する・カスタマイズする方法・サンプルコード inputなどのボタン。フォームなどに一つは使う。よく見かけるパーツであるが、色を付けたい、角丸にしたいなど細かいところを指定しないときれいに作れない。結構面倒。 コピペして自分を含めて誰かが楽できればいいんやけど。コピー・アンド・ペースト用のサンプルいくつか準備しましたので使えたら使ってください。 リセット ...

    レスポンシブWebデザイン・100%幅対応 余白付き画像の配置を左右中央に配置し、画面幅が小さいときは最低幅まではカットする方法

    PC向けのCSSとスマートフォン用のCSSをセットで用意します。 PC /********** 100%画像 **********/ #main-visual{ position: relative; overflow: hidden; } #main-visual img{ display:block; position: relative; margin: 0 0 0; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); width: 100%; min-width: 1000px; } スマートフ...

    CSSで属性セレクタを複数指定する方法

    CSSで、属性セレクタを複数指定する方法 CSSの例 input [name="age"]{ } input [type="text"][name="age"] { background: #f00; } 800pxと指定されている幅を900pxに変えてしまう例。 table [width="800"][cellpadding="10"]{ width:900px; }

    HTML+CSSで高さを揃えて、縦横の中心に表示する方法

    HTML <div class="list"> <ul> <li><a href="#"><span><img src="images/img-1.png" alt=""></span></a></li> <li><a href="#"><span><img src="images/img-2.png" alt=""></span></a></li> <li><a href="#"><span><img src="images/img-3.png" alt=""></span></a></li> <li><a href="#"><span><img src="images/img-4.png" alt=""><...

    HTML+CSSでgridを使ったレイアウト方法/サンプル・活用方法

    10×10のグリッドのサンプル例。 HTML <div class="sample-grid"> <div class="grid header">header</div> <div class="grid sub1">sub1 <ul> <li><a href="#">list</a></li> <li><a href="#">list</a></li> <li><a href="#">list</a></li> <li><a href="#">list</a></li> <li><a href="#">list</a></li> </ul> <ul> <li><a hre...

    -webkit-overflow-scrollingを使って惰性スクロールを実現する

    するするーとスクロールする 惰性でするするーとしたいとき。 オーバーフローで、するするーってしたいときー。 -webkit-overflow-scrolling: touch; デフォルト すぐにスクロールを止める。デフォルトはこちら。 -webkit-overflow-scrolling: auto;

    HTML+CSSでボックス内の文字を改行・折り返して表示させる時

    東アジア圏の日本などの国からすると改行なんて単語の途中で折れても大した問題ではないが、海外だと読みづらいのか、ちょうどいいところで改行できないことがある。 ボックス内で文字が折り返さずに表示されるとデフォルトのvisibility:visible;のせいで、文字がボックスの領域からはみ出して表示されてしまうケースがある。改行を禁止していたり、改行の判断が難しい際に起きるみたい。 強制的にすべて改行・折り返す...

    HTML+CSSでflexで可変overflowを実現する方法

    なんと言えばいいのか、うまく言葉にできなかったので、いろいろ文字揺れはあるだろうから、こういうのを実現したいときのアイデア。 やりたかったこと display:flexを使っているdisplay:flexを指定しているboxは可変display:flexを指定している子要素は、固定幅左から右にflex-wrapせずに表示overflowしたいスクロールバーを表示する ということ。HTML、CSSに詳しくない人が、例えば商品の一覧で、フリックできるよ...