多言語Webサイトを制作する時に気をつけたいポイント
2015年12月9日 Webサイト制作, Webデザイン, Wordpress Web業界は他のどの分野よりもグローバル化が進み、今や日本のサイトやサービスを海外の人が楽しんでいることも自然なこととなってきています。これから海外に向けて情報を発信していきたい人も、すでにWebサイトをお持ちの方も、「多言語化」を視野に制作してみませんか？ ↑私が10年以上利用している会計ソフト！ 多言語サイトを作る時のポイント 見えやすい場所に言語選択リンクを置く 時々ページの一番下に言語オプションリンクを設置しているサイトを見かけますが、実際にその機能に気づける人は少ないでしょう。なるべくすぐに目につくような、例えばメインメニュー内や記事タイトルの直下等に置くといいと思います。 CacooのWebサイトではロゴのすぐ隣に言語オプションが設置されています。 国旗アイコンは使うべき？ 言語選択メニューにて、国
[CSS]レスポンシブ対応ページに役立つ機能がまとめられたFlexboxを使ったスタイルシート(Sass対応) -Ocssipital
レスポンシブ対応の柔軟なグリッドをシンプルに、そして簡単に実装することを目的に制作されたひな形として利用できるスタイルシートを紹介します。 レイアウトのベースに最適で、グリッドの設計、デバイスごとに異なるレイアウトや表示・非表示など、レスポンシブ対応ページに役立つ機能が揃っています。 Ocssipital Ocssipital -GitHub 補足: Flexboxの各プロパティの使い方は、以前の記事が分かりやすいと思います。 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 Ocssipitalの特徴と使い方 基本のグリッド ビューポートごとにカラムのサイズを変更 カラム間の溝のサイズ、左右どちらにつけるかも可能 デスクトップでは表示、スマホでは非表示の設定も簡単 Ocssipitalの特徴と使い方 MITライセンスで、商用利用、修正、配布、サブライセンスも許可
![[CSS]レスポンシブ対応ページに役立つ機能がまとめられたFlexboxを使ったスタイルシート(Sass対応) -Ocssipital](https://cdn-ak-scissors.b.st-hatena.com/image/square/85c7ac74adf21dfa1eefc8107e751ebe22fc1082/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015112604.png)
ウェブサイトで事前レンダリングする方法
ウェブサイトで事前レンダリングする方法を紹介します。 １．はじめに 先日発表された、モバイルウェブ高速化を目的としたプロジェクト「AMP」の記事を読んでいたところ、事前レンダリングという手法が使われていることを知りました。 AMPプロジェクト ということで、本エントリーで事前レンダリングについて紹介します。 ２．事前レンダリングとは 事前レンダリング（Prerendering）とは単語が示すとおり、あるページを表示している間に別のページの読み込みとレンダリング実行するものです。 Google検索では、検索結果の1番目に表示されたサイトは、この仕組みを使って事前レンダリングされています。 ３．ウェブサイトで事前レンダリングする ウェブサイトで事前レンダリングするには、ページに下記のlink要素をページに埋め込みます。 <link rel="prerender" href="http://us
11 Free Fresh HTML5 & Responsive WordPress Themes
With this collection, we aim to share another exciting compilation of some responsive WordPress themes. WordPress is a wonderful platform and the huge collection of available themes makes it even more appealing and attractive. This post contains 11 free to use HTML5 and responsive WordPress themes for you. HTML5 comes with many advanced and latest features to give awesome and realistic results. He
HTML5 History APIで非同期通信時にURLを変更する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアの店長です。 先日記事が出てましたが改めて自己紹介します。 大学卒業後はカフェで仕事をしていたのですが、退職して1年半ほどWebデザイナーをしていました。そして、LIGにはフロントエンドエンジニアとしてジョインすることに。 お察しのとおり、店長というアダ名はカフェで働いていたためです。 今後ともよろしくお願いします。 さて、今回はHTML5のHistory APIについてお話したいと思います。 History APIについて History APIには以前からブラウザの履歴（スタック）を行き来する機能があったのですが、HTML5でさらに以下のような機能が追加されました。 画面を遷移せず、履歴に新たなURLを追加する。 現在のページの履歴を変更する。 ブラウザの戻る・進むボタンをクリックしたときにイベントを検知する。 このような機能がどんな場面で使われてい
料金表をわかりやすくデザインするコツ。実例やレスポンシブ対応サンプルも！
2017年10月31日 CSS, Webデザイン, Wordpress サービスを提供しているWebサイトにとって大切なのが、各プラン内容とその料金。複数の選択肢がある場合、その違いがわかりにくかったら、ユーザーを困惑させてしまいます。今回はWebサービスのコンバージョンにも繋がる、わかりやすい料金表の作り方を考えてみたいと思います。 ↑私が10年以上利用している会計ソフト！ 料金表をデザインするときのポイント 1. プランの違いをわかりやすく まずは各プランのサービス内容と料金をわけることから始めましょう。各プランの名前を料金表の先頭において、ひと目でどのプランについてまとめているのかを認識できるようにします。プランをグレードアップするごとにプランの名前もランクが上がるよう命名しましょう。 よくあるプラン名： ブロンズ・シルバー・ゴールド・プラチナ マイクロ・スモール・ミディアム・ラージ
10 Must have Lightbox Libraries For Mobile Responsiveness
In this day and age, responsive websites are in demand which gives rise to another dimension of web development called mobile development where developers are specifically focusing on creating mobile responsive websites. There are plenty of resources used for this purpose and one of them is Lightbox libraries. Lightbox is the popular way to overlay images on the web and many web developers are usi
CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス
CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。 【アップデート: 2022年6月16日】 IEがサポート終了したことにあわせて、修正しました。 【アップデート: 2021年8月1日】 Flexboxの解説を2021年の現状にあわせて、修正しました。 【アップデート: 2020年8月23日】 Flexboxの解説を2020年の現状にあわせて、修正しました。 【アップデート: 2019年3月27日】 Flexboxの解説を2019年の現状にあわせて、修正しました。 【アップ
10 Free Responsive WordPress Themes From 2015
In this post, we are presenting 10 free to use responsive WordPress themes that are recently released in 2015. WordPress is a wonderful platform for blogging as well as professional websites; and what makes it even more interesting and powerful is plentiful themes that are available to custom made your WordPress based website. Here, we have put together 10 awesome WordPress themes released in 2015
Pattern Design – 27 Seamless Free Vector Patterns Graphic Design Junction
Free download vector pattern design available in the formats: AI , PDF, EPS. All patterns are highest quality and seamless created by professionals, can be used for printing onto fabric, paper, scrap booking or website background. This is a beautiful collection of seamless pattern designs you will find heart pattern, floral pattern, retro, stripe and dot shape pattern designs. You may be intereste
24 Free Responsive WordPress Themes for April 2015 | Splashnology.com
Free themes for WordPress for several years already remain a hot trend in search engines. WordPress is the most famous CMS system, which received its popularity due to wide possibilities of customizing your website, regular updates and user-friendly interface. People who are far from web design and development can easily understand and use this system to create their project. If you do not want to
レスポンシブ対応のWebページを制作する時に役立つスクリプトのまとめ
bodyやページ上の各要素にレスポンシブ用のclassを付与、HTML, CSS, JavaScriptで利用できるブレイクポイントを一元管理、設定したブレイクポイントに応じて最適なサイズの画像を表示・レイアウトの変更など、レスポンシブ対応のWebページを制作する際に役立つスクリプトを紹介します。 Restive.JS Restive.JS -GitHub 表示しているデバイスを自動検出し、bodyや各要素に任意に定義したブレイクポイントごとのclassを付与します。ブレイクポイントはピクセルと解像度、プラットフォームやデバイスの種類や向きの判別にも対応。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
20 Free Seamless Icon Patterns for Designers
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
WordPressでミニマルなかっこいいページが簡単に作成できる！無料で高品質なテーマファイルのまとめ
レスポンシブ対応のアイコン素材、単にサイズを変えるだけでなく、デザインを最適化した優れもの！
商用無料でしかも高品質！レスポンシブ対応の美しくデザインされたHTML5/CSS3のテンプレートのまとめ
新着記事
無料でしかも高品質！レスポンシブ対応の美しいWebページを作るためのHTML5/CSS3のテンプレートのまとめ
http://www.designmaz.net/free-responsive-blog-wordpress-themes/
