読者です 読者をやめる 読者になる 読者になる

WEBデザインの勉強

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

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

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

Photoshopで文字の様々な数値をCSSの値に変換

参考: プロなら知っておきたい!Photoshop文字設定とCSSプロパティの相互関係 | それからデザイン スタッフブログ font-sizeの値をemに変換する Photoshopのフォントサイズ(px)÷ HTMLでの親要素のフォントサイズ(px) 行送りの値をline-heightの値に変換…

文字の2行目以降を字下げする

CSS

「※」や「・」、「☆」等が文字の先頭にきた時に 2行目以降を字下げすると読みやすい。 <p>・テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入りま</p>…

footerを常に最下部に置く方法

参考サイト coliss.com デモはこちら http://efu.sakura.ne.jp/web/footer/ HTML <html lang="ja"> <head> <meta charset="utf-8"> <title>footerを最下部に置く</title> </head> <body> <main> </main> <footer> </footer> </body> </html> CSS html { min-height: 100%; position: relative; } body { margin-bottom: 100px…

YouTubeをレスポンシブデザインに対応させて埋め込む

HTML <div class="movie"> <iframe src="YouTubeの動画ソース"></iframe> </div> CSS .movie { position: relative; width: 100%; //動画の縦横比 padding-top: 縦幅 / 横幅 * 100; iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } 親要素にposition: relativeでiframeにposition: absolute動画の…

HTMLやCSSを省略して書くことができるEmmet

Emmetとは HTML、CSSを省略して書くことができる。 導入方法 SublimeText2などのエディタにプラグインとして配布しているので インストールをする。 使い方 【SublimeTextの場合】 Emmetのコードを打ち、カーソルをコードの最後に置いた状態で 「Ctrl + e」…

レスポンシブWEBデザイン

デモはこちら http://efu.sakura.ne.jp/web/rwd/スライダーはこちらを使用させていただきました。 black-flag.net HTML <html lang="ja"> <head> <meta charset="utf-8"> <title>RWDサイト|応用編</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> </meta></meta></head></html>

HTML/CSS/jQuery・jQueryプラグイン/レスポンシブ

訓練校最終テスト実際のサイトはこちら <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link rel="shortcut icon" href="favicon.ico"> <link rel="icon" href="favicon.png"> <link rel="apple-touch-icon" href="apple-touch-icon.png"> </link></link></link></meta></meta></head></html>

レスポンシブWebデザインの練習

http://d.hatena.ne.jp/webmaster-web/20151003/p1d.hatena.ne.jp モバイルファーストでレスポンシブデザインを作成しました。http://efu.sakura.ne.jp/web/tomato/ HTML <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル</title> <meta name="viewport" content="width=device-width"> </meta></meta></head></html>

レスポンシブウェブデザインの練習

仕様書を元にレスポンシブデザインのWEBサイトを制作する。 仕様書と素材はこちら http://yachin29.hatenablog.com/entry/2015/09/01/042053yachin29.hatenablog.com 980px~ 全体横幅960pxの中央寄せ navのli幅120px641px~979px ヘッダー、フッターは100%…

display:table-cellを使ったタブパネル

デモはこちら http://efu.sakura.ne.jp/web/tab_2/ HTML <html lang="ja"> <head> <meta charset="utf-8"> <title>タブ切り替え</title> <link rel="stylesheet" href="css/style.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/script.js"></link></meta></head></html>

display:table-cellを使って横並びにする

display:tablecellは要素をtableのtd(セル)として表示させるためのスタイル 特徴は ・カラム落ちしない ・全ての高さは一番高い高さと同じになる ・vertical-align:middleで上下中央に配置できる ・要素を均等に配置できる(スマートフォン対応に向いている) <html lang="ja"></html>…

Bootstrap

Bootstrapとは CSSのフレームワーク。 あらかじめある程度CSSが定義されていて、用意されているクラス名を付けるとスタイルが適用される。 h1やh2、blockquote、preなどの要素にもスタイルが指定されているので クラス名を指定しなくてもスタイルが変わる事…

bodyを5分割/hoverでキャプションを移動させる

全画面の上が2分割で下が3分割の計5分割で それぞれをhoverした時にキャプションを上に移動して隠れていたボタンを表示する。 レスポンシブでスマートフォン対応させる。 参考サイト www.vogue.co.jp 講師の解説ブログ yachin29.hatenablog.comhttp://efu…

ベンダープレフィックス

CSS

ベンダープレフィックス(接頭辞)とは、CSS3で採用される予定の機能(草案段階) の仕様を先行実装する場合、拡張機能であることを明示するためにつける。 主要なベンダープレフィックス moz- Firefox webkit- Google Chrome、Safari o- Opera ms- Internet…

positionの練習

CSS

http://efu.sakura.ne.jp/web/position/ width100pxheight100pxのdivを6個作り #containerの 1左上 2右上 3左下 4右下 5真ん中 6真ん中より50pxずつ下 に配置する。 <html> <head> <meta charset="utf-8"> <title>positionの復習</title> <style> #container { width: 800px; height: 600px; margin: 50px aut</meta></head></html>…

Illustratorでロゴを作成しpositionで配置

http://efu.sakura.ne.jp/web/penguincafe/ <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css"> <title>ホーム | Penguin Café</title> </head> <body id="home"> <div id="container"> <div id="header"> <h1></h1> <p class="logo"><a href="#"></a></p></div></div></body></html>

レスポンシブデザイン モバイルファースト

モバイルファーストでスマートフォン用とタブレット用とPC用のレスポンシブデザインを作成しました。こちらを参考にさせて頂きました。 ascii.jphttp://efu.sakura.ne.jp/web/0818/ <html lang="ja"> <head> <meta charset="utf-8"> <title>レスポンシブデザイン(枝豆隊長)</title> <meta name="viewport" content="width=320,initial-scale=1.0"> </meta></meta></head></html>

SVGでアニメーション

SVGとは…Scalable Vector Graphics(スケラブル ベクター グラフィックス) ベクターデータ。引き延ばしても縮めても荒れない。 Illustratorで文字を打つ 打った文字を選択してアウトラインを作成し、グループを解除する。 別名で保存する 形式をSVGにして保…

背景に動画を使用

http://efu.sakura.ne.jp/web/0804/ <html lang="ja"> <head> <meta charset="utf-8"> <title>背景に動画を使用</title> <link rel="stylesheet" href="style.css"> </head> <body> <video id="bgvid" autoplay loop muted> <…</video></body></html>

CSSでグラデーションの練習

CSS

<html> <head> <meta charset="utf-8"> <title>CSSでグラデーションの練習</title> <style> .box { width: 300px; height: 100px; margin: 10px; } .one { background: -webkit-linear-gradient(left, red, blue 50%, green 100%); background: linear-gradient(to right, red, blue 50%, green 100%); } .two { back</meta></head></html>…

グリッドリアウト レスポンシブデザイン

http://efu.sakura.ne.jp/web/okazu/ 講師の解説ブログ yachin29.hatenablog.comブレイクポイントごとにカラム落ちさせる。今回は PC用(3カラム) 960px以上 タブレット用(2カラム) @media screen and (min-width:641px) and (max-width:959px) 641px~95…

メディアクエリ(Media Queries)の練習

http://efu.sakura.ne.jp/web/mediaqueries/ <html lang="ja"> <head> <meta charset="utf-8"> <title>メディアクエリの練習</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { background: #000; } /* スクリーンサイズ1001以上で適用 */ @media screen and (min-width: 1001px) {…</meta></meta></head></html>

1カラムレイアウト スルポンシブ化

以前作った石垣島観光ガイドをレスポンシブに対応させる。mmmmofu.hatenablog.com実際のサイトはこちら http://efu.sakura.ne.jp/web/ishigaki/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>石垣島観光ガイド</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="style.css"> </head> <body> </body></html>

photoshopでスライスした画像をグリッドレイアウトでコーディング

http://efu.sakura.ne.jp/web/0630/ スライスしたい画像を用意する。 スライスしたいところにガイドを引く。(スナップしないので拡大して丁寧に引く) スライスツールを選択する。(切り抜きツール長押し) スライスしたい部分をドラッグする。(ガイドに沿…