『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
作成：2013/10/15 更新：2014/11/01 Web制作 > 先週、WordPressとEC-CUBEのレイアウトを変更しなければいけなくて、久しぶりにいじっておりましたが、忘れていたり知らなかったことが沢山ありました。レイアウトはSEOやUIにも深く関係しているのもあり、ここらへんでCSSやHTML５を触るときに参考にすると捗る記事を一回まとめようと思います。今回はCMSやオリジナルサイトを作るうえで「知っておくと必ず役立つ」ものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 定番まとめ １．勉強になるテクニック／サンプルまとめ 基本知識 ２．セレクタ ３．メディア クエリ ４．コーディング規約 ５．フォント ６．CSSスプライト ７．アニメーション ８．正確なHTML使用方法 ９．CSSハック １０．書き方／読み方 定番まとめ
現在、公開しているMaterial - テーマ ストア - はてなブログに ソーシャルボタンについてご相談があったので回答の1つとして実装してみました。 他のテーマを使っている方でもそのままコピペもしくは調整することで使えると思います。 続きを読む jQueryを使ってテーブル内でアコーディオンするための方法をご紹介します。 開くボタンを押すと隠れていたコンテンツが開閉するようになっています。 テーブルをすっきり見せたいけど詳細なども表示させないといけないときのUIとして参考になるかもしれません。 続きを読む はてなブログテーマ「Material」でタイトル画像をアップロードした際、画面に最適化するようにしました。またCSSを追加するだけで海外サイトのように画像に薄い色が重ねっているようなカスタマイズ方法もご紹介します。 続きを読む
IE6/7/8/9/10, Firefox, Chrome, Safari, Operaなどのブラウザだけでなく、Win, Mac LinuxなどのOS、iPadやiPhoneのRetinaディスプレイ用に条件分岐して、外部スクリプトやスタイルシートをロードさせたり、classを付与してHTMLで利用できたりする超軽量高速の単体で動作するスクリプトを紹介します。 Conditionizr Conditionizrの特徴 Conditionizrの使い方 Conditionizrの特徴 ConditionizrはjQueryより50%高速に動作し、条件付きのJavaScriptとCSSをサポートする3KBの超軽量スクリプトです。 条件付きのHTMLタグ 条件付きの外部スクリプトやスタイルシートのロード カスタマイズされたスクリプトにも対応 IE, Firefox, Chrome, Safar
なんだかidea*ideaさんの たった一行でブラウザをシンプルなメモ帳に変える方法 という記事が話題になってまして、ブラウザをメモ帳代わりにするっていうお話なんですが…いろいろ調べてるうちにブラウザ上で動作するエディタができちゃいました。 contenteditableとは 件の記事ではWebブラウザのURL欄に data:text/html, <html contenteditable> というのを入力して開くと、ブラウザ自体がメモ帳のようにテキスト入力できるようになるよ！というネタでして、確かにテキスト入力すると書き込めるようにはなってるんですが残念ながら保存はできません。 ブラウザの【保存】でもhtmlとしてしか保存できないしなんだかテキストは実態参照になって（chromeで保存した場合）たり…といった感じなのです。 そもそもこのコードの【contenteditable】っての自体
う〜ん… HTMLとか英語とかぜんぜんわかりません。みなさま如何お過ごしでしょうか…(,,-_-) 英語とHTMLって同じようなものだよね。アルファベットで書いてあるし…。ﾎﾞｿ ブログは書いているものの、HTML やら CSS やらなんらぜんぜんわかっちゃいない私なんですが、ふとこんな記事を見かけまして…。 あなたのブログのHTMLの文法の綺麗さが点数としてハッキリ現れるウェブサービス「Another HTML-lint gateway」 | 和洋風KAI 赤ハンコと共に、あなたのブログのHTMLの文法が綺麗かどうかチェックしてくれます。ただ、この先生がちょースパルタで、ちょっとのミスさえもドンドン減点していくので、まさに気力と体力の勝負… なるほど… 自分のサイトのHTMLソースコードの文法を採点してくれるし、アドバイスもしてくれるらしい。 サイトのHTMLソースコードの文法を採点 で
調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
2017年7月25日 Webサイト制作, 便利ツール 今より少しでもコーディングを早くできれば、細かいデザインや機能にも時間をかけて取り組めそう…という事で今回はコーディングのスピードを上げるためにできる事を紹介します。便利なツールを使ったり、ちょっとやり方を変えるだけでより早くコーディングができるようになると思います！ ↑私が10年以上利用している会計ソフト！ 1. コーディング手順を簡略化する これは自分のコーディング能力を高めて手順を省く、便利なツールを使って手間を省くという事です。例えば私は昔このような手順でコーディングを進めていました。 CSSのレイアウトをノートに書き出す レイアウト部分（ヘッダー・メイン・サイド・フッター）のHTMLマークアップ CSSでレイアウト部分のスタイリング 表示確認 うまく表示できない箇所の修正 ヘッダー内のHTMLマークアップ CSSでヘッダー内の
HTML5版の新規でサイトを作るのに使えそうな一式です。 今までの新規で使えそうな一式のVer3からも有る程度流用はしていますが、結構いじってます。 今までみたいに、社内のマークアップエンジニアとかそういう人がもう居ない環境なので、何処かで使われていた訳ではありませんが、まー最初の準備って地味に面倒なのでちゃちゃっと始めるには良いんじゃないでしょうか。 【HTML5】新規でサイトを作るのに使えそうな一式。Ver 1をDL（zip：12kb） HTML5版のVer 1を見る 社内のマークアップエンジニアとかって書いたら、これどうなのよ？とか話してた頃がちょっと懐かしくなった。 コーダー飲みとか、CSS Niteなんかで、マークアップエンジニアやコーダーさんと会う機会は結構有るのに、そういう具体的な？話まではしないからなぁ・・・ それはさておき、中身のご説明などを続きにて。 中身のご説明 zi
2017年6月29日 Webサイト制作 「Webサイト勉強するのにおすすめのサイトを教えてください！」との声が多いのですが、日本のWeb関連チュートリアルサイトをあまり見たことがなかったので、今までおすすめできませんでした…。ということでちょっとググって初心者さんによさそうなサイトをいくつか紹介します。小難しい単語が並んであるようなサイトは避けているつもりですが、わかりにくかったらすみません。他にもおすすめサイトがあればぜひコメント欄にて教えてください！ ↑私が10年以上利用している会計ソフト！ Webサイトを作る流れ まずはWebサイトを作る目的を考える 誰のため？何のため？Webサイトを作り始める前に。 サイトマップと呼ばれる構成図を作成 Webサイトの構成図を簡単に作れる便利ツール ワイヤーフレーム（Webサイトのレイアウト）を作成 Webサイトの骨組み: ワイヤーフレームを素早く・
方向アイコンと新規ウィンドウで開くアイコン 140色 カラーコード / カラーネーム FFFTPの使い方 相対単位と絶対単位 絶対パスと相対パス Google アナリティクスに登録 Google アナリティクスとウェブマスターツールの関連付け Wi-Fi Nexus7(2012)の設定例 Wi-Fi iPhone5の設定例 かめぞうブログで使えるHTMLタグ Windows 10 フォルダに格納されているファイルの順番を自由に並び替えできるようにする。 Windows 10のコンテキストメニュー（右クリックメニュー）に「プレビュー」を追加し、Windows フォト ビューアーを起動する方法 管理人の運営サイト、ブログ、SNS等 RAWで撮ろう Life with a camera Life with a camera 2 facebook おすすめサイト 風と樹と空とフリー素材 W3C R
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
