WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

CSS設計 命名規則

CSS

SMACSS CSSのカテゴライズ 1.ベースルール 2.レイアウト 3.モジュール 4.状態(ステート) 5.テーマ OOCSS BEM 参考サイト SMACSS Scalable and Modular Architecture for CSSの略スマックスと読む日本語版の書籍はこちらで購入できる Ja - Scalable and Mod…

Colorbox コールバック関数 独自のクローズボタンを追加

デモ http://efu.sakura.ne.jp/web/colorbox/index2.html以前書いた記事 mmmmofu.hatenablog.com <html lang="ja"> <head> <meta charset="UTF-8"> <title>Colorbox</title> <link rel="stylesheet" href="css/colorbox.css"> <link rel="stylesheet" href="css/style2.css"> </link></link></meta></head></html>

.htaccess ベーシック認証

.htaccess .htaccessというファイルを作成する。 <Files ~ "^\.(htaccess|htpasswd)$"> deny from all </Files> AuthUserFile /www/.htpasswd AuthGroupFile /dev/null AuthName "Please enter your ID and password" AuthType Basic require valid-user order deny,allow一つずつ解説 <Files ~ "^\.(htaccess|htpasswd)$"> deny from all </files>

横ナビゲーションをfixed 横スクロールした時はfixedさせない

横スクロールした分ナビゲーションの位置をマイナスしてついてきていないように見せるデモ http://efu.sakura.ne.jp/web/sidemenu/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>横ナビゲーションをfixed 横スクロールした時はfixedさせない</title> <link rel="stylesheet" href="style.css"> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></link></meta></head></html>

CSS3の色指定 HSL

色をランダムで配置 http://efu.sakura.ne.jp/web/hsl/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>HSL</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> <style> body { background: #333; } </style> </link></meta></head></html>

グリッドレイアウトをソート、フィルタリングできるjQueryプラグイン Isotope

デモ http://efu.sakura.ne.jp/web/isotope/公式サイト isotope.metafizzy.co <html lang="ja"> <head> <meta charset="UTF-8"> <title>Isotope</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>

丸メニュー

デモ http://efu.sakura.ne.jp/web/menu4/ <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>

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/grd/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>グラデーション</title> <link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet"> <link rel="stylesheet" href="style.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"><…</link></link></meta></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 表示年月を移動…