HTMLについての記事一覧

HTML

HTMLでふりがな(ルビ)をふる方法

HTMLで漢字の上に小さなふりがな(ルビ)をふる方法のご紹介です。 「ルビってなに?」ってなる人もいるのでデモをどうぞ! ルビのデモ躊躇ちゅうちょする翻弄ほんろうする 今日は高揚感こうようかんが半端ない この難しい漢字に平仮名をふるのが「ル...
CSS

「z-index」を使わず最も前面に表示する方法

ヘッダーより前にポップアップを出したりする時、ヘッダーより「z-index」を高くして「9999」とかにしてた。 でも、この方法を知ってからもう「z-index」は使わなくなりました。 便利なのでぜひ使って欲しい! この方法はCSSでなにか...
HTML

【HTML】リンクを別ウィンドウで開く方法

リンクを別ウィンドウで開きたい時って結構あるよね。 外部リンクだったり、デモを表示したり、SNSへ飛ばしたり。今回はリンクを別ウィンドウで開く方法のご紹介です。 それではどうぞ! <a href="URL" target="_blank">...
HTML

【HTML】「ul」「ol」の違いとは?使い分けてSEO内部施策に貢献!

HTMLでリストを書くときに便利な「ul」ですが、2つ以上同じスタイルを並べる時もかなり使えます! コーポレートサイトやブログサイトを作成、LPなどを作る時もほぼすべての要素が「ul」で書いちゃいます。 でも、この記述ってあってるのかなと思...
HTML

【HTML】cマークの書き方|特殊文字コードでコピーライトマーク

サイト作ると必ずフッターに入るけど、いつも書き方忘れちゃって検索する羽目になる。 下のコードをHTMLに書くと「©」になります! コピーして使って下さい! © これ日本語で「c」を変換すると似たマルcが出てくるじゃない。 なんで、...
HTML

【HTML】動画(videoタグ)の枠線を消す方法

なぜかPCのchromeとかiPhoneのsafariだと出ちゃう枠線。 必要かな?と思うけど、白背景に白い動画とかだと要るのか。。。 でもvideoタグに枠線は要らないなぁ。 デフォルトで消えてたらいいと思います。 自分で使う基本のCSS...
HTML

テキストエリア(textarea)を変更不可にする方法|HTML

フォームのテキストエリア(textarea)を変更できなくする方法のご紹介です。 テキストエリア(textarea)を変更できなくする場合は「readonly属性」を使います。 DEMO このテキストは消せません(意味はないですが文字をいろ...
HTML

HTMLでリンク先を別タブ・別ウィンドウで表示する方法

リンクを押したら別タブ・別ウィンドウで表示する方法のご紹介。 まずは別タブでの表示方法から。 aタグに「target="_blank"」を書くことで別タブで表示可能です。 別タブでリンクを開く方法 <a href="" target="_b...
HTML

input type属性でブラウザキャッシュを利用する|CSS

LPやメルマガ、お問い合わせやショッピングカートなどウェブでは様々な入力フォームがある。 入力フォームは、とても面倒でその面倒がサービスからの離脱につながります。 私たちフロントの人間は少しでもサービスからの離脱を防ぐため、デザインやスクリ...
HTML

【HTML】外部ファイルの読み込み方法

HTMLで外部ファイルを読み込む時、CSSとJSファイルでは書き方が違うから「あれ?」って忘れがち。 そんな外部ファイル群の読み方まとめ。 外部ファイルには、画像やビデオなどの「コンテンツファイル」と処理が書かれた「プログラムファイル」が存...
CSS

CSSはどこに書くのが最適なのか

CSSの書くところは大きく分けて3つある。 インラインで書く HTMLファイルに直接記述する。 インラインで書く場合、なるべく「head」内にスタイルを記述。 「head」内に書かなくてもスタイリングできるけど、コードが読み辛くなるのでなる...
HTML

HTMLだけ(iframe)で別ページを表示させる方法

別ページを、このページ内にHTMLだけで取得する方法のご紹介です。 自分は別ページの情報を取得するのは、phpの役目と思っていました。が、 「iframe」で取得できることを最近知って驚いたので記事にしました。 「iframe」で別ページを...
HTML

HTMLで非表示要素を追加する方法

HTMLでコメントを入れるときや、この要素は消して表示したいときなどに有効なタグのご紹介です。 <!-- これで囲むと非表示にできます --> <!-- --> <p>これで上の部分は、非表示になります</p>
HTML

【HTML】head内でのファビコン設置方法

HTMLでファビコンを設置する方法のご紹介です。 デバイスが増えるとファビコンも増える。それは言い過ぎかもだけれど本当にいっぱい設定しなくちゃいけません。 標準ブラウザ(chrome,firefox,safari)とAndroid、iPho...
HTML

HTML特殊文字列を一括変換するツールの紹介

ブログにHTMLコードを載せる時、嬉しい変換ツール。 ひとつひとつ変換してたら、記事なんて完成しやしない。 ありがたい諸先輩方のお知恵とサービスをお借りして書かせていただいているので 感謝の気持ちも込めて紹介させていただきたいと思います。 ...
広告