Aタグのリンク先URLを動的に変更する (JavaScript プログラミング)
JavaScriptで Aタグのリンク先URLを動的に変更するコードを紹介します。 概要 Aタグのリンク先のURLを変更する場合は、Aタグの要素を取得し、href プロパティに遷移先のURLを設定します。 プログラム例 コード 下記のHTMLファイルを作成します。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <script type="text/javascript"> function button_click(value) { var target = document.getElementById("searchLink"); if (value ==
アクセシビリティを考えたドロップダウンメニューを実装する | Webクリエイターボックス
2020年11月14日 jQuery, アクセシビリティ 多くのWebサイトに設置されているドロップダウンメニュー。うまくカテゴリー分けされていれば非常にわかりやすく、スペースも取らないので制作側からも愛されていますね。しかしアクセシビリティの観点から考えると、ちょっとやっかいな存在ではあります。マウスがうまく利用できないユーザーはキーボードを使ってページやリンクを移動しますが、ドロップダウンメニューは tab キーを使ってもサブメニューが表示されないのです。今回はこの問題を解決しようと思います！ ↑私が10年以上利用している会計ソフト！ こちらのGif画像のように、カーソルではなくキーボードの tab キーを使ってリンクを推移できるようにします。通常のHTMLとCSSを使った設置方法だと隠されている子メニューが表示されないので、キーボード操作でもうまく表示するのが今回の目標です。ちなみに
CSSフレックスボックス(display:flex)の使い方 [無料ホームページ作成クラウドサービス まめわざ]
HTMLのレイアウト方法で最も新しいフレキシブルボックスをまめわざでも利用しています。 手軽に並列レイアウトができるスタイルですが、他の並列レイアウトとの使い分けはどうすべきか、flexにしかできない表現はあるのかを、実例を挙げながら解説します。
![CSSフレックスボックス(display:flex)の使い方 [無料ホームページ作成クラウドサービス まめわざ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/6fd81d279134a62bc4badc391345ceb7051e7ee5/height=288;version=1;width=512/https%3A%2F%2Fmamewaza.com%2Fimg%2F1466995529664s.jpg)
【CSS】displayの使い方を総まとめ！inlineやblockの違いは？
今回はCSSのdisplayプロパティをマスターしましょう。少し分かりづらい内容ではありますが、Webサイトを作るためには必ず理解しておく必要があります。
ファビコン（favicon）とは？代表的なサイズと基本の作成方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ファビコンはサイト閲覧時のタブ以外にも、多くの場所で使われていることがわかります。 また、上記以外にも検索結果画面にも表示されるため、そのサイトを表す適切なアイコンを設定するようにしましょう。 作成時のサイズは512px × 512pxのみでOK これだけサイズがあると、全て用意するのかと不安になってしまいますが、WordPress4.3以降のバージョンであれば512px × 512pxのPNG形式ファイルを作成すれば全てに対応してくれるようになりました。 複数作成する必要はないので安心してください。 WordPress以外の場合 WordPressを利用しておらず上記のような自動適用の機能がない場合、またはWordPressが4.3以前のバージョンの場合は、各サイズのアイコンを用意する必要があります。 各ブラウザのファビコン表示サイズは先ほどの表の通り16px × 16px が一般的です
デザイナー志望者は必見！ 採用されるポートフォリオを作る「た行」の法則 - ジモコロ
ポートフォリオとは何か？ デザイナーが自分を売り込むために作る作品集のようなものであり、就職活動には欠かせない存在です。どういうデザインにすれば面接官にウケるのか、適量の作品数はどれくらいなのか、表紙は？ プロの現役デザイナーに聞いてきました！ こんにちは、株式会社バーグハンバーグバーグでデザインのアルバイトをしている、お高菜と申します。普段は美術系の大学でデザインを学んでいます。 来年には大学を卒業するので、そろそろ就活の準備をしようかなと思っているのですが……皆さん、こういったものをご存知でしょうか？ こちらは「ポートフォリオ」と呼ばれる作品集。 デザイナーが自分の作品をファイルし、就職先に「私はこういう作品を作っていました」「こんなこともできます」とアピールするための作品集です。 デザイン系の職種の場合、企業はこのポートフォリオを見て学生の力量を判断します。つまり、ポートフォリオの出
おすすめフォント
ポスターやスライド、その他の資料を作るときのおすすめのフォントをまとめておきます。書体の選び方や使い方の項目で解説したように、重要なのは、可読性、視認性、判読性を意識しながらの「TPOに合わせたフォント選び」です。すでに説明した通り、｢短文か長文か？｣、｢読みにくいフォントではないか？｣、｢太字・斜体に対応しているか？｣ユニバーサルデザインか（＝判読性が高いか）？ということに着目しておすすめフォントを紹介します。これまで触れてきませんでしたが、フォントを選ぶときには汎用性・互換性にも注意しなければなりません。 最後にPowerPointにおけるフォント関連の便利なテクニックをいくつか紹介しますので、ぜひ参考にしてみてください。 ゴシック体（和文書体） Winならメイリオ/游ゴシック、Macならヒラギノ角ゴシックも プレゼン用のスライドや学会発表のポスターなどでは、視認性の高いゴシック体を使
【完全ゼロから！】SublimeTextのインストールと使い方、便利な機能
それでは、SublimeTextの入手方法やインストール方法、使い方や便利な機能について紹介してゆこう。 SublimeTextの入手方法 SublimeTextは公式サイトからダウンロードすることができる。トップページを表示すると、使用しているOSに応じたダウンロードボタンが表示されるので、クリックしてダウンロードしよう。 対象となるプラットフォームはWindows、MacOS､Linuxだが、今回はWindows10向けにダウンロード、インストールをしてみよう。 SublimeText https://www.sublimetext.com/ ダウンロードが終了したら、インストーラを起動してインストールセットアップを開始しよう。 (1)セットアップウィザードが表示されるので、「Next>」ボタンをクリックしよう。 (2)インストールするフォルダを選択する。特に指定する必要がない場合は、
ランディングページ（LP）とは？意味やメリットをわかりやすく解説
「ランディングページってホームページ運営やWebマーケティングをしていると時々聞くけど、どういう意味？」「ランディングページと通常のページは何が違うの？」
シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選
コーディング Kota Naito / 2017.07.11 シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選 画像を使用することなくHTMLとCSSだけでデザインした見出しのデザインサンプルを20パターン紹介いたします。できるだけ特性の違うデザインに仕上がるように工夫しております。これから紹介する様々なデザインサンプルを組み合わせれば、また新たな面白い見出しを作ることも可能かと思いますので、カスタマイズも楽しんでみてください。 一部ブラウザで表示できないデザインもあるかと思いますが、その場合はベンダープレフィックスを、各自で追加してください。 このページでは「見出しデザイン」のプレビューに画像を使用していますが、実際の表示は以下デモページで確認することができます。 DEMOページ 手書き風の見出しデザイン[01] このデザインのポイントは「border-radi
Illustratorを使うとき、私が手放せない10個のスクリプト｜DTP Transit
最近、セミナーでスクリプトを紹介すると評判がよいので、10個選りすぐってみました。 これらを提供してくださっている作者さんたちに感謝します。 はまりどころを見つけると「むちゃくちゃ早く終わる」「手作業ではムリ」なことが実現できるので、「ここでこういうことができると快適になるのに」をリストアップしておいて、たまに棚卸ししてみるとよいと思います。 追記 2017更新版を公開しました。 Illustratorを使うとき、私が手放せない10個のスクリプト（2017更新版）＋ 入手できるスクリプト一覧 - DTP Transit なぜ、スクリプトを使うの？ Illustratorでの作業を効率化するには、キーボードショートカットやアクションを使う方法がありますが、そもそも次のような場合には、有償のプラグインを使うほか、スクリプトを使う方法があります。 Illustratorではできないこと できるけ
プロも使う！デザインを5倍UPする「おすすめFONT」一覧
フォントってデザインの中でもとても重要。 これに気づくのってデザインをする基本の基本。5倍は決して大袈裟ではなく、フォント１つで残念なデザインになったりスタイリッシュになったりするんです。フォント一つでデザインのイメージはガラリ変わります。「デザインは細部に宿る」と言いますが、なかなかこの事に一般の人は気づけなかったりします。いや、気付いていてもなかなかフォントの名前とかわからない。。 あのフォントは何？ そういう事が、モリサワとかデザイナーの方なら当たり前のフォントでも一般の人だとなかなかわからないんですよね。有料なの？無料なの？その辺すらわからないとなかなか見つかりにくい場合もあったり今回は、個人的に好きでよく見かけるフォントの名前をご紹介します。 ※各フォントにはそれぞれ太さなどが異なる種類がありますが、その辺はあえて記載していません。だいたい中くらいの太さを表示しています。 pho
もうユーザーを迷わせない！ナビゲーションメニュー設置のコツ
2013年11月22日 Webサイト制作, ユーザビリティ どのWebサイトにも必ずあるのがナビゲーションメニュー。各コンテンツページへリンクされている「Webサイトの目次」です。この目次をきちんと設置していないと、ユーザーは欲しい情報が見つけられず、離脱率が高くなります。そのサイトでしか手に入らない、本当に必要な情報でない限り、こちらから案内しないとユーザーはコンテンツを探そうとしません。そんなナビゲーションメニューについて考えてみましょう。 ↑私が10年以上利用している会計ソフト！ ナビゲーションメニューの設置ポイント すべてのページに 基本中の基本ですが、メインのナビゲーションメニューはどのページにも同じ場所に設置しましょう。ホームページでしか表示されない…なんてことがないように。というのも、ユーザーが最初にたどり着くのが必ずしもホームページとは限らないからです。検索で特定のコンテン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Mana’s Portfolio Website
http://cn-plus.st0272.net/added-thumbnail-image/
ランディングページを自分で作るにはどうしたら良いの？
ポートフォリオサイト | Webデザインギャラリー | Choicely
https://www.colordream.net/jiscolor1.htm
マネして学べる、プログラミング学習サイト「シラバス」
1995 Gen Production - Home of KAK-A