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

WEBデザインの勉強

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

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>

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

右クリック禁止(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>

IE互換モードの設定

<meta http-equiv="X-UA-Compatible" content="IE=edge"> 互換モードの設定しないとユーザーがIEのバージョンを選択できてしまう。 「IE=edge」と指定すると最新の標準モードを指定できる。</meta>

HTML 属性

HTMLの属性とは、要素に情報を付加すること。デモ http://efu.sakura.ne.jp/web/global_attributes/ グローバル属性 全ての要素に使用できる属性 accesskey マウスやトラックパッドが使用できない環境でも リンクや入力フォームの部品をキーボードのキー操作…

HTMLメール

HTMLメールとは テキストのみではなく、HTMLで記述し、画像を挿入したり文字に装飾を加えたりしたメールのこと。 メールソフトによってHTMLの解釈が変わるので注意が必要。 主要メールソフト Gmail thunderbird Outlook 各メールソフトのCSS対応状況はこちら…

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

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

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

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

WEBサイトをiOSでアプリケーションのように表示

WEBサイトをiOSで見た時にSafariのアドレスバーやツールバーを表示させたくない場合 アプリケーションのように表示する方法HTMLのheadに下記metaを記入する <meta name="apple-mobile-web-app-capable" content="yes"> SafariのUIを変更してくれる。ページ遷移をするとSafariに飛んでしまうので JavaScriptでそのまま</meta>…

HTML特殊文字

文字が持つ特別な意味を無効にするために書く。特殊な文字や機能を特別な文字の並びにより表したもの。文字化けを防ぐ 文字表記 &lt; >(大なり/greater than) &gt; &(アンパサンド/ampersand) &amp; ©(コピーライト/copyright) &copy; (半角スペース) &nbsp;…

SNSシェアボタン-LINE

LINE LINEの場合、画像でリンクさせたい場合は画像を用意する必要がある。media.line.me 公式からダウンロードしたり、オリジナルの画像を用意する。 <a href="http://line.me/R/msg/【textもしくはimage】/?【デフォルトで入力されているメッセージ】"><img src="" alt="LINEで送る"></a> 【textもしくはimage】 テキスト情報を送るか画像を送るか選択する 【デフォルトで入力されているメッセ…

SNSシェアボタン-Facebook

Facebook(いいねまたはシェア) developers.facebook.com Facebookで用意されているボタンを使う場合 HTML <div class="fb_btn" data-href="対象のURL" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div> HTML,JS bodyの中に記述しておく <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = …

HTMLの数字(電話番号)にリンクが作成されるのを無効化

スマートフォンで見たとき、 電話番号などの数値が勝手にリンクが作成されることがある。 電話番号リンクの無効化 <meta name="format-detection" content="telephone=no"> 一部のみ設定 <a href="tel:0123456789">123-45-6789</a> 上の電話番号リンクを無効化するmetaを書いた状態でリンクを追加する。Safariのみ有効。</meta>

YouTube動画のパラメーター

基本のコード 貼り付けるYouTube動画から共有→埋め込みで出てくるソース <iframe src="動画のソース" width="560" height="315" frameborder="0" allowFullscreen> src 再生する動画のURL width,height 大きさの設定。縦横比率を間違えると歪む。 小さすぎると再生できない場合がある。 frameborder 埋め込み時のプレイヤーに枠線をつけるかどうか</iframe>…

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

Facebook OGP設定

「Open Graph protocol」の略headにプレフィックスをつける <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"> <meta property="og:title" content=""> ページのタイトル <meta property="og:type" content=""> サイトのタイプ。websiteなど <meta property="og:url" content=""> ページのURL </meta></meta></meta></head>

レスポンシブ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…

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>

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

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…

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>

viewportの設定

viewport Windowの表示領域を設定する。 スマートフォンサイトを制作する際に設定する。 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> width=device-width 端末の幅に合わせる initial-scale ズーム倍率 minimum-scale 最上縮小率の設定 maximum-scale 最大倍率の設定 user-scalable ユーザーがズームで</meta>…

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

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

背景画像を固定/スムーススクロールでTOPに戻る

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.9.1/jquery.min.js"></script> </head> <script type="text/javascript"> $(function(){ var topBtn = $('#to-to…</html>

Favicon

Faviconとは ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。 favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したものである。 ス…

HTML/CSS/jQueryプラグイン

デモはこちら http://efu.sakura.ne.jp/web/atella/ <html lang="ja"> <head> <meta charset="utf-8"> <title>パスタとワインの店 アテラ</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="css/jquery.bxslider.css"> <link rel="stylesheet" href="css/lightbox.css"> </link></link></link></meta></head></html>

フォーム

http://efu.sakura.ne.jp/web/0601/名前→テキスト(1行テキスト) <input type="text" maxlength="10" placeholder="お名前" required autofocus> maxlengthはユーザーが入力できる最大文字数を指定する placeholderはテキストボックス等にあらかじめ入力サンプル文字を表示させることができる requiredは必須項目 autofocuはページを開…

HTML/CSS練習

http://efu.sakura.ne.jp/web/interior/ <html lang="ja"> <head> <meta charset="utf-8"> <title>インテリアショップ The SHOP</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <h1>インテリアショップ The SHOP・・・北欧家具・北欧雑貨</h1> <div id="content"> <h2></h2></div></div></body></html>

HTML/CSS練習

http://efu.sakura.ne.jp/web/cafe67/ HTML <html lang="ja"> <head> <meta charset="utf-8"> <title>cafe67</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="header"> <h1><img src="img/logo.png" alt="cafe67"></h1> </div> <div id="container"> </div></body></html>

positionの練習

デフォルトはstatic常にブラウザの左上にいる。 position: absolute;(絶対値) left: 0; top: 0; 親要素にposition: relative;(相対値)を書く。これが基準となる。 書かない場合は基準はbodyになっている。常にブラウザの左下にいてかつスクロールしても…

HTML/CSSのテスト課題

訓練校1ヵ月目の課題 架空の会社サイトの制作(トップページのみ) メインの画像の作成、スプライトナビゲーションの制作と それに合わせパーツの色やサイトの全体の色彩設計をするhttp://efu.sakura.ne.jp/web/company/ <html lang="ja"> <head> <meta charset="utf-8"> <title>企業系サイト</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> </div></body></html>

2カラムレイアウト

http://efu.sakura.ne.jp/web/egg/ HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>卵料理カフェ Cockeyolly</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="sidebar"> <h1><img src="img/logo.gif" alt="卵料理カフェ Cockeyolly"></h1> <ul> <li>Home</li> <li>ニュース</li> …</ul></div></body></html>

マークアップ実習

前回の続き mmmmofu.hatenablog.com CSSで実際のサイトの見た目を作っていく。http://efu.sakura.ne.jp/web/cats/ HTML <html lang="ja"> <head> <meta charset="utf-8"> <title>うちのにゃんこ</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div id="header"> <h1><span class="star">★</span></h1></div></div></body></html>

CSS復習/縦ナビゲーション

復習 > http://efu.sakura.ne.jp/web/0331/index4.html <html lang="ja"> <head> <meta charset="utf8"> <title></title> <style> body { font-family: "Hiraino Kaku Go" } h1 { background: limegreen; color: #FFF; padding: 10px; margin-bottom: 40px; } p { font-size: 20px; color: #FFF; background:…</meta></head></html>

2カラムレイアウト/float

2カラムレイアウト 2カラムレイアウトではfloat(浮く)をして要素を横並びにする必要がある。floatをすると浮き上がるので下の要素にまで影響がでてしまう。 floatした要素をdivで囲ってoverflow:hidden;をかけると他の要素に影響が出ない。http://efu.sak…

1カラムレイアウト練習

1カラムレイアウト練習 素材を使ったHTML、CSSの練習。 http://efu.sakura.ne.jp/web/0328/ HTML <html lang="ja"> <head> <meta charset="utf8"> <title>ガラスの靴</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div id="header"> <h1><img src="img/main.gif" alt="ガラスの靴の持ち主を捜しています!">…</h1></div></div></body></html>

1カラムレイアウト

http://efu.sakura.ne.jp/web/0327/ 1カラムレイアウト 横並びでない縦に配置する1カラム(縦方向の列)のみで構成されたレイアウト HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>石垣島観光ガイド</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div id="header"> <h1>石垣島観光ガイド</h1> </div></div></body></html>