HTML

HTML

table(表組み)に関する要素を覚えよう

表組みを表す要素であるtable要素について解説していきます。 table要素は、表組みを表すものでありレイアウト目的での使用は禁止となりました。 (adsbygoogle = window.adsbygoogle || []).push(...
HTML

改行コードCR・LF・CR+LFの違いって何なの?

改行コードの指定でいつも気になっていた「CR」「LF」「CR+LF」って何なんだろうと思い調べましたのでメモしておきます。 (adsbygoogle = window.adsbygoogle || []).push({}); sakuraエ...
HTML

「Font Awesome」利用サンプル集

前回の記事、「Font Awesome」ウェブアイコンフォントの利用方法の続きとして、実際に「Font Awesome」を利用しながら、オプションとして指定できるサンプルを見ていきたいと思います。 ▼目次 アイコンサイズを大きくする アイコ...
HTML

「Font Awesome」ウェブアイコンフォントの利用方法

一昔前は、ナビゲーションやリストマークなどに「シンボルマーク+テキスト」を表示したい場合、「png画像」を背景画像に指定するなどして対応することもありましたが、フラットデザインが流行してからは「Webフォント」を上手に活用してページ自体の高...
HTML

Google HTML / CSS Style Guideを翻訳してみた。

Google HTML/CSS Style Guide (【改正】2016.2.24 ) これまで何となく認識しているルールとか、規則ってありますよね・・・。「決まりがあることは知っているけど、守らなくても成り立っているからまぁいっか・・・...
HTML

文字化け防止のために「文字コード宣言」は必ずしよう!

HTML文書で日本語を使用したファイルは、必ず「文字コード」を指定してから保存しましょう。また、HTML文書内において必ず「文字コード宣言」をすることを忘れないようにしましょう。// // なぜ文字コードの宣言が必要なの?簡単に言ってしまえ...
HTML

スマホサイトで使われるメニューデザイン7タイプ

スマホサイトの作成においてワイヤーを引く際に、まず悩むのが「メニューをどうするか?」ということ。 サイトの印象を大きく左右するその「メニュー」について、それぞれどういったことを考え、適切なメニューのタイプを決めれば良いのか? そのメリットや...
HTML

グリッドレイアウトの基本的なこと。

今回は、WEBサイトを作成する上でのレイアウト手法のひとつ「グリッドレイアウト」について考えていきたいと思います。最近では「フラットデザイン」や「レスポンシブデザイン」など新たな表現スタイルでそれぞれのWEBサイトの個性を出していますが、そ...
HTML

faviconの設定方法

ブラウザのタブなどでよく見かけるマークのようなもの、通称「ファビコン」と呼ばれる画像ファイルを設定したい場合の方法をご紹介します。 // // 指定方法はいくつかありますが、今回はルートディレクトリに「favicon.ico」というファイル...
HTML

何故かページが文字化けしてしまう!?

Webページの文字コードを指定する方法にはいくつか方法がありますが、その指定方法を今一度確認しておきましょう。 最も推奨されている文字コードの指定方法は、HTTPレスポンスヘッダー内にて指定する方法になります。Webサーバは、ブラウザなどの...
HTML

ページ上にソースコードを表示する方法

webページ上に、htmlソースなどを表示したい場合は、「pre要素」と「code要素」を利用します。 「pre要素」は、要素ないのテキストの改行やスペースをそのまま表示してくれますので、インデントなどを含む複数行のコードの場合に使います。...
HTML

相対パスと絶対パスの記述おさらい!

階層が違うファイルを指定する時は、どう記述すればいいんだっけ?「CSS」で画像を指定したい時の相対パスは?そんな基本的な、「相対パス」や「絶対パス」について、ちょっと確認しておこうかなって人へ。 // //  ▼このような階層のサンプルがあ...
HTML

検索エンジンの巡回クロールを回避する方法

サイトの運営をしていく中で、サイトが公開前の準備段階である場合や管理画面URLなど、検索エンジンにクロールされては困る状況があると思いますが、そういった時はHTMLの「metaタグ」による設定方法や「robots.txt」を利用してそれらを...