シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld
画像は使用せずにCSSだけでスタイリングしたタイトル（見出し）のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。 全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。 また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。 以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。 ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。
2014年これからのウェブ制作業界の流れ、伸びる職種、ウェブデザインのトレンドなどのまとめ
数多くのブログで2014年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 キーワードとしては、スマフォ・タブレットなどの小さいサイズのタッチデバイス、レスポンシブ（特に画像）、HTML5/CSS3、ビッグデータ、リスク管理が注目されています。 2014年、ウェブ制作業界全体の流れ ウェブデザインの2014年のトレンド 2014年に大きく変化するウェブデザインの7つの傾向 2014年、注目度の高いIT系の職種・役割 2014年、ウェブ制作業界全体の流れ まずは、2012, 2013年と的確な予測をだしてきたsitepointの2014年のウェブ制作業界の全体の流れから。 10 Web Predictions for 2014 スマートフォン中心の年 最終的にはデスクトップからのアクセスをスマフォが超える HTML5のウェブアプリ
レスポンシブWebデザインでテーブルを使う時の小技
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
文系デザイナーでも大丈夫！レスポンシブWEBサイトをWordPressで作ってみよう
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
次世代HTMLの新仕様「レスポンシブ・イメージ（仮）」についてまとめてみた
レスポンシブWebデザインを実装する際、画像の扱いは一つの課題として残っています。現在、PHPを使用した「Adaptive Images」やJavaScriptを使った「Responsive-Images」などが現実的な対応策としてありますが、どちらもApacheの設定を必要とします。レスポンシブWebデザインが広まって標準的な実装方法の一つになろうとしている今、サーバサイド技術に依存しない解決策が早急に求められています。 そんな中、HTMLの仕様策定の一端を担うWHATWG（Web Hypertext Application Technology Working Group – ワットダブルジーと読む）で、新たな仕様が検討されています。 では、どんな議論がされていて、今どんな状況なのか？ なかなか複雑なことになっているようなので、調べてまとめてみました。 ※この記事は、レスポンシブWeb
MacでコーディングするならCoda2！DreamWeaverから切り替えた使用感などをレビュー！ | PLUS
福岡を拠点にWebサイト制作・iPhoneアプリ制作を行うフリーランス 入江慎吾のWebサイト。 PLUSはワクワクするWebサービスやiPhoneアプリを制作しています。 Macでは有名なエディタCodaがメジャーアップデートされ、Coda2が出ました！あわせてiPadアプリのDiet Codaも出ていて、iPadでもコーディングができる時代に。DreamWeaverを使っていましたが、前から気になっていたCodaをこの機会に使ってみようと思い、購入しましたので使い勝手などをご紹介します。 Coda2で何ができる！？ ほぼDreamWeaverと同じことができます。 ・HTML、CSS、JS、PHP、Rubyなど言語を問わずコーディングができる ・MySQLのかんたんな管理ができる(簡易版phpMyAdminみたいなもの) ・FTP機能もついている ・SSHも使える 動作が軽
HTMLからツイッターbotの作り方まで無料で教えてくれるプログラミング学習サイト『ドットインストール』が素敵｜男子ハック
WebサービスHTMLからツイッターbotの作り方まで無料で教えてくれるプログラミング学習サイト『ドットインストール』が素敵2011年12月22日367 @JUNP_Nです。プログラミングってハードルが高いイメージです。今でこそ何となくわかったり使えるようになったHTMLやCSSも最初は意味不明な文字の羅列でした。そんなプログラミング言語を無料でしかもわかりやすく教えてくれる学習サイト「ドットインストール」の紹介です。 1コマのコンテンツが3分だから空いた時間に学習できる 3分動画でマスターする初心者向けプログラミング学習サイト｜ドットインストール ドットインストールの良いところは3分という短いコンテンツと、今までの学習履歴を管理しやすいというところ。 ログインしたらホーム画面に学習中の項目がどこまで進んでいるかをひと目で確認することができるし、完了したレッスンも確認することができる。 現
試してみよう！Dreamweaver - Adobe HTML5 特設サイト
Dreamweaver CS6 と HTML5 で始めようスマートフォン＆タブレット対応 Adobe® Dreamweaver® は、マルチデバイス時代に対応すべく HTML5 や jQuery Mobile といった最新の技術をサポートし、更に強力な Web 開発ツールとなりました。本サイトでは Dreamweaver の便利な使い方をご紹介します。 本文へ プロパティインスペクタを使って CSS を手軽に追加・編集しよう Dreamweaver のプロパティインスペクタを使って、閲覧中のページに CSS スタイルを手軽に追加したり編集する方法をご紹介します。 ライブコード機能を使って、閲覧中の HTML の構造を確認しよう Dreamweaver のライブコード機能を使って、閲覧中のページのコードを確認する方法をご紹介します。最近は、JavaScript の使用により、ソースコードとブ
Fullscreen API を簡単に試してみた
Web ページ内の任意の要素をフルスクリーン表示可能にする Fullscreen API ですが、お勉強ついでに簡単に試してみました。 ちょっと前、先月の話題になってしまうのですが、Web ページ内の任意の要素をフルスクリーン表示可能にする Fullscreen API に関連して、Mozilla が公開している Gecko:FullScreenAPI が更新されて Firefox Nightly で使えるようになったり、W3C からも Fullscreen （Editor's Draft） が公開されたりと色々動きが活発になってきましたので、いい機会ということで、お勉強ついでに簡単に試してみました。 例えば HTML5 で追加された video 要素は、今まで Flash などのアドオンに頼ってきた動画の Web ページへの埋め込み、再生を HTML 側で対応することを可能にしましたが、
【流行】 レスポンシブWebデザインについて思うこと 【誰得】 | soplog(そぷログ)
レスポンシブWebデザイン、最近巷で賑わっているようですね。 私も自分なりに調べて使ってみましたが、巷で騒がれているような魅力や凄さは感じませんでした。 むしろ、この言葉に飛びついた社内の人間が「マルチ！低コスト！」とはしゃぎだすのが怖いくらいです。 私もちゃんと説明できるよう、備忘も兼ねて記事に残しておきます。 レスポンシブWebデザインとは PC・スマートフォン・タブレットなどの複数のデバイスに対して、HTML側はワンソースで対応した、デザイン・技術のことです。 Media Queries（メディアクエリ）を使う方法が一般的なようです。 （あまり触れられているのを見ませんが、PSPなどのゲーム機でもMedia Queriesは有効なのでしょうか？） 使用上のメリット 制作期間が短く済む 複数のデバイスにワンソースで対応できるので、別々に制作するよりは制作期間は短く済みます。 まぁ、ケー
PCサイトスマホ変換「shutto（シュット）」サービス終了
shutto（シュット）サービス終了 PCサイトのスマホ変換サービス「shutto（シュット）」は、2024年3月31日をもってサービスを終了しました。 今まで多くのお客様にご愛顧いただきましたこと、スタッフ一同深くお礼申し上げます。 ※Webサイト多言語化ツール「shutto翻訳」は「shutto」とは別サービスとなります。 「shutto」はサービス終了となりますが、「shutto翻訳」には影響ございません。 「shutto翻訳」はこちら shutto終了後のスマートフォン変換にお困りの方 株式会社アイスリーデザイン様が提供している「flamingo」サービスでスマートフォン変換が可能です。 詳細は株式会社アイスリーデザイン様にご確認ください。 ■「flamingo」に関してのお問い合わせ先 株式会社アイスリーデザイン 営業本部： 担当 原島(はらしま)/野林（のばやし） お電話でのお
誰でも作れる！ “崩れない”HTMLメルマガ作成術（1/4）- ＠IT
誰でも作れる！ “崩れない”HTMLメルマガ作成術：一撃デザインの種明かし（12）（1/4 ページ） キレイなHTMLメールを作るコツ/Tips盛りだくさん！ ECサイトはもちろん、企業サイトのニュースなど、いまなおプッシュ型の情報配信として支持されるメールマガジン。一時のフィードリーダーの盛り上がりもあり、以前に比べると落ち着きましたが、まだまだメールマガジンの効果は侮れません。 今回は、そんなメールマガジンの中でも、表現力豊かなHTMLメルマガの作り方について、徹底解説します！ 「HTML」自体は、それほど難しくないが…… 「HTML」というマークアップ言語自体はプログラム言語に比べると手が出しやすいので、Webを仕事としていない方でも触れた経験をお持ちの方はいらっしゃるのではないでしょうか？ そういう人にとっては、HTML言語自体はそれほど難しくないと思います。 しかし、そのHTML
最近のFlash騒動やHTML5/JS開発についてまとめ « package a24
AndroidブラウザのFlashPlayerの開発が終了したり、HTML5製の3Dコンテンツが出てきたりで、「Flash終わったの？」とか、「これからはFlashじゃなくて全部HTML5で作った方がいいの？」とか聞かれる事が増えてきたので、ちょっとまめとめてみました。 同じような境遇の方も少くないと思うので、参考程度にどうぞ。 AndroidブラウザFlashPlayerの開発終了について 残念なことにAndroidブラウザのFlashPlayerはバージョン11.1を最後に開発は終了することが発表されました。これについて「AdobeがFlashよりHTML5の方が優秀だと認めた」や「HTML5を推奨していたジョブズの完全勝利！」と考えている方もいるかと思いますが、実際のところどうなのでしょうか。 記事を参考に、開発終了の理由についてまとめてみました。 【参考記事】 ・ Clarific
誰でも作れる！ “崩れない”HTMLメルマガ作成術
誰でも作れる！ “崩れない”HTMLメルマガ作成術：一撃デザインの種明かし（12）（3/4 ページ） HTMLが持つパワーを最大限に引き出す、10のコツ さて、HTMLメールを使う最大の理由は、「画像を使い、自由にレイアウトができる」という点でしょう。そういう意味では、前述の画像を扱ううえでの注意点は、とても重要です。 特に、ネットショッピングやゲームなどのような、大きめの画像を配置してクリックを訴求するようなデザインの場合、「大きい画像を1つの画像として書き出すのではなく、いくつかの部分に分割して、それらを＜table＞要素を使って配置する」というのが一般的でしょう（そして、その中にリンクさせるボタンなどを配置する場合が多いでしょう）。 そんなとき、不明な余白ができてしまうと、とても目立ってしまいます。前述した画像の問題点を把握しておくことは、スムーズに作業を進めるうえで、とても重要です
Webデザイナー & デベロッパー必見！絶対使えるチートシートまとめ | webox blog
フレームワークやらライブラリやら、色々触る機会が多いですよね。 そうやって色々触っていると「あれ、あの関数なんだっけ」みたいな事がよくあります。 そういう時に便利な各種チートシートをまとめてご紹介します。 上はデザイナー向け、下へ行くほどデベロッパー向けになります。 Photoshop Keyboard Shortcuts 忘れがちなショートカット。Win/Mac両対応。 Color theory 壁紙用サイズも多数あります。 Periodic table of typefaces よく使われるフォントを元素周期表にはめ込んだモノ。ぱぱっとどんな感じのフォントなのか確認するときに良さそう。 Git Cheat Sheet Wallpaper どこに入れるか悩んだけど、皆使うべきなのでここにおいとこう。 Ultimate HTML5 Cheatsheat HTML5について網羅したチート
[JS]超軽量で設置も簡単な、透過PNGをIE6で表示するスクリプト -Unit PNG Fix | コリス
Unit Interactiveのエントリーから、透過PNG画像をIE6で表示する、超軽量(2KB)の設置も簡単なスクリプトを紹介します。
CSS Reset - 2019's most common CSS Resets to copy/paste, with documentation / tutorials
The logistics industry has experienced a meaningful changeover with the appearance of the Internet of Things (IoT). By enabling real-time data collection and analysis, IoT has supplied new visibility into logistics operations. This raised visibility is key for keeping up […] Read Article Digital trading services have transformed the investment landscape for stocks, commodities, and other financial
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Coda is now Nova
Loading...
Google Swiffy