target=”_blank”とは、リンク先を別タブで開くよう指定できるHTMLタグの1つです。 リンク先を別タブで開くよう指定できるメリットとしては、以下のような例があります。 ①現ページ内で音楽を再生している場合、通常リンクをクリックすると、音楽が中断してしまうためそれを防ぐ ②現ページ内でなんらかの編集作業をしている場合、通常リンクをクリック(例えば、画面内のプレビュー)すると、編集データが自動保存されていない場合は、編集データが消えてしまうため、それを防ぐ
Web制作にAdobe系のソフト、Adobe XDとPhotoshopとIllustrator、そして、Creative Cloudを活用している人は多いと思います。ブラウザやスマホなどの閲覧環境が多様化する中、デザインツールや制作のワークフローも大きく進化しています。 今すぐに試したくなるテクニックが満載で、最近のWeb制作のワークフローを効率的にする解説書を紹介します。 本書は現役で活躍しているWeb制作者がAdobe系アプリを現場でどのように使用しているか、Web制作のワークフローを詳しく解説した一冊です。 初心者の人はもちろんのこと、今まで変わらず同じ使い方をしてきたベテランの人にも「こんなやり方があったとは!!」となり、きっと目から鱗だと思います。
Webページに実装されているHTML要素の構造を可視化し、header, nav, main, articleなどセマンティック要素が正しく実装されているか検証できるスタイルシートを紹介します。 デバッグ機能も備えており、不正なマークアップや問題のあるマークアップを表示することもできます。 Construct.css Construct.css -GitHub Construct.cssはセマンティックHTMLの使い方をより身近にするために、スタイルをフックとしてクラス名を使用するのではなく、直接タグをスタイルするCSSのライブラリです。目に見えないセマンティックのタグであることを視覚的に確認することができます。 ブラウザで簡単に利用できるブックマークレットも用意されています。 ブックマークレット Construct.cssのブックマークレット ブックマークレットを使用すると、以下のCSS
翔泳社から、HTML5とCSS3、そしてライブラリのjQueryの基礎を学べる『HTML5&CSS3しっかり入門教室』を7月20日に発売しました。Webのフロントエンド技術はなんとなく理解してコピペで使えているという方もいるかもしれませんが、きちんとした知識を身につけるきっかけにいかがでしょうか。 『HTML5&CSS3しっかり入門教室 ゼロからよくわかる、使える力が身につく。』は、Webのフロントエンド技術に馴染みがない方がまったく初めてから学ぶための入門書です。また、きちんと基礎を学び直したい方にもお勧めです。 フロントエンドの開発に携わる場合、いまではHTML5とCSS3だけでなく、より動的なページを作成するためのJavaScriptやそのライブラリであるjQuery、さらにPHPの知識なども必要です。ユーザーにとってわかりやすく使いやすいUIにするためのデザイン力も強い味方となりま
ペライチだけでなんでもできる 誰でも簡単に売上アップを 目指せるホームページ スマホ対応の本格ホームページがあっという間に。知識がなくても簡単な操作で作成が可能。不安な方へのサポートも充実。フォーム、決済、予約、メルマガ等、ビジネスに必要な機能が低価格でオールインワン
SEO好きですか?私は嫌いです。そんな事に取り組むよりも仕組みやコンテンツの改善に取り組みたいです。今回はそんなSEO嫌いにお送りする、SEO対策集です。やってられないSEOは1日で終わらせてもっと生産的な仕事に集中しましょう! まずは結論から 下記をテンプレートにしていただければ良いです。google検索表示もfacebook表示も上手くいきます。twittercardの表示だけは公式サイト(日本語)より申請がいるのでそれだけしておきましょう。 <title>Qiita - プログラマの技術情報共有サービス</title> <meta content="Qiita - XXX" name="title"> <meta content="ブログ記事詳細. 120字以内を心がけよう。その中でも最初の40字は大事。" name="description"> <meta content='キーワ
GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。 日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法 最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau
WPJが提携するWeb開発者向けメディア「SitePoint」ではCSS開発者を対象にした大規模なアンケート調査を実施しました。その結果から、いま何を学ぶべきかが見えてきました。 CSS開発の現場で実践されている習慣、CSSに関する知識の量、理解度などの情報を集める目的で実施した「究極のCSS調査」には、6週間で1600名以上からの回答が寄せられました。このほど集計が完了したので、結果を発表します! フォローアップコメントと考察、昨年の結果との比較、コメント欄に寄せられた質問の回答も掲載します。 アンケートの結果は以下を参照してください。 結果は上下の矢印でめくりながら見られます。 調査の目的 まず、読者からは調査の目的とフィードバックで得られることについて、質問がありました。私がSitePointのエディターとしてもっとも優先しているのは、読者を理解することです。いろいろな技術に関して、
独創的かつ魅力的なシングルページサイトをつくる。 Adobe Museは、コードを記述せずに「マウスドラッグと数値入力」だけで高度なWebサイトを作成できる画期的なツールです。得意な領域は「シングルページサイト」やページ数が少ない「軽量サイト」で、特にビジュアルデザインを駆使した独創的な「シングルページサイト」で威力を発揮します。 この学習コンテンツでは、Museに搭載されている「スクロール効果」を用いた動的な演出表現を中心に操作方法などを習得していきます。 17分で学ぶ「シングルページサイトを効率的に作成しよう」がメインとなる実習です。この実習で(スクロール効果を採用した)標準的なシングルページサイトの基本形を作成します。また、「スクロール効果」機能をマスターするための講座がSTEP-01から07まで用意されていますので、じっくり時間をかけて挑戦することができます。 Adobe Muse
シンクゼロマガジン・ライト版 Creative Edge School Books の宣伝用マイクロブログギング。 企画・制作・販売している学習コンテンツのリリースやキャンペーンなどの情報をお知らせしています。 URL: http://design-zero.tv/ 公式サイトをご覧ください。 現在、ブログを公式サイト( http://design-zero.tv/ )に移行中です。 公式サイト( http://design-zero.tv/ )には活動報告や学習コンテンツの情報を掲載しています。
以前から、「Webサイトを制作をしたいけど、何から勉強したらいいの?」という質問をよく頂いていました。私が Web制作を勉強し始めた頃に比べると、最近はたくさん情報がありすぎて何から始めればいいのか迷う人も多いみたい …。なので今回は、Webサイトを作るのに必要な知識を簡単にまとめてみました。 最近本だなを整理していて、もう読まなくなった Web制作系の本を片付けたりしてみました。ずーっと前、Webサイトってどうやって作るんだろうってところから始まって、用語もよく分からないまま色んな本を読んだりした頃を思い出します …。 Webサイトは HTML っていうものでできていて、CSS っていうもので、見た目をデザインしていくのかぁ … っていうことさえ、あの頃の私にとっては新しい発見だったなぁ … なんて思ったりしました。 最近では HTML5 とか CSS3 とか、私が勉強し出した頃に比べる
編集部注:本稿は初心者向けにプログラミングやWebデザインの講座を開催している TechAcademy(テックアカデミー)による連載企画。「非エンジニアの起業家が知っておくべきプログラミングの知識」というテーマで数回に分けて極めて基礎的なプログラミングの基礎知識をお伝えする。全連載はこちらから photo credit: nyuhuhuu via photopin cc 「非エンジニアが知っておくべきプログラミングの知識」というテーマで、10回に分けてお届けする連載企画。第7回目のテーマは「これから始めるPHP基礎 – 動的なサイトを作るためのエッセンス」です。 前回は「これから始めるJavaScriptの基礎と全体像」というテーマでお送りしました。今回は、より具体的にプログラミングを学んでいただくために、PHPについて紹介していきます。本連載は、インターネット業界で、これまで技術的なバッ
HTMLやCSSも進化しています。Webデザイナーやコーダーなど、Web制作者が押さえておきたい最新のHTML/CSS関連記事をKADOKAWAが運営するオンラインメディア「WPJからアクセス人気順に紹介します。 『もう迷わない!HTML5のもっとも基本的なテンプレートはこれだ!(2016年版)』(WPJ) HTMLを書くときのベースとなる「書き出し」。いまどきはエディターにプリセットされていますし、ネットにも山ほど転がっていますが、どうせならきちんと意味を理解して、自分だけのテンプレートを作っておくとカッコいい。 2.知らないと損しているCSS関数の世界 『便利すぎてしびれた!あなたが知らないCSS関数トリック8選』(WPJ) どんどん進化するCSSの中でも、意外と知られていないのがCSS関数。アイデア次第で実用的で応用の効くCSS関数を、もっと使ってみませんか? 3.Cutestrap
「基本原則にのっとれば、誰でも魅力的なウェブデザインがわずか数分で行える」ということを視覚的にわかりやすく解説した「Web Design in 4 minutes」が公開されています。テキスト中心のウェブページのデザインをサクッと改善したい人にとって非常に便利なウェブサイトになっています。 Web Design in 4 minutes http://jgthms.com/web-design-in-4-minutes/ Web Design in 4 minutesにアクセスすると、まず、デザイン要素が一切ない、シンプルなテキストが表示されます。 文章中のリンクをクリックしていくことで、ウェブデザインの改善方法が文章で表示されるとともに、実際にサイトのデザインが変わっていくという仕組みです。「first thing(最初にすること)」をクリックすると…… 「コンテンツ」ということについて
知って得する、Webブラウザ上で利用できるグラフィック関連技術。HTMLのような感覚で図形が描画できる「SVG」をハックしよう グループ化・リンク・変形 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。前回はSVGの基礎編として、SVGドキュメントの基本的な書式と基本図形の描画方法、各種スタイル指定の方法などを解説しました。 今回はその続きとして、変形やアニメーション、フィルター、JavaScriptによる制御といった機能を取り上げていきます。例によって多数のサンプルとともに解説していきますが、Webブラウザによっては一部が動作しません。確実にサンプルを見たい方は、FirefoxまたはOperaの最新版をご使用ください。 ■ 図形のグループ化 まずは前回取り上げられなかった重要な基本機能として、「図形のグループ化」を解説します。SVGのようなベクトルグ
知って得する、Webブラウザ上で利用できるグラフィック関連技術。アニメーションや3Dが表現できる「CSS3」をハックしよう CSSで多彩な表現が可能に 本連載では、Webブラウザ上で利用できるグラフィック関連技術を、読み切りの形で、なるべく分かりやすく紹介していきます。第1回である今回はWebの基本技術の1つであるCSSで実現するグラフィック表現を取り上げます。 従来のCSSはWebページのフォントやレイアウトを整える機能がほとんどで、「グラフィック技術」というには物足りないものでした。しかし、CSS3と呼ばれる近年の拡張によって、アニメーションや3D表現を含む多彩な画面効果が実現できるものに進化しています。 この記事は、そうしたCSS3のグラフィック関連機能の基本的な使用方法をまとめて学習することを目的としています。 ベンダプレフィクスについて CSS3の多くの機能はまだ規格策定段階のも
gulp(ガルプ)はNode.jsのパッケージ(プラグイン)として開発されているWeb開発を効率的に行うためのツールです。 様々な処理や作業を自動化することができ、実際の開発現場でも使われています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く