WEBデザインの勉強

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

CSS

CSS設計 命名規則

CSS

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

丸メニュー

デモ 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>

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>

グラーデーションをアニメーション

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>

フォント

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>

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>…

遅れて付いてくるメニュー

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

テキストを画像でくり抜く

CSS

http://efu.sakura.ne.jp/web/cliptext/ HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>CLIP TEXT</title> <link href="https://fonts.googleapis.com/css?family=Aclonica" rel="stylesheet"> </link></meta></head></html>

Koalaを使用してSassのコンパイルをする

CSS

Koalaとは GUIのコンパイラ 事前準備 Rubyをインストール Sassを使用するにはRubyをインストールしなくてはならない。(MACは標準で搭載) RubyInstaller for Windows Sassをインストール sass-lang.comコマンドプロンプトで gem install sassと打つとインス…

Google Fonts いろいろメモ

CSS

GoogleFontsを色々試したもの http://efu.sakura.ne.jp/web/googlefonts/ HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>Google Fonts</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:700"> </link></link></meta></head></html>

Sass

CSS

sass-lang.com koala-app.com

CSSの記述順序

CSS

厳密な決まりはないが、Mozilaで推薦されているガイドラインがある。https://www.mozilla.org/ja/css/base/content.css (現在観覧不可) /* Suggested order: * display * list-style * position * float * clear * width * height * margin * padding * bord…

cssText

「!important」を使用したい時など $(".rubiks_cube").css({'cssText': 'marginp:0 !important;padding:0 !important;' }); HTMLのstyle属性を上書きするので、 HTMLのstyle属性で指定したstyle、もしくはJSで変更したstyleが無効になる。 参考サイト www.we…

ガラケー(ガラパゴス携帯)のコーディング

DTD(文書型定義) xmlを宣言 XHTMLの場合htmlタグの前に 「XML宣言」と「DOCTYPE宣言」を記入しておく必要がある。 DOCTYPE宣言 XML宣言 <p></p> htmlタグ

はみ出した文字をCSSで文末を「…」にして省略

CSS

1行のみ p { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 複数行 p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } display: -webkit-box; レキシブル ボックス モデルになる …

CSSジェネレーター

www.bad-company.jp box-shadowとborder-radius www.colorzilla.com グラデーションを使ったボタンを作成 www.cssarrowplease.com 吹き出しの3角形を作れる css3generator.com 様々なCSS3 Ui Parade - Live Tools ボタンやリボンを作れるwww.horihavalabo.jp…

CSS3アニメーションライブラリ

Animate.cssMagic Animations CSS3CSS Shake :: Download centerelrumordelaluz.github.io

Font Awesomeの使い方と使いそうなものメモ

Font Awesomeの使い方 Webフォントアイコンを使用すると画像が無くてもアイコンを表示することができる。 CSSでサイズや色を変更したり影をつけたりすることも可能。 大きく表示してもきれいに表示することができる。fontawesome.ioサイトからファイルをダウ…

スマホで高さを合わせて背景fixed

CSS

Mobile Safariでbackground-attachment:fixed;が効かない。 背景を入れたい要素に:beforeで背景を入れ、position:fixedで 同じような効果を出す。 body::before { content: ""; display: block; background: url("../img/common/bg.jpg") no-repeat center t…

position:absoluteで要素を中央配置

CSS

top,leftを50%に指定しネガティブマージンで要素のサイズ半分をマイナスする <div></div> body, html { position: relative; width: 100%; } div { position: absolute; width: 30px; height: 30px; top: 50%; left: 50%; margin-top: -15px; margin-left: -15px; } top…

CSSで先頭の文字のみ大きくする(ドロップキャップ)

CSS

p:first-letter{ font-size: 24px; } first-letter疑似要素はブロックレベル要素の最初の文字にスタイルを適用する。 インライン要素には適用できない。

before after 疑似要素

CSS

「:before」「:after」は指定したに場所に文字等を挿入することができる。 例 p:before { content: "挿入する文字"; } p:after { content: "挿入する文字"; } before、afterで挿入した文字等はドラッグしても選択されない。 (文字として認識されない) SEO…

clearfix

CSS

clearfix 下記のCSSを記述し、 floatをしている要素の親要素にクラス「clearfix」 とつけると下の要素に影響が及ばないようにfloatを解除する(親要素の高さを出す)ことができる。 .clearfix:after { content: '.'; display: block; clear: both; height: 0; …

リセットCSS

CSS

Reset CSS CSS Tools: Reset CSSEric Meyer氏が作成したリセットCSS /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockqu…

フォントファイルを使って文字にフォントを適用させる

CSS

TrueTypeFont(トゥルータイプフォント) 拡張子「.ttf 」「.ttc」 OpenTypeFont(オープンタイプフォント) 拡張子「.otf」 <html> <head> <meta charset="utf-8"> <title></title> <style> @font-face { font-family: MyFont; src: url('font/Outer_Space.ttf') format("truetype"); } html, body, div, h1, h2, h3, </meta></head></html>…

文字を選択(ドラッグ)した時のスタイルを変更する

CSS

参考: metrograph.jp ::selection { background: #D0104C; } ::-moz-selection { background: #D0104C; } rgbaで背景を透過させてもいいかも。 対応ブラウザ Chrome Safari Firefox Opera IE9~ 未対応 IE8 iOS Safari Opera Mini Android Browser

SNSシェアボタン-Twitter

Twitter Twitterボタン | AboutTwitterで用意されているボタンを使用する場合 HTML <a class="twitter-share-button" href="https://twitter.com/share" data-dnt="true">Tweet</a> 「Tweet」という文字がJavaScriptによってシェアボタンに変わる JS body内に記入する <script> window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=w…

IE8対策で注意すること

HTML5の要素に対応していない section、nav、article、aside、header、footer、main、figure、figcaptionなど article, aside, figure, figcaption, footer, header, nav, section { display: block; } 過去に書いた記事: mmmmofu.hatenablog.com CSS3に対…