[JS]便利なのが登場！実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts | コリス

2018/08/01 672 users アニメーション 単体 JavaScriptライブラリ コリス

チャートやグラフを実装するのは面倒、と思われがちですが、そんな人にはこのスクリプトをお勧めします。 div要素一つと外部ファイルを一つ、あとはグラフのデータを設定するだけで、さまざまなチャートやグラフが簡単に実装できてしまう単体のJavaScriptライブラリを紹介します。 レスポンシブ対応で、アニメーションに... 続きを読む

コーダーの仕事が楽になる！レスポンシブ対応のさまざまなHTMLテンプレートが驚くほど簡単に作成できる -Aperitif | コリス

2017/09/03 574 users コリス コーダー メールアドレ HTMLテンプレート HTML

ランディングページをはじめ、企業サイトやポートフォリオやブログのページまで、レスポンシブ対応のHTMLテンプレートが驚くほど簡単に作成できてしまう無料オンラインサービスを紹介します。 HTMLのテンプレートとして、すぐに利用できるプロトタイプとして、HTMLの知識はほとんどいらずにほんの数クリックで自分用のHTMLファイルが作成できます。 Aperitif 使い方は、簡単です。 登録やメールアドレ... 続きを読む

CSSの関数はどんどん便利になっている！minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる | コリス

2017/06/14 917 users minmax コリス Calc CSS 関数

CSSの関数には便利なものがたくさんあります。例えば、div要素に「width: calc(100% - 50px);」と指定することで、幅いっぱいから50pxを引いた値を幅に適用できます。 minmax()関数はcalc()関数のように数字やキーワードを使って、要素の最小値と最大値を指定でき、簡単なCSSの記述でレスポンシブ対応の高度なレイアウトを作成できます。 下記のレスポンシブ対応のグリッド... 続きを読む

最近のレスポンシブ対応サイトで見かけるナビゲーションのアイデア・実装方法のまとめ | コリス

2016/10/20 547 users 階層構造 ハンバーガーメニュー 去年 スクリーンサイズ コリス

去年ぐらいはレスポンシブ対応のナビゲーションというとハンバーガーメニューばかりでしたが、最近ではスクリーンサイズに合わせるだけでなく、コンテンツや階層構造に合わせたナビゲーションが増えてきました。 Webページやスマホペ ...記事の続きを読む 続きを読む

レスポンシブデザインにすぐ使える！すごいアイデア30個 | コリス

2016/03/04 662 users DESIGN スクロール フォント トリミング スワイプ

サイトをレスポンシブ対応にするには、デバイスごとのスクリーンサイズ、フォントや画像のサイズだけでなく、クリックとタップ、スクロールとスワイプなどの機能性、そして見た目もサイズだけでなく、配置やトリミングなど、さまざまな取り組みがあります。 レスポンシブデザインにすぐに使える制作テクニックのすごいアイデアを紹介します。 Responsive web design: What the Internet... 続きを読む

無料でしかも高品質！レスポンシブ対応の美しいWebページを作るためのHTML5/CSS3のテンプレートのまとめ | コリス

2015/05/15 547 users ポートフォリオ かっこいいエフェクト 縦長ページ コリス 無料

レスポンシブ対応の縦長ページ、ランディングページ、プロダクトページ、ポートフォリオ、ブログなど、今時のかっこいいエフェクトを備えたHTML5+CSS3の無料のテンプレートを紹介します。 単に使うだけでなく、デザインやHT...記事の続きを読む 続きを読む

無料でしかも高品質！1ページで構成されたサイトを作るためのHTML5/CSS3のテンプレートのまとめ | コリス

2014/12/01 613 users エフェクト コリス 勉強 デザイン 面白いもの

ページのデザインだけでなく、使用されているエフェクトも面白いものが揃っているレスポンシブ対応のHTML5/CSS3のテンプレートを紹介します。 単に使うだけでなく、HTML5/CSS3の勉強、デザインの勉強にもいいですね...記事の続きを読む 続きを読む

20以上のレスポンシブ対応の無料htmlテンプレート HTML5UP | Flips Blog Web担の小技

2014/05/15 508 users Web担 Flips Blog 小技

レスポンシブWebデザインの無料テンプレートサイト、HTML５UPですが、最初は少なかったテンプレートも現在２１になりました。 また、デザインのクオリティも高く非常に人気の高いサイトとなっていますね。 人気の理由の一つであるCC3.0ライセンス。個人でも、商用でも無料で利用でき、自由に改変も可能という１００％フリーの開放っぷりです。 それでは、色々ある中で幾つかご紹介。 Arcana 様々なカラム... 続きを読む

[CSS]次のプロジェクトで使える！スタイルシートの極上テクニックのまとめ | コリス

2014/04/25 540 users div コリス エレメント font-size指定 ボーダー

CSSの進化が止まりません。 ページ上部の打ち出し画像をレスポンシブ対応でうまく配置するテクニック、エレメントにちょっとしたアクセントを加えたい、レスポンシブ用のfont-size指定のうまい方法など、スタイルシートの極上テクニックを紹介します。 Zig Zag Border Created CSS 最近見かけるようなったジグザグのボーダー。画像の使用はなし、divの三角形をたくさん並べるでもなく... 続きを読む

たった一行でさまざまな要素をレスポンシブ対応にするスタイルシート -Fluidity | コリス

2014/03/25 676 users コリス SVG 一行 iframe 要素

画像やテーブル、地図などを配置するiframe, video, canvas, svgなど、主にボックス系のHTML要素をシンプルなコードでレスポンシブ対応にするスタイルシートを紹介します。 外部ファイルとして使用するのでそれでも一行ですが、中身も一行（115文字）の超軽量スタイルシートです。 Fluidity Fluidity -GitHub Fluidityのデモ Fluidityの使い方 F... 続きを読む

なにこれ超便利！レスポンシブデザインのサイトが各デバイスでどう見えるかが一目瞭然！Adsenseの確認にもなるよ！ | なまら春友流

2014/02/10 655 users adsense GoogleAdSense なまら春友流

当サイトはレスポンシブデザインを採用している。 それに合わせて最近GoogleAdsenseのコードをレスポンシブ対応のものに変更した。 その際に面倒なのが、広告が自分のサイトでどう表示されているのかの確認。 キャッシュが残ってたり表示させるガジェットを持っていなかったりという問題があってなかなか簡単に確認できなかったけれど、そんな悩みを一発で解決してくれる便利サイトがあったのでご紹介。 http... 続きを読む