誰でも自分のWebサイトに追加できる8つのクールなHTML効果

誰でも自分のWebサイトに追加できる8つのクールなHTML効果

あなたはあなたのウェブサイトを素晴らしく見せたいです---しかしあなたのウェブ開発スキルは不足しています。





絶望しないでください！クールな効果を備えた豪華なサイトを構築するために、CSSやPHPを知る必要はありません。いくつかの単純なHTMLタグと、コピーアンドペーストの方法を知っていれば問題ありません。



いくつかのクールなHTMLエフェクトを使い始めるために、これらの無料のHTMLエフェクトコードテンプレートをコンパイルしました。彼らはあなたのサイトの機能性とユーザーエクスペリエンスを強化すると同時に、銀行を壊すことはありません。それらはほとんどHTMLですが、これらのクールなコードにはCSSやPHPも含まれている場合があります。





1.HTMLによるクールな視差効果

オンライン広告のあるウェブサイトで視差効果が使用されているのを見たことがあるでしょう。記事を下にスクロールすると、 背景画像がスクロールしているように見える 別のペースで、または広告が表示されます。

または、サイトのさまざまな部分にアクセスすると、背景画像が変わる可能性があります。これは、コンテンツに視覚的な深みを加えるクールな効果であり、そうでなくても理想的です。 基本的なHTMLコードを理解する 。



エフェクトを試して、コードをコピーして W3Schoolsのシンプルな視差スクロール効果 。

最も洗練されたバージョンでは、この効果はHTML、CSS、およびJSの組み合わせです。



先に進み、上記のコードをフェッチします CodePenのヘッダー/フッター視差効果 。

2.スクロール可能なHTMLコメントボックスコード

これは、テキストの長いスニペットをコンパクトな形式にパックできる、シンプルですが便利なHTML要素です。このように、ページ上のスペース全体を占めることはありません。



テキストボックスの色とサイズを試して、ニーズに合わせることができます。

入力：


Putting some text in this box will let you see how large it can stretch to - eventually the scrollbars should show, enabling you to scroll through the text. That's it! :)

少し凝ったものが必要な場合は、次のコードをフェッチすることもできます。 Quackitのカスタマイズ可能なコメントボックス 。

いくつかのテンプレートが用意されていますが、エディターを使用してカスタムコードを手動で変更し、テスト（実行）することもできます。

3.クールなHTMLトリック：強調表示されたテキスト

シンプルでHTMLタグを使用すると、テキストや画像にたくさんのクールな効果を追加できます。それらのすべてがブラウザ間で機能するわけではないことに注意してください。ここで言及されているものは、Google Chrome、Microsoft Edge、およびMozillaFirefoxで機能します。

このHTMLテキスト効果は、タグ。

入力：

Your highlighted text here.

出力デモ：

4.背景画像をテキストに追加する

同様に、テキストの色を変更したり、背景画像を追加したりできます。これは、テキストのフォントサイズが大きい場合に見栄えがします。

入力：

MakeUseOf presents...

同じ効果は、スタイルとフォント要素をテキストに追加することによって達成されます。 鬼ごっこ。

電話がハッキングされているかどうかを確認するにはどうすればよいですか

出力デモ：

5.タイトルツールチップを追加するための便利なHTMLトリック

「操作された」テキストまたは画像の上をマウスでスクロールすると、タイトルのツールチップが表示されます。これらは、画像、リンクされたテキスト、さらにはデスクトップアプリのメニュー項目のWebサイトで使用されているのを見たことがあるでしょう。このHTMLコードを使用して、Webページのプレーンテキストにツールチップを追加します。

入力：

Move your mouse over me!

出力デモ：

6.これまでで最もクールなHTMLトリック：テキストのスクロールまたは落下

Googleで「marqueehtml」を検索すると、小さなイースターエッグが見つかります。上部にスクロール検索結果の数が表示されますか？これは、廃止されたマーキータグによって作成された効果です。このかつてはクールだったHTMLテキスト効果は廃止されましたが、ほとんどのブラウザは引き続きサポートしています。

入力：

I wanna scroll with it, baby!

出力デモ：

あなたはできる さらに属性を追加する スクロール動作、背景色、方向、高さなどを制御します。ただし、注意してください。これらの効果は、使いすぎると非常にイライラする可能性があります。

クールな落下テキスト効果のために、 再びQuackitに向かいます 高度にカスタマイズされたマーキーコードをコピーします。

7.HTMLでクールなスイッチメニューを作成する

最もクールなHTMLトリックは、ダイナミックHTMLエフェクトです。ただし、多くの場合、スクリプトベースです。これは、非常に滑らかに見えることに同意するメニューの1つの効果です。

スタイルシートとスクリプトで機能するため、平均的なHTMLタグよりも少し複雑です。利点は、CSSまたはスクリプトファイルをアップロードする必要がないことです。代わりに、次のコードをWebサイトのセクションに貼り付けるだけです。

入力：


.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}.submenu{
margin-bottom: 0.5em;
}
/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/var persistmenu='yes' //'yes' or 'no'. Make sure each SPAN content contains an incrementing ID starting at 1 (id='sub1', id='sub2', etc)
var persisttype='sitewide' //enter 'sitewide' for menu to persist across site, 'local' for this page onlyif (document.getElementById){ //DynamicDrive.com change
document.write('n')
document.write('.submenu{display: none;}n')
document.write('n')
}function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById('masterdiv').getElementsByTagName('span'); //DynamicDrive.com change
if(el.style.display != 'block'){ //DynamicDrive.com change
for (var i=0; i if (ar[i].className=='submenu') //DynamicDrive.com change
ar[i].style.display = 'none';
}
el.style.display = 'block';
}else{
el.style.display = 'none';
}
}
}function get_cookie(Name) {
var search = Name + '='
var returnvalue = '';
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(';', offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}function onloadfunction(){
if (persistmenu=='yes'){
var cookiename=(persisttype=='sitewide')? 'switchmenu' : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!='')
document.getElementById(cookievalue).style.display='block'
}
}function savemenustate(){
var inc=1, blockid=''
while (document.getElementById('sub'+inc)){
if (document.getElementById('sub'+inc).style.display=='block'){
blockid='sub'+inc
break
}
inc++
}
var cookiename=(persisttype=='sitewide')? 'switchmenu' : window.location.pathname
var cookievalue=(persisttype=='sitewide')? blockid+';path=/' : blockid
document.cookie=cookiename+'='+cookievalue
}if (window.addEventListener)
window.addEventListener('load', onloadfunction, false)
else if (window.attachEvent)
window.attachEvent('onload', onloadfunction)
else if (document.getElementById)
window.onload=onloadfunctionif (persistmenu=='yes' && document.getElementById)
window.onunload=savemenustate
And this code goes wherever you want the dynamic menu to appear.

Topics

- Browsers/Addons

- Web Apps

- How-To Tips

- Cool Software

...and more!
Staff Writers

- Karl Gechlik

- Tina

- Varun Kashyap

...and more!
Miscellaneous

- About

- Contact

- Archives

- Disclaimer

出力デモ：

残念ながら、ここではこの効果を示すことはできません。しかし、元のソース、 ダイナミックドライブ は、このダイナミックHTMLエフェクトの作業コピーを備えています。

8.TableizerでHTMLスプレッドシートを入手する

サイトにスプレッドシートを表示したい場合は、Tableizerに任せてください。データをHTMLテーブルに変換します。 Excel、Googleドキュメント、またはその他のスプレッドシートからの生データを次のコンバータツールに貼り付けるだけです。 tableizer.journalistopia.com 。微調整 テーブルオプション 、次にクリックします それを表にする HTML出力を受信します。

Tableize It！のように、これはおそらくWebサイトで最もクールなHTMLコードの1つです。すべてのハードワークを行います。

クリック HTMLをクリップボードにコピーする HTMLコードをコピーして、Webサイトに追加します。背景色を編集して、見栄えを良くすることを検討してください。

バッテリーアイコンがWindows10を表示していない

これは実際にはHTML効果ではありませんが、非常に便利です。

あなたのサイトのためのよりクールなHTMLコードと効果

HTML、CSS、およびJavaScriptの機能は、Webサイトに驚くべき効果をもたらす可能性のある無制限のオプションを提供します。もっと欲しい？

Webサイトを強化するためにコピーできる8つのクールなHTMLコードを紹介しました。違いはありますが、基本的なHTMLコーディング手法を知っている限り、これらはすべて簡単に実装できます。

共有 共有 つぶやき Eメール 10分で学ぶことができる17の簡単なHTMLコード例

基本的なウェブページを作成したいですか？これらのHTMLの例を学び、テキストエディターで試して、ブラウザーでどのように表示されるかを確認してください。

次を読む 関連トピック
  • プログラミング
  • HTML
  • ウェブ開発
  • ウェブマスターツール
著者について クリスチャンコーリー（1510件の記事が公開されました）

セキュリティ、Linux、DIY、プログラミング、技術の説明を担当する副編集長であり、デスクトップとソフトウェアのサポートに豊富な経験を持つ本当に便利なポッドキャストプロデューサーです。 Linux Formatマガジンの寄稿者であるクリスチャンは、ラズベリーパイのいじくり回し、レゴ愛好家、レトロゲームファンです。

クリスチャンコーリーのその他の作品

ニュースレターを購読する

ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。

購読するにはここをクリックしてください