HTML+CSS+JavaScriptでつくるサイトの定番演出「高級ペライチ」！ HTMLファイ部の「HTML5の鬼」ことほんだです。 カヤック社内では「高級ペライチ」という愛称で呼んでいる縦や横に長い1ページサイト。 スクロールに合わせたパララックスやアニメーションの演出が印象的ですよね。 今回は「高級ペライチ」とググると1位に表示される、 僕のはてブ「高級ペライチ」タグから厳選32サイトを紹介します！ まずは王道！縦に長い高級ペライチ
縦や横に長いサイト「高級ペライチ」1度は見ておきたいスクロール演出のまとめ32個！
HTML+CSS+JavaScriptでつくるサイトの定番演出「高級ペライチ」！ HTMLファイ部の「HTML5の鬼」ことほんだです。 カヤック社内では「高級ペライチ」という愛称で呼んでいる縦や横に長い1ページサイト。 スクロールに合わせたパララックスやアニメーションの演出が印象的ですよね。 今回は「高級ペライチ」とググると1位に表示される、 僕のはてブ「高級ペライチ」タグから厳選32サイトを紹介します！ まずは王道！縦に長い高級ペライチ
Subtle Patterns | Free textures for your next web project
These lovely water-colorful dots will make your designs pop...
リストに1pxのラインを追加するだけで、印象がぐっとよくなる
#sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; border-bottom:1px solid #84b2e0; } 1. 下に薄いラインを追加してみる このリストに1本ラインを加えるだけで全然印象が変わってきます。試しに下に白いラインを追加してみます。 #sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; bord
liquidicity » Panic Over! PHP, CSS & HTML Help Sheets
August 2024 July 2024 February 2024 November 2023 June 2023 April 2023 March 2023 February 2023 January 2023 December 2022 November 2022 October 2022 September 2022 August 2022 July 2022 June 2022 April 2022 March 2022 February 2022 January 2022 December 2021 November 2021 October 2021 September 2021 August 2021 July 2021 June 2021 May 2021 April 2021 March 2021 February 2021 January 2021 December
名刺にパンフレットにWebサイトまで作れちゃう、Adobeの『Project ROME』がすごい！ | ライフハッカー・ジャパン
『Project ROME』は、Adobe製のオールインワンコンテンツ作成ツールです。これがあれば、CDのジャケットやパンフレット、Webサイトなど、18種類ものコンテンツが作れます。ウェブ版とデスクトップ版の2種類が用意されていて、どちらも無料で使えるので、是非お試し下さい。 以下に使ってみた様子を載せておきます。 まず、Project ROMEにアクセスしましょう。 「CREATE」からテンプレートを選べます。コンテンツはこのようにたくさん作れ、名刺、CDジャケット、アニメーションなども作成可能です。 試しに「CD/DVDジャケット」を作ってみます。 プロジェクトはこんな感じです。いかにも高機能って感じが漂っていますね。最下部には、Flashのようなアニメーションバーがあります。 画像や地図を埋め込んだりと、外部ファイルも取り込めるようになっています。 出力は、画像やPDFなど様々。プ
Adobe CS5風のアイコンがとっても簡単に作られるアイコンジェネレータ*二十歳街道まっしぐら（FC2ブログ時代）
「CS5風アイコンジェネレータ」では、Adobe CS5風のアイコンが簡単に作れます。 こんな感じのアイコンが作れるということです。 文字を入力、色を決めるだけで！あとは自動的に作ってくれます。 その場でダウンロードおよびTwitterアイコンに設定ができますよ！ 開発者の方の記事はこちら： お手軽にCS5風のアイコンが作れるIcon Generatorをリリースしました Icon Generatorができるまで～制作レポート～ CS5およびCS4、Web2.0アイコンが作れます。 CS3は過去記事で紹介しています： 綺麗なアイコンがサクっと作れちゃうツール「Icon Generator」 以下に使ってみた様子を載せておきます。 まず、「CS5風アイコンジェネレータ」にアクセスします。 するとこんな感じでジェネレータが表示されます。 好みの文字を入力し、色を指定します。 「アイコンを保存す
タミヤの名刺はプラモデル | WIRED VISION
前の記事 流出原油に挑む技術者たち ジョブズ暗黒卿が活躍する「iPhone 4物語」(動画) 次の記事 タミヤの名刺はプラモデル 2010年7月20日 デザイン コメント： トラックバック (0) フィードデザイン Charlie Sorrel 日本の模型メーカー、タミヤで働いていたとしたら、最高にクールな名刺を持つことができたようだ。 最初はプラスチック製のステンシル・カットのように見えるが、よく見ると小さなプラモデル・キットだということがわかる。周りのフレームから文字を取り外して組み立てると、フォーミュラ・ワンの車になったり、戦艦になったり、戦闘機になったりするのだ。 広告アーカイブ『Coloribus』のページによると、この名刺は大変人気になったため、貰った人はすぐに買いたがったという。 [リンク先によると、2010年6月にタイのSIAM TAMIYA(サイアム・タミヤ)社が展開した
時代の最先端のその先を行くような深すぎるデザインの携帯電話がiida第4弾発表会で展示される
本日行われたKDDIのデザインケータイ「iida」の第4弾「LIGHT POOL」の発表会において、アーティストとのコラボレーション「Art Edition」の第2弾として、時代の最先端のそのまた先を行くような、カッティングエッジな携帯電話のコンセプトモデルが展示されました。 新進気鋭の現代アーティストたちが手がけた、まさにアート作品と言っても過言ではない携帯電話ですが、はたしてどのようなモデルなのでしょうか。 詳細は以下から。 現代日本のアートシーンを代表する彫刻家、名和晃平氏が考案した「PixCell via PRISMOID（ピクセル ビア プリズモイド）」です。昨年発売された深沢直人氏デザインの携帯電話「PRISMOID」をベースにした作品となっています。 付着しているのは「セル（Cell、細胞・器の意）」です。 開いたところ。実用性はともかく、セルが表面に付着している様子がとても
コリス
ページ上で動作するアクティブなビュー遷移にリンクされたすべてのアニメーションを取得するJavaScriptのコードを紹介します。 数行のコードをコピペするだけで使用でき、アニメーションを反転させたり、継続時間を変更したり、キーフレームを変更したりなど、さまざまな操作を実行できます。 ビュー遷移（View Transitions）はSafariでもサポートされ、今年は使用する機会が増えそうですね。
世界のPHPテンプレートエンジン、トップ25
PHPテンプレートエンジンというのは、PHPによるプログラム部分と、HTMLによるデザイン部分を分離することによって、メンテナンス性を向上させることができる、というもの。 プログラムするPHPを扱う側の人にとって見れば、デザイナーの仕上がりを待たずにソースの修正などが可能になり、デザイナー側から見れば、PHPの知識が無くてもテンプレートファイルの部分を変更するだけでデザイン可能になる、というわけ。 そんなPHPテンプレートエンジンの中でも特に有名なトップ25を見てみましょう。 Jaslabs >> Top 25 PHP template engines 中には知らないのも混じってますが、それだけいろいろあるよ、ということで。 Smarty 動作速度の高速さとフレキシブルなところがウリ、かなり有名。 Heyes Template Class とても使うのが簡単で、パワフルらしい。ページレイア
CSS着せ替えテンプレート企画
CDPで用いられているHTML 4.01は最新のバージョンの仕様ではなく、2018年には「Superseded Recommendation（古いもの）」のステータスになっています。 直ちにCDPがブラウザで表示できなくなるということはないですが、 現在CDPを使っている方やこれから導入を考えている方は、より新しい仕様に書き換えての使用を強く推奨します。 2019年6月追記 基礎HTMLをダウンロードしたい方は基礎HTML配布にアクセスしてください なぜこういった形態の配布法をしているのか知るためにはユーザーMENUにアクセスしてください 配布されているCDPを探したい方はCSS配布サイトリンクを利用してください CDPのCSSを自身で作成し配布したい方は制作者MENUにアクセスしてください 疑問点があったり理解を深めたい方はFAQにアクセスしてください このサイトについて CSS着せ替え
「無料で使える画像素材が満載の20サイト！」という記事があったので本当に使えるものだけピックアップしてみた - IDEA*IDEA 〜 百式管理人のライフハックブログ 〜
ドットインストール代表のライフハックブログ
[CSS]スタイルシートの実用的なテクニック集：レイアウト・ナビゲーション・画像・タイポグラフィ・アイコン・ボタン・リンク編
[CSS]スタイルシートの実用的なテクニック集：レイアウト・ナビゲーション・画像・タイポグラフィ・アイコン・ボタン・リンク編
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
ウェブ・印刷デザイン向け、テーマ別・カラー別の色の組み合わせやカラースキームのまとめ
CSSPrism.com
WordPress › Error
新着記事
favicon.ico（ファビコン）の作り方 | IDEA*IDEA
IDEA * IDEA
