パララックスが組み込まれたWordPressテンプレートを集めてみました。 HTMLサイトへ自分で実装するには、JavascriptやCSSの知識が必要だったりと敷居が高いですが、WordPressのテンプレートの中にはパララックスが組み込まれたものも結構ありますので、手軽にパララックスを試してみることができそうです。 過去の記事の「全部無料！パララックスがオシャレなWordPressテンプレート５選でもWordPressのパララックステンプレートを紹介していますので、あわせてご覧ください。

無料なのにハイクオリティパララックスを使ったオシャレなWordPressテンプレートは無料で入手できるものは、まだまだ少ないです。 有料のテンプレートを紹介するブログ記事は良く見かけるのですけどね。 ThemeForestとかで有料のテンプレートを買うのもけっこう勇気がいります。だって高機能なWordPressテンプレートって使いこなすのが難しいですからね。せっかく買ったのにデモサイトみたいなカッコイイ仕上がりにならなくてがっかりしたくないですよね。 パララックスを試してみたいけど、まずは無料でいじってみたいって人のためにパララックスを使った無料のWordPressテンプレートを紹介します。 無料とはいえ、めちゃクオリティ高いです。しかも機能はシンプルなので使いやすいです。 英語わからなくともけっこういけます。 Starter１ページもののテンプレートです。LPにうってつけ。いまどきぽいシ

こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で

どうも、くーへいです。 今回は「レスポンシブデザイン」での使用が想定される、「フレキシブルボックス」についてまとめてみたいと思います。 なお、本記事は「CSS Flexible Box Layout Module Level 1」の2014年5月22日付けの編集者草案（Editor’s Draft）を基に作成しています。 また、「CSS Flexible Box Layout Module Level 1」は未だに策定中であり、現在は2014 年3月25日付の最終草案（Last Call Working Draft）が最新仕様です。 2014年5月22日付けの編集者草案は、2014 年3月25日付の最終草案に微修正を加えたものです。 最初にブラウザの対応状況について注意点 「フレキシブルボックス」で検索すると、いくつかの素晴らしい記事が出てきますが、中には古い記事が多く含まれています。 「

float:leftでの横並びから卒業！ 横並びの左右均等っていうと下記画像がそうですよね。これを実際に作って見ようと思います。 今までだったらこれを作るにはfloat:leftでもってli要素を回りこませて横並びにして、marginやらpaddingやらで装飾するのが一般的ですが、floatを使わないやり方もいくつか存在します。 その中でもflexボックスを使うとまぁ簡単に今回やりたいことが出来ちゃうわけですよ。 まずはHTMLを作っていきます 上の画像を元にulとliでもって形作っていきます。 <ul id="wrap"> <li class="box1 a"><p>ABCDEFG</p></li> <li class="box1 b"><p>HIJKLMN</p></li> <li class="box1 c"><p>OPQRSTU</p></li> </ul> <ul id="wr

その一方で、薄型化、小型化を実現するため、Intel Core Mプロセッサという、超低消費電力を優先したプロセッサを選択しており、MacBook Airシリーズに採用されているCore i5プロセッサで比較すると、2011年頃の処理性能しかない。 ただ、レビューしている際、愛用しているテキストエディタiA Writer Proを中心に、メール、カレンダー、写真、簡単なiPhone動画の編集などをこなしてみると、滞りなくこなすことができた、というのが感想だ。 サブノートPC、あるいはネットブックのポジションとして十分以上の役割を果たしてくれるため、パワーユーザーのメインマシンにこそなり得ないが、多くの時間をMacBookで過ごす事は、非常に現実的だと考えられる。 iPadの競合に？ また、Macの新たなユーザーを開拓する役割として、期待できる。例えば、iPhoneしか使っていない人が選んだ

Photo by slavik_V こんにちは。谷口がお送りします。 Webの仕事を目指している人やプログラミング初心者、さらにはブログをやっている人など、HTMLとCSSを習得したい人は多いと思います。特に最初は「Webサイトを作ってみたいけどどうしたらいいんだろう……」「自分のブログを豪華にしてみたいんだけど、HTMLっていまいちよく分からない……」など、さまざまな悩みがあるのではないでしょうか。 HTMLとは、Webページを作成する時に使用されるマークアップ言語の一つです。 マークアップ言語とは、プログラミング言語と違い「タグ」を使って、「ここからここまでが見出しです」「ここからここまでが一つの段落です」等といった印をつける言語です。基本的にプログラミング言語のような「入力値を取得し計算処理をする」「条件を満たすまで処理を繰り返す」といった処理や計算はできません。 CSSは、Webペ

wordpressはGoogleも明言するようにSEOに非常に有利な構造となっています。その理由は以前も解説したように内部SEOにおいてカスタマイズしやすいという点にあります。Googleのマットカッツ自身のブログもWordPressで構築しているくらいです。 また、近年オウンドメディア等のコンテンツマーケティングが盛んになっていることからWordPressによるオウンドメディア運用を検討されているマーケターも多いのでは無いでしょうか。 しかしWordPressで実際にどのようなデザイン、どのくらい集客力のあるサイトが作成できるのか疑問に思う人も多いでしょう。そこで、今回はWordPressで作られたサイトの中でもデザインと訪問者数において秀逸なサイトを25サイト選んで紹介してみようと思います。これからWordPressでサイトを制作してみようと思う人は要チェックですので、是非ご覧下さい。

a]:flex [&>a]:flex-row [&>a]:justify-between [&>a]:py-[18px] [&>a]:border-t [&>a]:border-lightgray [&>a]:border-opacity-20 [&_li]:my-1 [&_li]:list-['-_'] [&_li]:py-[18px] [&_li]:border-t [&_li]:border-lightgray [&_li]:border-opacity-20 [&_.Label]:transition-all [&_.Label]:w-fit [&_.content]:transition-all [&_.content]:h-0 [&_.content]:pt-0 [&_.content]:px-5 [&_.content]:overflow-hidden [&_.toggle:

こんにちは、梅雨ですね。デザイナーのぺちこです。 Twitterのプロフィールページが新しくなって公開されてから、あっという間に2ヶ月ほど経とうとしています。 自ら変更せずとも順次適応ということで放置をしていたのですが、いつの間にか新しくなっていました。半月前くらいはそうでもなかったような。 先日お仕事でこのあたりを調べる機会があり、割と時間を費やしてしまったので、同じく困った人の手助けになればと思い、カバー画像制作用ガイドPSDを作成しました。 解説はさておき、ひとまずPSDを置いておきます。 Twitter新プロフィールカバー画像制作用ガイドPSDダウンロード では、さっそくTwitter新プロフィールの仕様おさらいをしながら、ガイドPSDについて解説していきます。 Twitter新プロフィールページについて 仕様については様々なメディアでリリース当初から取り上げられてきたので、詳しく

暑いです。めちゃ暑い。５日間炭水化物断ちをしておりましたが、減りしろが少なくなってきて１キロしか減りませんでした。現在65キロ代。もともとスポーツしてていまだ胸囲が100センチあるのでそろそろ限界っぽい。オマケに猛暑でバテてきたので久々に蕎麦をたぐってから蕎麦饅頭１個食べました。１ヶ月ぶりの甘いモンは沁みたです。リバウンドしないように気をつけます。 さて、LINEのクリエーターズスタンプですが、当初はWebからしか買えなかったのですが、ついにアプリ内購入が可能となりました。 こんな感じで最下段に出てきます。 で、現在のランキングは カナヘイさんのシリーズはわたしも全部買いました。しかし・・・正直ほかにはあまり買いたい物がないのである。なのでまだ５つくらいしか買ってない。これについて本日はとくとくと述べたいと思います。 ちゃんとやれば、LINEスタンプは絶対に儲かる ではLINEクリエイター

書籍化し、12万部突破しました。 【SlideShare広告回避用】 https://www.docswell.com/s/morishige/K3MXPZ-howtodesignslides ・PDFは無料でダウンロードできます ・自己学習や勉強会などの目的でしたらご自由にお使いいただけます ・授業・研修への利用はフォーム( https://forms.gle/WwgXTT974xFW78mFA )にご報告ください ・記事への参考資料にする際は適切な出典明記をお願いいたします 【使っているフォントについて】 M+フォント「MigMix1P」です。こちらもメイリオ同様おすすめです。 フリーで使えます。 【個人HP】 > https://mocks.jp > 仕事のご依頼はこちらから 【書籍情報】 デザイン入門：https://amzn.asia/d/4WDsTI6 デザイン図鑑：https

こんにちはデザイナーの藤田です。 テレビなどを見ていて、一時期あまり見かけなかったのに「おや、最近また○○をよく見かけるな。あらためて見るとやっぱりいいな。」なんて思った経験、皆さんもありませんか。 というわけで今回は「おや、最近スプラッシュページを設けたWebサイトよく見かけるな」と感じたので、スプラッシュページ・スクリーンを設けたWebサイトをまとめてみました。 1. TWLVR http://twlvr.com/ フランスの動画・Web制作会社のサイトです。 ローディング完了後、女性の後ろ姿をリピート再生しております。 振り向きそうで振り向かないのが残念ですが、スプラッシュページからスクロールをおこなった後の演出が素敵です。 2. Failsworth 1903 http://www.failsworth1903.com/ イギリスの帽子メーカのサイトです。 国内サイトではあまり見か