web制作
フォントをダウンロードしてwoffに変換する 変換したwoffを「font」フォルダにまとめてcss直下にいれる。 cssに以下のコードを記述css /* webフォント -源ノ角ゴシック- */ @font-face { font-family: "genExtraLight"; src: url("font/SourceHanSansJP-Extr…
スマホサイトで拡大縮小を制限する方法です。 head内に以下のコードを記述します。 <meta name="viewport" content="user-scalable=no">user-scalable=noでユーザーによる拡大縮小を制限しています。 width=device-width, initial-scale=1.0とあわせて以下のように記述すると良いですね。 <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"></meta></meta>
Wordpressでのスマートフォン用のfooter部分のソースコード。スマホでのみ表示を切り替えたいときに使用します。 HTML <footer id="footer"> <section class="footer_cat"> <h1>カテゴリー</h1> <ul> <li><a href="＃">カテゴリ</a></li> <li><a href="＃">カテゴリ</a></li> <li><a href="＃">カテゴリ</a></li> <li><a href="＃">カテゴリ</a></li> <li><a href="＃">カテゴリ</a></li> </ul></section></footer>
Googleニュースのフィードを利用してお好みのニュース一覧を作成 http://billboardtop100.net/2011/09/google-news-rss-feed-api.htmlニュース検索API http://www.crystal-creation.com/web-appli/technical-information/web-api/google/search/news/
オートツイート! −自動ツイート設定サイト− http://autotweet.chatwho.net/connect.php【jQuery】パララックスなwebサイトを作れるjQueryプラグイン「jQuery-Parallax」 http://peers-management.com/2013/02/parallax/
文字の大きさをjQueryを使って変更するスクリプト。 cookieを利用して次回訪問時にも同じ設定を読み込ませる。先ずjquery.cookie.jsをダウンロードして、jQueryと共にheader内で読み込む。header内 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/iquery-1.9.1.min.js"><\/script>')
幅900px高さ80pxの横並びバナーを作成しましたHTML <div id="nav"> <ul> <li id="menu1"><a href="#">メニュ−１</a></li> <li id="menu2"><a href="#">メニュ−２</a></li> <li id="menu3"><a href="#">メニュ−３</a></li> <li id="menu4"><a href="#">メニュ−４</a></li> <li id="menu5"><a href="#">メニュ−５</a></li> </ul> </div>CSS #globalnav li{ float: l…
制作でフォントサイズ変更のJavaScriptが必要になったので調べてみました。ついでにメモ。 フォントサイズを変える「大・中・小」ボタンを実装する方法 | THE HAM MEDIA BLOG http://h2ham.seesaa.net/article/150513682.html CSS切替なしでフォントサイズを…
PHP練習問題
PHP演習 参考テキスト「初めてのPHP5」オライリー ・\nでソースコードを改行 ・XAMMPで日本語環境を作る場合 php.ini 内 default_charset を "UTF-8"に変更 ；をとる mbstring.language = Japanese ；をとる mbstring.internal_encoding を UTF-8に変更 ；を…
zen-coding Set of plugins for HTML and CSS hi-speed coding https://code.google.com/p/zen-coding/ダウンロードページ Zen Coding for Dreamweaver v.0.7.5 https://code.google.com/p/zen-coding/downloads/list
被リンク用 はてなブックマーク yahoo ブックマーク Buzzurl（バザール） 海外 https://delicious.com/ https://www.diigo.com/ソーシャルメディアタイプ http://newsing.jp/ http://matome.naver.jp/ http://www.choix.jp/ http://www.kanshin.com/ http://…
WordPressの優良プラグイン50選、最初にインストールすると超便利！（2013年版） http://netaone.com/wp/wordpress-plugin-first/
ポジションを使ったレイアウト ・ position: relative; と position: abusolute; ・overflowが利かなくなる ・スマホサイトには絶対に向かない
フォントについてCSSのfont-familyについては以下のテキストのみでOK。複雑に記載する必要はない。 body { font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; }フォントサイズ 初期設定は16pxでOK body内ではpxで指定するとよい em(エムと読む…
HYML5 hr,brは使わない。div,spanは継続。 新タグ section header nav article aside footer
jQuery＋CSSによるカルーセルパネルの作り方 http://ascii.jp/elem/000/000/481/481241/HTMLとscript <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <link rel="stylesheet" type="text/css" href="css/common.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></link></meta></head></html>
Minimal setup for scrollable http://jquerytools.org/demos/scrollable/index.htmlHTMLとscript <html lang="ja"> <head> <meta charset="utf-8"> <title>jQuery Tools standalone demo</title> <link rel="stylesheet" type="text/css" href="css/scrollable-buttons.css"> </link></meta></head></html>
日付はdt ddでのタグで記述する。ulは使わない headerのすぐ下に h1 pを書く sectionでh1を囲わない keywordは3つ程度。keywordの文字がbodyに記載されているかどうかをgoogleはチェックしているので、多く入れすぎない デスクリプションにはキーワードを使…
リキッドレイアウトなどで利用できる最小幅を固定するCSS #wrapper { min-width: 300px; display: block; }指定する場所をdivで囲んで使う。最大幅は max-width で指定できる。
検索結果は右カラムが大事 右カラムをみればその単語をつかって客を呼びたい人がどれだけいるのかの指針になる
世界初のWebページ http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
画像置換Javascript http://www.dnolan.com/code/js/rollover/ http://www.kyosuke.jp/yugajs/
ドットインストール 3分動画でマスターするプログラミング学習サイト http://dotinstall.com/WordPress入門 (全23回) http://dotinstall.com/lessons/basic_wordpress
例 #nav li a { width: 160px; height: 60px; display: block; white-space:nowrap; background: url(img/btn.jpg) no-repeat; text-indent:100%; overflow:hidden;text-indent:-9999px;の代わりにtext-indent:100%;を設定する。 white-space:nowrap;を設定…
jQuery userinterfaceよりダウンロード http://jqueryui.com/ http://jqueryui.com/tabs/カスタマイズ <html lang="ja"> <head> <meta charset="utf-8"> <title>jQuery UI Example Page</title> <link href="css/ui-lightness/jquery-ui-1.9.2.custom.css" rel="stylesheet"> <script src="js/jquery-1.8.3.js"></script>…</link></meta></head></html>
jQuery toolsよりDL http://jquerytools.org/demos/tabs/index.htmlカスタマイズすると <html lang="ja"> <head> <title>jQuery Tools standalone demo</title> <script src="js/jquery.tools.min.js"></script> <link rel="stylesheet" type="text/css" href="css/standalone.css"> </link></head></html>
onMouseOverとonMouseOut <ul> <li><a href="#"><img src="img/html.gif" width="306" height="204" alt="web制作科作成課題HTML" onMouseOver="this.src='img/html_o.gif'" onMouseOut="this.src='img/html.gif'"></a></li> <li><a href="#"><img src="img/null.gif" width="306" height="204" alt="web制作科作成課題"></a></li> <li></li></ul>
・ファビコンジェネレーターを使う http://ao-system.net/favicon/index.php ファビコンは通常、ウェブサーバーのルート(ドメインのルート)ディレクトリに favicon.ico を設置すれば認識されます。 ファビコンをルートに設置できない場合、また、ディレクト…
・牧野工房 http://www.makinokobo.com/rule/rule02.html ・株式会社Qript http://met.hanatoweb.jp/guideline/html5/index.html ・sync.D http://www.sync-d.jp/guideline/coding/html.html・コーディングガイドラインを作るときに定めておきたい項目 http:…
