WEBデザインの勉強

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

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>

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>