はじめてHTML5でコーディングする時に注意したいアウトラインとかいろいろ
先日このブログを HTML5 で作り直しました。その時に思った、HTML5 でコーディングするときの基本的な注意書きです。なので、HTML5 をこれからやってみようかなーという人向けです。canvas、video、audio などには触れていません。もっと基本の文章構造、アウトラインについての記事です。また、後半は実際に HTML5 でコーディングする時の tips になってます。 先日このブログ – Webデザインレシピを、HTML5で作り直しました。HTML5 … クライアントさんのページでは、まだ一度も使ったことがないし、勉強のためのサンプルはいくつも作ってみたんですけど、実際に運営しているページで試したいなーと思い、思い切って HTML5 にしました。 とりあえず作ってはみたものの、まだまだ分からないことだらけ。これから HTML5 でコーディングをする時に、とても大事だなーと思っ
よくあるカスタマイズコード functions.php 多め
WordPress のテーマを自作するときに、よく使っているコードのまとめです。主に functions.php に書いている基本的なコードばかりです。私は仕事で Webサイトを作っているので、後半はクライアントさん向けの Webサイト用コードです。 私、Evernote を使ってるんですけど、WordPress をカスタマイズするコード … たくさんクリップしてあって、ちょっとごちゃごちゃしてきたので整理しました … X( その中から一般的に使えるコードだけまとめてみました。個人的によく使うコードなど、一カ所にまとめておきたいなーと思ったのでメモ書きです。全部 WordPress 3.2 になってから、テスト済みです。 WordPress のよくあるカスタマイズ 目次 セッティング関連 ソーシャルボタンを追加 抜粋表示、the_excerpt 関連 タイトルの文字数を制限して表示する 特
ウェブデザインをワンランクアップさせるデザインテクニック『奥行き』の使い方
あなたのウェブデザインをワンランクアップさせる『奥行き』を使いこなすための5つのデザインテクニックを紹介します。 Creating Depth in Web Design: 5 Design Tricks [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに リアリスティックなインターフェイス ラッピングとリボン 遠近法 オーバーラッピング シャドウ おわりに はじめに デザインに『奥行き』を与えると、ウェブサイトをユニークにし、ビジターに忘れがたい印象を与えることができます。それが抽象的な方法なものであっても、奥行きがリアリズムを与えます。グラフィックデザイン、ロゴ、ウェブデザインなどこういった付加的なリアリズムはあらゆるデザインにおいて、興味を引き起こすことができます。 また、奥行きを使うことで、特定のエレメントの強調をしたり、情報の正しい階層を作ることも可能です。フラッ
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
ハイクオリティなWEBデザイン用Photoshopパーツ５０:phpspot開発日誌
50 Ultra High Quality Free Web Design PSD Files | CreativeFan ハイクオリティなWEBデザイン用Photoshopパーツ５０が紹介されています。 全体のデザインPSDなんかもあったりしますが、こうしたパーツのほうが実は使いやすかったりしそうですね。 こういうPSDを提供してくれる方々に感謝しつつ使わせていただきましょう。 関連エントリ かなりクールなPhotoshop用フリーUIキット-PSDファイル50個 シンプルで汎用に使えるWEBレイアウトのPSDソース「Blackbeard template」 色々使えそうなフリーのPSD素材ファイル３０ ボタンやインフォボックスなどを集めたＵＩパーツのPSD
【スマートフォン向け】新規でサイトを作るのに使えそうなの一式。 - CSS HappyLife
前回の更新日が見たくない程に時が流れている今日この頃・・・。 ブログを更新するモチベーションが中々上がらなかったんですが、まだ、だらだらでも良いから書いていきたいなと言う気持ちは有るんです。えぇ。 こんだけ更新が滞ってても、Twitterとかで時々ブログ読んでますって言ってもらえたり、最近なら「今日からできる定時で上がるためのWEB制作効率アップ術 | カッシーのWEBる。」で、【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1 を紹介してもらったりしてうれしい半面、更新して無いなーと、何とも言えない気持ちになったり。 なので、これからはちょろっとでもネタが有れば更新していきたいなーと。 何をモチベーションに更新するかはまだ見つかってないけど＞＜ さて、そんな訳で、今回はスマートフォン向けの新規でサイトを作るのに使えそうな感じの一式です。 【スマートフォン向け】新規でサイトを
透過PNGで枠だけ作って背景をCSS3アニメーションするという新テクニック:phpspot開発日誌
Color Animate Any Shape with a Knockout PNG | CSS-Tricks 透過PNGで枠だけ作って背景をCSS3アニメーションするという新テクニックが掲載されています。 CSS3の登場でハックの幅は広がりましたが、今後こういうテクニックが色々現れてくると思うと楽しみです。 まずはマリリンをかたどった縁の画像を透過PNGで作ります このデモは必見 あとは背景をCSS3の keyframes, animation を使ってアニメーションさせると、なんとマリリンが７色に変化します。これはすごい！ マリリンはたまったものではありませんが、色々応用の効くテクニックかもしれませんね 関連エントリ CSS3で動くプログレスバー作成サンプル IE9にも対応したCSS3リファレンスサイト「css3files」 超シンプルなマークアップで実現できるCSS3による画像を使
就活に打ち勝つポートフォリオWebサイトの作り方 | Webクリエイターボックス
2016年2月18日 Webサイト制作 Webデザイナーとして働く際、自分をアピールするのに最も大切なのがポートフォリオWebサイト。今まで作った作品や自分がどんな人間なのか、何ができるのかを紹介するサイトを作っておけば、就職活動にも大変役立ちます。ここではポートフォリオWebサイトを作る際のポイントや素敵なポートフォリオサイトを紹介します！ ↑私が10年以上利用している会計ソフト！ 最新版書きました！こちらも参考にしてみてください。 ポートフォリオWebサイトを作ろう！2015年版 ポートフォリオWebサイトを作る時のポイント 1. 自己紹介 自分は何者なのか？何ができるのかをわかりやすく完結に紹介します。あまりダラダラ書いても読まれない確立が高いため、大きめのフォント・短い文章で紹介すると効果的です。 「自分はWebデザイナー」という事をはっきり書く 自分ができることをわかりやすく表記
ハンコでアソブ
ハンコでアソブは、フリーの透過PNG消しゴムハンコ素材サイトです。 リンク、使用報告、クレジット記載不要／商用利用可です。 © 2024 ハンコでアソブ. All rights reserved.
Web製作者やブロガーならブックマーク必須な個人商用フリーな5つの画像サービス * 男子ハック
@JUNP_Nです。ブログを書いている時なんかにテキストばっかりじゃ記事が見にくい、何か画像を入れたいなってことがよくあります。そんな時に個人商用問わずフリーに利用できる画像サービスを5つ紹介します。 テキストだけじゃ見にくいので適度に画像を使ってアクセントテキストばかりの記事だと読みにくい。（逆にテキストだけのほうがいいって場合もあるかもしれませんが）。見に来てくれた人が「読みやすい」と感じてもらうためのふ画像も適度に使ったほうがいいだろうし、場合によってはスクリーンキャプチャを使うこともあるでしょう。 僕の場合はテキストだけで記事を書くことができていしまう場合でも、適度に画像を使ったり、上記のように見たらすぐわかる説明のような画像を作ることもしばしば。 基本的にはキャプチャを撮ったり、画像を作ったりしていますが、それ以外にアクセントというかイメージとして画像を使いたい時には画像サービス
jQuery Mobileとは――スマホ時代の到来とWeb制作 (1/3)
「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対応したスマートフォンサイトを手軽に制作できます。 jQuery Mobileを使ったスマホサイト制作の基本から実践的なテクニックまで、ベストセラー「Web制作の現場で使う jQueryデザイン入門」（Web Professional Books）の著者・西畑一馬さんが解説します。（編集部） 「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対
覚えておくと便利そうなWEBデザイナー向けハイクオリティPhotoshop素材１５:phpspot開発日誌
15 new, free and useful PSD files for web designers - Blog of Francesco Mugnai 覚えておくと便利そうなWEBデザイナー向けハイクオリティPhotoshop素材１５。 色々と使えそうなモダンなパーツがそろっています。デザインの際の参考に。 どれかは必ず使えそうな気がするほど豊富にありますね 関連エントリ 色々使えそうなフリーのPSD素材ファイル３０ かなりクールなPhotoshop用フリーUIキット-PSDファイル50個 シンプルで汎用に使えるWEBレイアウトのPSDソース「Blackbeard template」 デザイン色々なフリーのボタンPSD集
WEB標準デザイン、はじめの一歩 ～デザインからマークアップまで～
第6回 岡山WEBクリエイターズのセッション1で発表したスライド内容を全文掲載。第6回 岡山WEBクリエイターズ セッション1『WEB標準デザイン、はじめの一歩 ～デザインからマークアップまで～』 岡山WEBクリエイターズ勉強会でお話した内容を、スライドとともに全文掲載しています。 テキストはあくまで原稿そのままですので、実際に喋った内容とは幾分異なる場合があります。 スライドのPDFをダウンロード 講師概要 SKPRODUCT代表。 デザイン、コーディング、PHPによるシステム構築、ActionScriptを使用したFlashなど、WEB制作全般を行うWEBアーキテクトです。 岡山の大手企業・学校などを中心にWEBサイトと独自に開発したCMSフレームワーク『SEED』の提供を行っています。 本日は、WEB標準デザインはじめの一歩です。 WEB標準というと、技術的なことを想像される方
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://e0166nt.com/blog-entry-889.html
フリーフォントのダウンロードサイト「フォントAC」
チートWeb | これだけ読めば分かるWeb制作者向けニュース
新着記事
Welcome to nginx!
高品質のウェブデザイン用無料素材がダウンロードでき、共有できるサイト -Freebie Pixels
デザインの参考にもなる、シンプルなデザインのWordPressのテーマファイルのまとめ