タグ: HTML

大学や研究結果などの大切な文章をまとめるためにリンクという概念がついた電子文書のフォーマットとして登場。登場時はインターネットは一般的ではなかったし、文章や画像を表示させる程度で精一杯だった。そんななかこの仕様を世界で使えるようにして、Webの今日のスタンダードとして普及したのがHTML。

ハイパーリンクマークアップランゲージというのは、単独のファイルであれば、拡張子は違えど、単なるテキストファイル。.htmlとして作成して、タグを正しく定義していれば立派なHTMLである。
HTMLはタグと呼ばれる決められたルールの文字でテキストやメディアなどを定義することにより、Webページとして作成する。公開して、他のHTML文章などにリンクすることにより、本来のハイパーリンクが活きてくる。

画像や動画、音声などのタグも追加され、将来は一部のメディアでしか使えなかったもの・動かなかったものをHTMLで定義・表現できるようになるかもしれない。

主に、CSSやJavaScriptなどと組み合わせてWebページを作る。装飾できないことはないが、それは過去の制作方法であって、ナンセンスである。レイアウト・装飾はCSSで行うべき。

HTMLは、HTML文書のルールに則って作成されたファイルそのもの、あるいは表示結果として出力されたHTMLのコードを指す。

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

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

    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...

    特定のファイルのみHTML拡張子でPHPとして動作する方法

    .htaccessコード #html -> php <Files "xxxx.html"> AddType application/x-httpd-php .php .html </Files> HTMLの拡張子だけれども、PHPのコードを記述すれば、そのコードがPHPとして動作してほしいときってあるかもしれません。そういう時は、HTMLの拡張子のままPHPとして動作する.htaccessを記述すれば実現できる。 .htaccessとうのはApacheというWebサーバーアプリケーションにオプション・制御・設定を上...

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

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

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

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

    レスポンシブWebデザインの概念・メディアクエリのサンプル

    レスポンシブWebデザインはCSSで、デバイス・ブラウザの画面幅によってレイアウトの切り替えを行うメディアクエリ。画像にmax-width:100%;やwidth:100%;を使って、親要素の幅に合わせ、画像が比率を保ったまま拡大・縮小表示されるフルードイメージ。レイアウトを固定幅ではなく、画面幅に合わせて要素を可変にレイアウトするフルードグリッド。 メディアクエリフルードイメージフルードグリッド この3つをすべて使わな...

    HTML+CSSでフローティングバナーを作成する方法

    フローティングバナーは単純。固定するだけと考えたら、邪魔しない場所に設置するだけ。 HTML <div class="fix"> 固定したい内容 </div> CSS .fix{ position:fixed; right:10px; bottom:10px; border:solid 1px #000; background:#fff; } 注意点 注意点としては、重なるコンテンツを邪魔していないかどうか、フッター付近に固定する場合は、フッターのコンテンツとかぶっても余裕があるように、body下...

    HTML+CSSでフッターを固定する方法

    HTML <div class="fix-footer"> 固定フッター </div> CSS body{ margin:0 0 10vw; } .fix-footer{ width: 100%; position: fixed; bottom: 0; background: rgba(255,255,255,1); } 注意 注意点としては、下部に固定するため、固定した文のマージンを計算して取っておいたほうがいい。

    HTML+CSSでヘッダーを固定する方法・アンカー位置を調整する方法

    position:fixedを使う方法 基本的な考え方としては、ヘッダーを固定して、その固定分高さを確保しておくというもの。 注意しなければいけないのはアンカーの位置がずれてしまうので、それを調整しておく必要がある。 HTML <div id="header"></div> CSS #header{ position:fixed; width:100%; }