WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

inline-blockやfloatで横並びにした時に高さを揃える

デモ http://efu.sakura.ne.jp/web/inline-block/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>inline-blockで横並びにした要素の高さを揃える</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> <link rel="stylesheet" href="style.css"> </head> <body> </body></html>

文字を左からフェードで表示

デモ http://efu.sakura.ne.jp/web/fade/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>フェードアニメーション</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> <link href="https://fonts.googleapis.com/css?family=Sacramento" rel="stylesheet"> </link></link></meta></head></html>

現在いるページのナビゲーションにクラスを追加

デモ http://efu.sakura.ne.jp/web/menu3/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>ナビゲーションのカレント</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> <link rel="stylesheet" href="style.css"> </link></link></meta></head></html>

viewportの変更

デモ http://efu.sakura.ne.jp/web/viewport/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>iPadで見た場合viewportを変更</title> <meta name="viewport" content="width=device-width,user-scalable=no"> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> </link></meta></meta></head></html>

カルーセルスライダー

http://efu.sakura.ne.jp/web/carousel/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>カルーセルスライダー</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> <link rel="stylesheet" href="css/style.css"> </link></link></meta></head></html>

立体的なテキスト

デモ http://efu.sakura.ne.jp/web/text/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>テキスト</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sorts+Mill+Goudy"> </link></link></meta></head></html>

text-shadowいろいろ

CSS

デモ http://efu.sakura.ne.jp/web/textshadow/ HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>textshadow</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> </link></meta></head></html>

画像の遅延読み込みをするjQueryプラグインlazyload

サイトが重い、画像の量が多い時などにGitHub github.comデモ http://efu.sakura.ne.jp/web/lazyload/ HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>lazyload</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/waeb/common/css/reset.css"> <link rel="stylesheet" href="./style.css"> </link></link></meta></head></html>

YouTubeAPI サムネイルをクリックで動画を切り替える

デモ http://efu.sakura.ne.jp/web/youtubeapi/index2.html <html lang="ja"> <head> <meta charset="UTF-8"> <title>YouTube API サムネイルクリックで動画切替え</title> <link rel="stylesheet" href="css/style.css"> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </link></meta></head></html>

ブラウザ判定

デモ http://efu.sakura.ne.jp/web/useragent/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>ブラウザ判定</title> <style> .text { font-size: 32px; text-align: center; margin: 50px 0; } </style> </head> <body> <p class="text">お使いのブラウザは<span></span>です。</p> </body></html>

jQueryでパラパラアニメーション

デモ http://efu.sakura.ne.jp/web/flip/画像1枚ずつ横に動かしてアニメーションさせる <html lang="ja"> <head> <meta charset="UTF-8"> <title>パラパラアニメーション</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> <link rel="stylesheet" href="css/style.css"> </link></link></meta></head></html>

色をアニメーションさせることができるjQueryプラグインjQuery Color

github.comデモ http://efu.sakura.ne.jp/web/hover/jQueryのanimateは数値の値しかアニメーションさせることができない。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>hover</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> <link rel="stylesheet" href="style.css"> </head> …</html>

リストを円形にできるExtremes

公式サイト Extremes jQuery plug-inデモ http://efu.sakura.ne.jp/web/extremes/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>Extremes</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> <style> body { background: #111; color: #666; } .extremes { mar…</link></meta></head></html>

色の変換ができるライブラリRGB color parser in JavaScript

公式サイト RGB color parser in JavaScript / Stoyan's phpied.comデモ http://efu.sakura.ne.jp/web/background/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSの色の値を変換</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> </link></meta></head></html>

HTML5のaudioやvideoの埋め込み・再生ができるjQueryプラグインjPlayer

公式サイト jplayer.orgデモ http://efu.sakura.ne.jp/web/jplayer/ ※音が流れます <html lang="ja"> <head> <meta charset="UTF-8"> <title>jPlayer</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> </link></meta></head></html>

jQuery UI Datepicker

jqueryui.comjqueryui.comgithub.comデモ http://efu.sakura.ne.jp/web/datepicker/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery UI Datepicker</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> </link></meta></head></html>

jQuery UI Slider

公式サイト jqueryui.comデモ http://efu.sakura.ne.jp/web/slider/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery UI Slider</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> </link></meta></head></html>

Easy List Splitter

デモ http://efu.sakura.ne.jp/web/list/公式サイト www.madeincima.it <html lang="ja"> <head> <meta charset="UTF-8"> <title>Easy List Splitter</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> <link rel="stylesheet" href="css/style.css"> </link></link></meta></head></html>

Swiper

jQueryを使用せずに使用できるスライダー公式サイト Swiper - Most Modern Mobile Touch Sliderデモ http://efu.sakura.ne.jp/web/swiper/ <html lang="ja"> <head> <div> <meta charset="UTF-8"> <title>swiper</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> </link></meta></div></head></html>

ドロワーメニュー

デモ http://efu.sakura.ne.jp/web/drawermenu/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>ドロワーメニュー</title> <link rel="stylesheet" href="style.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="script.js"></script> </head> <body> </body></html>

スポットライト

http://efu.sakura.ne.jp/web/mask/以前書いた記事 mmmmofu.hatenablog.combackground-clip: textにした文字「●」をpaddingで動かしてスポットライト風にする。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>スポットライト</title> <link rel="stylesheet" href="style.css"> </link></meta></head></html>

Googleカレンダー埋め込みカスタマイズ

http://efu.sakura.ne.jp/web/googlecalendar/ パラメーター パラメーター 値 デフォルト 内容 showTabs 0(非表示) or 1(表示) 1 週・月・予定リスト切替タブ showPrint 0 or 1 1 印刷 showDate 0 or 1 1 表示年月切替タブ showNav 0 or 1 1 表示年月を移動…

Chromeの翻訳

言語を指定 <meta http-equiv="Content-Language" content="ja"> 翻訳を無効にする <meta name="google" value="notranslate"> <meta name="google" content="notranslate"></meta></meta></meta>

フォント

googlefonts.github.ioデモ http://efu.sakura.ne.jp/web/font-family/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>font-family</title> <link href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css" rel="stylesheet" /> </link></meta></head></html>

マウスオーバーした部分を拡大するjQueryプラグインelevatezoom.js

デモ http://efu.sakura.ne.jp/web/elevatezoom/ 公式サイト http://www.elevateweb.co.uk/image-zoom <html lang="ja"> <head> <meta charset="UTF-8"> <title>elevatezoom.js</title> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="js/jquery.elevateZoom-3.0.8.min.js"><…</meta></head></html>

要素を傾けて斜めにする

デモ http://efu.sakura.ne.jp/web/skew/ <html lang="en"> <head> <meta charset="UTF-8"> <title>傾き</title> <style> h1 { text-align: center; line-height: 500px; font-weight: bold; letter-spacing: 0.05em; font-size: 50px; font-family: "游ゴシック",YuGothic,"Helvetica","ヒラギノ角ゴ ProN W3", "Hiragino…</meta></head></html>

ページャー付きタブ切り替え

デモはこちら http://efu.sakura.ne.jp/web/paging/1ページ目2ページ目3ページ目 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ページャー付きタブ切り替え</title> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="script.js"></script> </meta></head></html>

CSSセレクター

全ての要素に適用 * 子要素子要素にのみ適用 > 隣接している要素にのみ適用 + 後にある要素にのみ適用 ~ 最初の文字に適用 :first-letter 最初の行に適用 :first-line n番目の要素に適用 :nth-of-type(n) 最後からn番目の要素に適用 :nth-last-of-type(n) 過…

画像を保存させないようにする対策

右クリック禁止(PC) 全体(HTML) <body oncontextmenu="return false;"> 画像にのみ(jQuery) $(function(){ $("img").on("contextmenu",function(){ return false; }); }); 長押しアクションを禁止(スマホ) img{ -webkit-touch-callout:none; -webkit-user-select:none; -moz-touch-callout:none; </body>…

SNSシェアボタン

参考サイト creatorclip.info はてなブックマーク はてなブックマークボタンの作成・設置について - はてなブックマーク <a href="http://b.hatena.ne.jp/entry/対象URL" target="_blank">オリジナル画像など</a> google+ボタン +1 Button | Google+ Platform for Web | Google Developers <a href="https://plus.google.com/share?url=対象URL" target="_blank">オリジナル画像など</a>